:root{
  --gap:0px; --header-h:70px;
  --bg:#ececea; --tile:#d9d9d6; --ink:#161616; --ink-soft:rgba(22,22,22,.6);
  --glass:rgba(255,255,255,.5); --glass-strong:rgba(255,255,255,.74); --line:rgba(255,255,255,.55);
  --field:rgba(255,255,255,.55); --field-line:rgba(0,0,0,.14);
  --serif:"Cormorant Garamond","Cormorant",Georgia,"Times New Roman",serif;
  --sans:"Jost","Helvetica Neue",Helvetica,Arial,sans-serif;
  /* set from your settings by script.js */
  --bar-bg:var(--glass); --bar-blur:20px; --bar-border:1px solid var(--line); --bar-ink:inherit;
  --fs-name:28px; --fs-menu:12px; --fs-hover-t:26px; --fs-hover-d:15px;
  --fs-story-t:40px; --fs-story-d:18px; --fs-page:16.5px; --lh:1.7;
  --exif-w:250px; --shade:.35; --bar-radius:0px;
  --story-w:720px; --story-a:.88; --story-align:left;
}
:root[data-theme="dark"]{
  --bg:#0b0b0c; --tile:#1a1a1c; --ink:#f3f2ef; --ink-soft:rgba(243,242,239,.62);
  --glass:rgba(16,16,18,.48); --glass-strong:rgba(20,20,22,.78); --line:rgba(255,255,255,.1);
  --field:rgba(255,255,255,.06); --field-line:rgba(255,255,255,.16);
}
*{box-sizing:border-box}
html,body{margin:0}
/* No scrollbar strip: the photo wall always spans the full window and can never push the page sideways */
html{overflow-x:hidden; scrollbar-width:none; -ms-overflow-style:none}
html::-webkit-scrollbar,body::-webkit-scrollbar{display:none; width:0; height:0}
body{
  background:var(--bg); color:var(--ink);
  font-family:var(--sans); font-weight:300;
  -webkit-font-smoothing:antialiased;
  -webkit-user-select:none; user-select:none; -webkit-touch-callout:none;
}
html.unprotected body{-webkit-user-select:auto; user-select:auto; -webkit-touch-callout:default}
img{-webkit-user-drag:none; user-drag:none}
a{color:inherit}

/* ---------- Top bar (mode set in admin: reveal | fixed | overlay | static) ---------- */
.topbar{
  position:fixed; top:0; left:0; right:0; z-index:20; height:var(--header-h);
  display:flex; align-items:center; justify-content:space-between; gap:1.6rem;
  padding:0 clamp(18px,3vw,44px);
  background:var(--bar-bg); color:var(--bar-ink);
  -webkit-backdrop-filter:blur(var(--bar-blur)) saturate(1.5); backdrop-filter:blur(var(--bar-blur)) saturate(1.5);
  border-bottom:var(--bar-border); border-radius:0 0 var(--bar-radius) var(--bar-radius);
  transform:translateY(-102%); opacity:0; pointer-events:none;
  transition:transform .55s cubic-bezier(.2,.7,.2,1), opacity .45s ease;
}
.topbar.show{transform:none; opacity:1; pointer-events:auto}
:root[data-bar="static"] .topbar{position:absolute}
:root[data-barlayout="center"] .topbar{justify-content:center; gap:2.4rem}
:root[data-barlayout="left"] .topbar{justify-content:flex-start; gap:2.4rem}
.brand{
  font-family:var(--serif); font-size:var(--fs-name); font-weight:500; letter-spacing:.03em; line-height:1.1;
  text-decoration:none; transition:opacity .25s; white-space:nowrap;
}
.brand[hidden],nav[hidden],nav a[hidden]{display:none}
nav{margin-left:auto; white-space:nowrap}
:root[data-barlayout="center"] nav,:root[data-barlayout="left"] nav{margin-left:0}
nav a{
  font-family:var(--sans); font-weight:400; font-size:var(--fs-menu); letter-spacing:.26em; text-transform:uppercase;
  margin-left:0; text-decoration:none; padding-bottom:4px;
  background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;
  transition:background-size .35s ease;
}
nav a:not([hidden]) ~ a:not([hidden]){margin-left:2.2rem}
nav a:hover{background-size:100% 1px}
.brand:hover{opacity:.6}

/* ---------- Mosaic: edge to edge ---------- */
#gallery{padding:0 0 var(--gap)}
:root[data-bar="fixed"] #gallery,:root[data-bar="static"] #gallery{padding-top:calc(var(--header-h) + var(--gap))}
.row{display:flex; gap:var(--gap); margin-bottom:var(--gap)}
.row.last{justify-content:flex-start}
.tile{
  position:relative; display:block; flex:0 0 auto; overflow:hidden;
  background:var(--tile); cursor:pointer; outline:none;
  opacity:0; animation:fade .6s ease forwards;
}
/* No zoom on hover: the photo stays still, only the text fades in */
.tile img{width:100%; height:100%; object-fit:cover; display:block; pointer-events:none}
.tile .cap{
  position:absolute; left:0; right:0; bottom:0; padding:80px 22px 18px;
  color:#fff; text-align:left;
  background:linear-gradient(to top,rgba(0,0,0,calc(var(--shade) * .95)),rgba(0,0,0,calc(var(--shade) * .45)) 55%,rgba(0,0,0,0));
  text-shadow:0 1px 10px rgba(0,0,0,.35);
  opacity:0; transition:opacity .35s ease; pointer-events:none;
}
.tile .cap .t{
  display:block; font-family:var(--serif); font-weight:500; font-size:var(--fs-hover-t); line-height:1.15; letter-spacing:.01em;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.tile .cap .d{
  display:-webkit-box; -webkit-line-clamp:var(--lines,2); -webkit-box-orient:vertical; overflow:hidden; overflow-wrap:anywhere;
  margin-top:6px; font-size:var(--fs-hover-d); line-height:1.45; font-weight:300; color:rgba(255,255,255,.88);
}
.tile:focus-visible{box-shadow:inset 0 0 0 3px var(--ink)}
@media (hover:hover){
  .tile:hover .cap,.tile:focus-visible .cap{opacity:1}
}
@keyframes fade{to{opacity:1}}
.ready .tile{animation:none; opacity:1}
.empty{padding:34vh 20px; text-align:center; font-family:var(--serif); font-style:italic; font-size:1.6rem; color:var(--ink-soft)}
#footer{padding:26px 20px 38px; text-align:center; font-family:var(--serif); font-style:italic; font-size:1.05rem; color:var(--ink-soft)}
#footer[hidden]{display:none}

/* ---------- Glass helper ---------- */
.glass{
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.18); color:#fff;
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
}

/* ---------- Lightbox ---------- */
.lightbox{
  position:fixed; inset:0; z-index:100;
  background:rgba(8,8,10,.7);
  -webkit-backdrop-filter:blur(28px) saturate(1.2); backdrop-filter:blur(28px) saturate(1.2);
  animation:lbin .28s ease;
}
@keyframes lbin{from{opacity:0}to{opacity:1}}
.lightbox[hidden],.panel[hidden]{display:none}
/* Normal arrow cursor; the "grab" hand only appears once the photo is zoomed and can be moved */
.lb-stage{position:absolute; inset:0; overflow:hidden; cursor:default; touch-action:none}
/* The hand shows only over a photo that can be zoomed (click to zoom, then the photo follows the mouse) */
.lb-stage.hand{cursor:pointer}
/* Zoom works by resizing the image (not scaling a bitmap), so the full-resolution file is always drawn sharp */
.lb-stage img{
  position:absolute; left:50%; top:50%; max-width:none; max-height:none;
  transform-origin:center center; pointer-events:none;
  box-shadow:0 24px 90px rgba(0,0,0,.5);
}
.lb-full{opacity:0; transition:opacity .3s ease}
.lb-full.on{opacity:1}
.lb-btn{
  position:absolute; width:46px; height:46px; border-radius:50%; cursor:pointer; z-index:3;
  font-size:1.7rem; line-height:1; padding:0 0 3px; display:flex; align-items:center; justify-content:center;
  transition:background .2s;
}
.lb-btn:hover,.lb-zoom button:hover{background:rgba(255,255,255,.26)}
/* Previous / next / close are not drawn: arrow keys, swiping and clicking outside the photo do the job.
   The close button appears on phones/tablets only (admin can change this); arrows are an admin option. */
.lb-close,.lb-prev,.lb-next{display:none}
.lb-close{top:20px; right:22px}
.lb-prev{left:22px; top:50%; margin-top:-23px}
.lb-next{right:22px; top:50%; margin-top:-23px}
.lightbox[data-close="always"] .lb-close{display:flex}
.lightbox[data-arrows="on"] .lb-prev,.lightbox[data-arrows="on"] .lb-next{display:flex}
@media (max-width:760px),(hover:none){.lightbox:not([data-close="never"]) .lb-close{display:flex}}
.lb-count{
  position:absolute; left:22px; top:20px; height:46px; padding:0 1.2rem; border-radius:999px; z-index:3;
  display:flex; align-items:center; font:400 .72rem var(--sans); letter-spacing:.22em; white-space:pre;
}
.lb-zoom{position:absolute; right:22px; bottom:22px; display:flex; border-radius:999px; overflow:hidden; z-index:3}
.lb-zoom button{
  background:none; border:0; color:#fff; cursor:pointer; min-width:46px; height:46px; padding:0 .9rem;
  font:400 1.1rem var(--sans); transition:background .2s;
}
.lb-zoom .txt{font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; border-left:1px solid rgba(255,255,255,.18)}
#zActual{border-right:1px solid rgba(255,255,255,.18)}

/* No text is ever drawn over the photo. The story opens as its own article page: scroll down, swipe up, or press the down arrow. */
.lb-back{
  position:absolute; z-index:7; left:22px; top:20px; height:46px; padding:0 1.3rem; border-radius:999px; cursor:pointer;
  font:400 .72rem var(--sans); letter-spacing:.2em; text-transform:uppercase;
}
.lb-back:hover{background:rgba(255,255,255,.26)}
.lightbox.story-open .lb-close{z-index:7}
.lb-story{
  position:absolute; inset:0; z-index:5; overflow-y:auto; overscroll-behavior:contain; outline:none;
  background:rgba(14,14,16,var(--story-a)); color:#f3f1ec;
  -webkit-backdrop-filter:blur(24px); backdrop-filter:blur(24px);
  -webkit-user-select:text; user-select:text;
  animation:storyin .45s cubic-bezier(.2,.7,.2,1);
}
@keyframes storyin{from{transform:translateY(40px); opacity:0}to{transform:none; opacity:1}}
.story{width:min(var(--story-w),calc(100% - 44px)); margin:0 auto; padding:96px 0 140px; overflow-wrap:anywhere; word-break:break-word; text-align:var(--story-align,left)}
.story figure{margin:0 0 44px}
.story figure img{display:block; width:100%; max-height:64vh; object-fit:contain; border-radius:6px; box-shadow:0 20px 70px rgba(0,0,0,.45)}
.story .t{margin:0 0 .5em; font-family:var(--serif); font-weight:500; font-size:var(--fs-story-t); line-height:1.12; letter-spacing:.01em}
.story .d{font-family:var(--sans); font-weight:300; font-size:var(--fs-story-d); line-height:var(--lh); color:rgba(243,241,236,.92)}
.story .dp{margin:0 0 1.2em}
.story .dp:last-child{margin-bottom:0}
.story a{text-decoration:underline; text-underline-offset:3px}

/* ---------- About / Contact panels ---------- */
.panel{
  position:fixed; inset:0; z-index:90; display:flex; align-items:center; justify-content:center; padding:20px;
  background:rgba(0,0,0,.22);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
}
.panel-box{
  position:relative; max-width:980px; width:100%; max-height:90vh; overflow:auto; overscroll-behavior:contain;
  padding:52px 52px 46px; border-radius:24px;
  background:var(--glass-strong); border:1px solid var(--line);
  -webkit-backdrop-filter:blur(26px) saturate(1.4); backdrop-filter:blur(26px) saturate(1.4);
  box-shadow:0 30px 90px rgba(0,0,0,.28);
  -webkit-user-select:text; user-select:text;
  overflow-wrap:anywhere;
}
.panel-close{position:absolute; top:12px; right:18px; border:0; background:none; font-size:2rem; cursor:pointer; color:var(--ink); opacity:.6; z-index:2}
.panel-close:hover{opacity:1}
.about,.contact{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,6fr); gap:44px; align-items:start}
.about.noimg,.contact.noform{grid-template-columns:1fr; max-width:600px}
.about figure{margin:0; border-radius:16px; overflow:hidden; background:var(--tile)}
.about figure img{display:block; width:100%; height:auto; max-height:72vh; object-fit:cover}
.about h2,.contact h2{margin:0 0 6px; font-family:var(--serif); font-weight:500; font-size:2.5rem; letter-spacing:.02em; line-height:1.1}
.tagline{margin:0 0 20px; font-family:var(--serif); font-style:italic; font-size:1.35rem; color:var(--ink-soft)}
.para{margin:0 0 1em; line-height:var(--lh); font-size:var(--fs-page)}
.panel-box a{text-underline-offset:3px}
.links{display:flex; flex-wrap:wrap; gap:10px 22px; margin-top:24px}
.links a{
  font:400 .72rem var(--sans); letter-spacing:.22em; text-transform:uppercase; text-decoration:none;
  border-bottom:1px solid currentColor; padding-bottom:3px; transition:opacity .2s;
}
.links a:hover{opacity:.55}
.contact-list{list-style:none; margin:22px 0 0; padding:0; display:grid; gap:16px}
.contact-list .lbl{display:block; margin-bottom:2px; font:400 .66rem var(--sans); letter-spacing:.24em; text-transform:uppercase; color:var(--ink-soft)}
.contact-list a{font-family:var(--serif); font-size:1.6rem; text-decoration:none; word-break:break-word}
.contact-list a:hover{opacity:.6}
.form{display:grid; gap:16px}
.form label span{display:block; margin-bottom:6px; font:400 .66rem var(--sans); letter-spacing:.22em; text-transform:uppercase; color:var(--ink-soft)}
.form input,.form textarea{
  width:100%; padding:13px 15px; border-radius:12px; border:1px solid var(--field-line); background:var(--field);
  color:var(--ink); font:300 1rem var(--sans); resize:vertical;
  -webkit-user-select:text; user-select:text; transition:border-color .2s, background .2s;
}
.form input:focus,.form textarea:focus{outline:none; border-color:var(--ink); background:transparent}
.hp{position:absolute!important; left:-9999px; width:1px; height:1px; opacity:0}
.send{
  justify-self:start; padding:1rem 1.9rem; border-radius:999px; border:0; cursor:pointer;
  background:var(--ink); color:var(--bg); font:400 .72rem var(--sans); letter-spacing:.24em; text-transform:uppercase;
  transition:opacity .2s;
}
.send:hover{opacity:.8}
.send:disabled{opacity:.45; cursor:default}
.form-status{margin:0; min-height:1.4em; font-size:.94rem}
.form-status.ok{color:#2f8a4f}
.form-status.err{color:#b4472c}

@media (max-width:760px){
  .brand{font-size:calc(var(--fs-name) * .8)}
  nav a{font-size:calc(var(--fs-menu) * .92)}
  nav a:not([hidden]) ~ a:not([hidden]){margin-left:1.3rem}
  .lb-prev,.lb-next,.lb-zoom{display:none}
  .lb-back{left:14px}
  .story .t{font-size:calc(var(--fs-story-t) * .8)}
  .story .d{font-size:calc(var(--fs-story-d) * .95)}
  .panel{padding:10px}
  .panel-box{padding:44px 22px 30px; border-radius:20px}
  .about,.contact{grid-template-columns:1fr; gap:28px}
  .about h2,.contact h2{font-size:2.1rem}
}

/* ---------- Camera data (EXIF) on the side of the full-size view ---------- */
.lb-exif{
  position:absolute; z-index:2; right:0; top:0; bottom:0; width:var(--exif-w); padding:84px 26px 28px; overflow-y:auto;
  display:flex; flex-direction:column; justify-content:center; gap:18px;
  background:rgba(14,14,16,.42); border-left:1px solid rgba(255,255,255,.1); color:#f3f1ec;
  -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
  -webkit-user-select:text; user-select:text;
}
.lb-exif[hidden]{display:none}
.lightbox.has-exif .lb-stage{right:var(--exif-w)}
.lightbox.has-exif[data-arrows="on"] .lb-next{right:calc(var(--exif-w) + 22px)}
.lightbox.has-exif .lb-close{z-index:6}
.exif-list{margin:0; display:grid; gap:15px}
.exif-list dt{margin:0 0 3px; font:400 .62rem var(--sans); letter-spacing:.24em; text-transform:uppercase; color:rgba(243,241,236,.55)}
.exif-list dd{margin:0; font:300 .98rem/1.35 var(--sans); overflow-wrap:anywhere}
.exif-pal{display:flex; gap:7px}
.exif-pal i{width:26px; height:26px; border-radius:50%; border:1px solid rgba(255,255,255,.25)}
.story .exif-list{margin-top:46px; padding-top:26px; border-top:1px solid rgba(255,255,255,.16); grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.story .exif-pal{margin-top:20px}

/* ---------- Sort menu (optional, for visitors) ---------- */
.sortmenu{
  position:fixed; z-index:25; top:calc(var(--header-h) + 10px); right:clamp(18px,3vw,44px); display:grid; padding:8px; border-radius:16px;
  background:var(--glass-strong); border:1px solid var(--line); box-shadow:0 18px 50px rgba(0,0,0,.22);
  -webkit-backdrop-filter:blur(22px); backdrop-filter:blur(22px);
}
.sortmenu[hidden]{display:none}
.sortmenu button{border:0; background:none; color:var(--ink); text-align:left; cursor:pointer; padding:10px 18px; border-radius:10px; font:400 .72rem var(--sans); letter-spacing:.2em; text-transform:uppercase}
.sortmenu button:hover,.sortmenu button.on{background:rgba(127,127,127,.18)}

/* ---------- colour picker (press the key while a photo is open) ---------- */
.pick{
  position:absolute; z-index:30; display:flex; align-items:center; gap:.6rem; pointer-events:none;
  padding:.4rem .75rem .4rem .45rem; border-radius:999px; font:400 13px/1 var(--sans); letter-spacing:.06em;
  background:rgba(20,20,22,.78); color:#fff; border:1px solid rgba(255,255,255,.2);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  box-shadow:0 8px 24px rgba(0,0,0,.35); white-space:nowrap;
  opacity:0; transform:translate(14px,14px) scale(.96); transition:opacity .2s ease, transform .2s ease;
}
.pick.on{opacity:1; transform:translate(14px,14px)}
.pick i{width:22px; height:22px; border-radius:50%; border:2px solid rgba(255,255,255,.85); flex:none}
.pick small{opacity:.65; font-size:11px; margin-left:.2rem}