:root{
  --paper:#d2b48c;
  --ink:#ffd700;
  --tan:#d8c3a5;
  --brown:#8b6b4f;
  --gold:#c9a24a;
  --shadow:rgba(0,0,0,.08);
  --card:rgba(255,255,255,.55);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: ui-serif, Georgia, "Times New Roman", serif;
  color:var(--ink);
  background:
    radial-gradient(1200px 900px at 10% 10%, rgba(201,162,74,.14), transparent 60%),
    radial-gradient(1000px 700px at 90% 20%, rgba(139,107,79,.18), transparent 55%),
    linear-gradient(180deg, #d2691e, var(--paper));
  min-height:100vh;
  line-height:1.55;
}

a{color:inherit}
a:hover{opacity:.9}
.container{max-width:1100px;margin:0 auto;padding:24px}

.topbar{
  position:sticky;top:0;z-index:20;
  backdrop-filter: blur(10px);
  background: linear-gradient(180deg, rgba(245,241,232,.95), rgba(245,241,232,.75));
  border-bottom:1px solid rgba(42,33,24,.08);
}

.brand{
  display:flex;align-items:center;gap:14px;
  padding:14px 24px;
}
.brand .mark{
  width:42px;height:42px;border-radius:12px;
  background: linear-gradient(135deg, var(--tan), rgba(201,162,74,.65));
  box-shadow:0 10px 25px var(--shadow);
  border:1px solid rgba(42,33,24,.10);
}
.brand .title{
  font-size:20px;font-weight:700;letter-spacing:.2px;
}
.brand .subtitle{
  font-size:13px;opacity:.8;margin-top:2px;
}

.navrow{
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;
}

.menu-btn{
  margin-left:auto;
  border:1px solid rgba(42,33,24,.16);
  background: rgba(255,255,255,.5);
  border-radius:12px;
  padding:10px 12px;
  cursor:pointer;
  box-shadow: 0 10px 25px var(--shadow);
}
.menu-btn:focus{outline:2px solid rgba(201,162,74,.5); outline-offset:2px;}

.drawer{
  position:fixed; inset:0;
  background: rgba(0,0,0,.35);
  display:none;
  z-index:50;
}
.drawer.open{display:block;}
.drawer-panel{
  position:absolute; top:0; left:0; height:100%;
  width:min(360px, 92vw);
  background: linear-gradient(180deg, rgba(245,241,232,.98), rgba(245,241,232,.92));
  border-right:1px solid rgba(42,33,24,.10);
  padding:18px;
  box-shadow: 20px 0 60px rgba(0,0,0,.18);
}
.drawer-panel h3{margin:4px 0 10px 0;font-size:16px}
.drawer-panel a{
  display:block;
  text-decoration:none;
  padding:12px 12px;
  border-radius:12px;
  border:1px solid rgba(42,33,24,.10);
  background: rgba(255,255,255,.45);
  margin:10px 0;
}
.drawer-panel a small{display:block;opacity:.75;margin-top:4px}
.drawer-close{
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom:12px;
}
.drawer-close button{
  border:none;background:transparent;cursor:pointer;
  font-size:22px;line-height:1;padding:8px 10px;border-radius:12px;
}
.drawer-close button:hover{background: rgba(0,0,0,.06);}

.hero{
  padding:34px 0 18px 0;
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap:22px;
  align-items:center;
}
@media (max-width: 860px){
  .hero{grid-template-columns:1fr}
}

.card{
  background: var(--card);
  border:1px solid rgba(42,33,24,.10);
  border-radius:22px;
  box-shadow: 0 20px 60px var(--shadow);
  overflow:hidden;
}
.card .pad{padding:20px 20px}

.kicker{
  display:inline-flex;align-items:center;gap:10px;
  padding:8px 12px;border-radius:999px;
  border:1px solid rgba(42,33,24,.12);
  background: rgba(255,255,255,.40);
  font-size:13px;
}
.kicker .dot{
  width:9px;height:9px;border-radius:99px;
  background: var(--gold);
  box-shadow:0 0 0 4px rgba(201,162,74,.15);
}

h1{margin:14px 0 8px 0;font-size:38px;line-height:1.12}
@media (max-width: 460px){h1{font-size:32px}}
.lede{font-size:16px;opacity:.88;margin:0 0 12px 0}
.meta{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.pill{
  padding:8px 12px;border-radius:999px;
  border:1px solid rgba(42,33,24,.12);
  background: rgba(255,255,255,.35);
  font-size:13px;
}

.photo-grid{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap:12px;
  padding:12px;
}
.photo{
  position:relative;
  border-radius:18px;
  overflow:hidden;
  border:1px solid rgba(42,33,24,.10);
  background: linear-gradient(180deg, rgba(216,195,165,.35), rgba(255,255,255,.35));
  min-height:150px;
}
.photo img{
  width:100%;height:100%;object-fit:cover;display:block;
  filter: sepia(.15) contrast(1.05) saturate(1.05);
}
.photo .label{
  position:absolute; left:10px; bottom:10px;
  padding:7px 10px;
  border-radius:999px;
  background: rgba(245,241,232,.86);
  border:1px solid rgba(42,33,24,.10);
  font-size:12px;
}

.section{margin:26px 0}
.section h2{margin:0 0 10px 0;font-size:22px}
.section p{margin:8px 0}

.tiles{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:14px;
}
@media (max-width: 900px){.tiles{grid-template-columns: repeat(2, 1fr);}}
@media (max-width: 560px){.tiles{grid-template-columns: 1fr;}}
.tile{
  text-decoration:none;
  display:block;
  border-radius:22px;
  overflow:hidden;
  border:1px solid rgba(42,33,24,.10);
  background: rgba(255,255,255,.42);
  box-shadow: 0 16px 50px var(--shadow);
}
.tile .thumb{
  height:140px;
  background:
    linear-gradient(135deg, rgba(201,162,74,.22), rgba(139,107,79,.18)),
    repeating-linear-gradient(90deg, rgba(42,33,24,.06) 0 2px, transparent 2px 9px);
  display:flex;align-items:flex-end;justify-content:flex-start;
  padding:14px;
}
.tile .thumb span{
  padding:7px 10px;border-radius:999px;
  border:1px solid rgba(42,33,24,.12);
  background: rgba(245,241,232,.88);
  font-size:12px;
}
.tile .body{padding:14px 14px 16px 14px}
.tile h3{margin:0 0 6px 0;font-size:16px}
.tile p{margin:0;opacity:.85;font-size:14px}

.footer{
  margin-top:34px;
  padding:22px 0 40px 0;
  border-top:1px solid rgba(42,33,24,.10);
  opacity:.9;
  font-size:13px;
}

.form{
  display:grid;gap:12px;
}
label{font-weight:700;font-size:13px}
input, textarea, select{
  width:100%;
  border-radius:16px;
  border:1px solid rgba(42,33,24,.16);
  background: rgba(255,255,255,.62);
  padding:12px 12px;
  font-family: inherit;
  font-size:15px;
}
textarea{min-height:130px;resize:vertical}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  gap:10px;
  border:none;
  border-radius:16px;
  padding:12px 14px;
  background: linear-gradient(135deg, rgba(201,162,74,.90), rgba(139,107,79,.88));
  color: #1d140c;
  font-weight:800;
  cursor:pointer;
  box-shadow: 0 18px 50px rgba(139,107,79,.25);
}
.btn:hover{transform: translateY(-1px)}
.notice{
  border-left:4px solid rgba(201,162,74,.85);
  background: rgba(255,255,255,.45);
  padding:12px 12px;
  border-radius:16px;
  border:1px solid rgba(42,33,24,.10);
}
.small{font-size:13px;opacity:.85}

.gallery{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:12px;
}
@media (max-width: 900px){.gallery{grid-template-columns: repeat(2, 1fr);}}
@media (max-width: 520px){.gallery{grid-template-columns: 1fr;}}
.gitem{
  border-radius:22px; overflow:hidden;
  border:1px solid rgba(42,33,24,.10);
  background: rgba(255,255,255,.44);
  box-shadow:0 16px 50px var(--shadow);
}
.gitem img{width:100%;height:210px;object-fit:cover;display:block;filter: sepia(.18) contrast(1.05) saturate(1.05);}
.gitem .cap{padding:12px 12px}
.gitem .cap b{display:block;margin-bottom:3px}


/* =========================================================
   Sepia Theme Override (COLOR-ONLY)
   Paste at the very bottom of assets/styles.css
   ========================================================= */

/* Sepia palette */
:root{
  --sepia-bg:        #22150F; /* deep coffee */
  --sepia-surface:   #2C1C14; /* card/section */
  --sepia-surface-2: #352218; /* slightly raised */
  --sepia-text:      #F3E6D3; /* warm parchment */
  --sepia-text-2:    #D9C2A2; /* secondary text */
  --sepia-text-3:    #B8946D; /* subtle labels */
  --sepia-border:    #6A4A31; /* warm border */
  --sepia-accent:    #C9A24E; /* old-gold */
  --sepia-accent-2:  #E0C47A; /* lighter gold */
  --sepia-link:      #E6CC85;
  --sepia-link-hover:#F4E1A6;
  --sepia-shadow:    rgba(0,0,0,.35);
}

/* Global */
html, body{
  background: var(--sepia-bg) !important;
  color: var(--sepia-text) !important;
}
p, li, .small{
  color: var(--sepia-text-2) !important;
}
h1, h2, h3, h4, h5, h6, b, strong, .title{
  color: var(--sepia-text) !important;
}

/* Links */
a{
  color: var(--sepia-link) !important;
}
a:hover{
  color: var(--sepia-link-hover) !important;
}

/* Top bar + nav */
.topbar{
  background: rgba(44, 28, 20, .92) !important;
  border-bottom-color: rgba(201, 162, 78, .25) !important;
}
.subtitle{
  color: var(--sepia-text-2) !important;
}
.mark{
  background: radial-gradient(circle at 30% 30%, var(--sepia-accent-2), var(--sepia-accent)) !important;
  border-color: rgba(243, 230, 211, .18) !important;
}

/* Menu button */
.menu-btn{
  background: rgba(201, 162, 78, .12) !important;
  color: var(--sepia-text) !important;
  border-color: rgba(201, 162, 78, .35) !important;
}
.menu-btn:hover{
  background: rgba(201, 162, 78, .18) !important;
  border-color: rgba(201, 162, 78, .55) !important;
}

/* Drawer */
.drawer{
  background: rgba(0,0,0,.55) !important;
}
.drawer-panel{
  background: var(--sepia-surface) !important;
  border-left-color: rgba(201, 162, 78, .25) !important;
}
.drawer-panel a{
  color: var(--sepia-text) !important;
  border-color: rgba(106, 74, 49, .45) !important;
}
.drawer-panel a small{
  color: var(--sepia-text-2) !important;
}
.drawer-close button{
  background: rgba(201, 162, 78, .10) !important;
  color: var(--sepia-text) !important;
  border-color: rgba(201, 162, 78, .35) !important;
}

/* Containers / cards */
.card{
  background: linear-gradient(180deg, rgba(53,34,24,.95), rgba(44,28,20,.95)) !important;
  border-color: rgba(201, 162, 78, .18) !important;
  box-shadow: 0 10px 30px var(--sepia-shadow) !important;
}
.section{
  border-top-color: rgba(106, 74, 49, .35) !important;
}

/* Kicker + dot */
.kicker{
  color: var(--ink) !important;
}
.kicker .dot{
  background: var(--sepia-accent) !important;
  box-shadow: 0 0 0 3px rgba(201, 162, 78, .18) !important;
}

/* Pills / notices */
.pill{
  background: rgba(201, 162, 78, .10) !important;
  color: var(--sepia-text) !important;
  border-color: rgba(201, 162, 78, .28) !important;
}
.notice{
  background: rgba(201, 162, 78, .09) !important;
  border-color: rgba(201, 162, 78, .22) !important;
  color: var(--sepia-text) !important;
}
.notice .small{
  color: var(--sepia-text-2) !important;
}

/* Tiles */
.tile{
  background: rgba(201, 162, 78, .07) !important;
  border-color: rgba(201, 162, 78, .18) !important;
}
.tile:hover{
  background: rgba(201, 162, 78, .10) !important;
  border-color: rgba(201, 162, 78, .30) !important;
}
.tile .body p{
  color: var(--sepia-text-2) !important;
}
.thumb{
  background: linear-gradient(135deg, rgba(201,162,78,.28), rgba(106,74,49,.35)) !important;
  border-color: rgba(243,230,211,.10) !important;
}
.thumb span{
  color: var(--brown) !important;
}

/* Photo labels */
.photo .label,
.photo .cap,
.label{
  background: rgba(34, 21, 15, .72) !important;
  color: var(--sepia-text) !important;
  border-color: rgba(201, 162, 78, .22) !important;
}

/* Gallery captions */
.cap b{
  color: var(--sepia-text) !important;
}
.cap .small{
  color: var(--sepia-text-2) !important;
}

/* Forms */
label{
  color: var(--sepia-text) !important;
}
input, textarea, select{
  background: rgba(243, 230, 211, .06) !important;
  color: var(--sepia-text) !important;
  border-color: rgba(201, 162, 78, .25) !important;
}
input::placeholder, textarea::placeholder{
  color: rgba(217, 194, 162, .70) !important;
}
input:focus, textarea:focus, select:focus{
  border-color: rgba(224, 196, 122, .60) !important;
  box-shadow: 0 0 0 4px rgba(201, 162, 78, .16) !important;
  outline: none !important;
}

/* Buttons */
.btn, button.btn{
  background: linear-gradient(180deg, rgba(201,162,78,.92), rgba(173,131,55,.92)) !important;
  color: #1E120C !important; /* deep brown for contrast */
  border-color: rgba(243, 230, 211, .15) !important;
}
.btn:hover, button.btn:hover{
  background: linear-gradient(180deg, rgba(224,196,122,.95), rgba(201,162,78,.95)) !important;
}

/* Footer */
.footer{
  color: var(--sepia-text-2) !important;
  border-top-color: rgba(106, 74, 49, .35) !important;
}
.footer b{
  color: var(--sepia-text) !important;
}

/* HR + misc */
hr{
  border-color: rgba(106, 74, 49, .45) !important;
}

/* Video player (overrides inline style colors) */
video{
  border-color: rgba(201, 162, 78, .22) !important;
  background: rgba(243, 230, 211, .05) !important;
}

















/* =========================================================
   Hand-drawn Japanese white trees + falling white leaves
   Paste at the very bottom of assets/styles.css
   ========================================================= */

:root{
  /* Tweak these if you want stronger/weaker effect */
  --sumi-tree-opacity: .22;     /* tree linework strength */
  --sumi-tree-scale: 1;         /* overall svg scale */
  --petal-opacity: .14;         /* falling leaf/petal visibility */
  --petal-size: 34px;           /* base petal size */
  --petal-speed: 50s;           /* fall speed */
}

/* Make sure our overlays can sit above the background but behind content */
body{
  position: relative;
  overflow-x: hidden;
}

/* Hand-drawn “sumi-e” style tree linework (SVG as a repeating background) */
body::before{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;

  /* The drawing itself */
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='1200'%20height='800'%20viewBox='0%200%201200%20800'%3E%3Cdefs%3E%3Cfilter%20id='rough'%20x='-20%25'%20y='-20%25'%20width='140%25'%20height='140%25'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.9'%20numOctaves='1'%20seed='3'%20result='noise'/%3E%3CfeDisplacementMap%20in='SourceGraphic'%20in2='noise'%20scale='0.8'/%3E%3C/filter%3E%3C/defs%3E%3Cg%20filter='url(%23rough)'%20fill='none'%20stroke='%23FFFFFF'%20stroke-opacity='0.9'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3C!--%20Left%20tree%20(trunk%20+%20branches)%20--%3E%3Cpath%20stroke-width='3'%20d='M130%20820%20C120%20720%2C%20110%20640%2C%20135%20570%20C155%20510%2C%20210%20470%2C%20210%20410%20C212%20340%2C%20160%20310%2C%20170%20240%20C182%20160%2C%20255%20120%2C%20280%2060'/%3E%3Cpath%20stroke-width='2'%20d='M175%20510%20C130%20480%2C%20110%20430%2C%2080%20390'/%3E%3Cpath%20stroke-width='2'%20d='M185%20470%20C235%20455%2C%20275%20410%2C%20305%20370'/%3E%3Cpath%20stroke-width='1.8'%20d='M198%20425%20C165%20405%2C%20135%20370%2C%20120%20320'/%3E%3Cpath%20stroke-width='1.8'%20d='M205%20390%20C250%20365%2C%20290%20325%2C%20340%20295'/%3E%3Cpath%20stroke-width='1.5'%20d='M190%20310%20C140%20285%2C%20120%20255%2C%20100%20210'/%3E%3Cpath%20stroke-width='1.5'%20d='M220%20325%20C260%20310%2C%20300%20280%2C%20335%20245'/%3E%3C!--%20Left%20tree%20blossom%20clusters%20--%3E%3Cpath%20stroke-width='1.2'%20d='M90%20388%20C110%20375%2C%20135%20380%2C%20155%20395%20C135%20405%2C%20110%20410%2C%2090%20388Z'/%3E%3Cpath%20stroke-width='1.2'%20d='M285%20370%20C300%20355%2C%20325%20360%2C%20345%20375%20C325%20390%2C%20305%20395%2C%20285%20370Z'/%3E%3Cpath%20stroke-width='1.1'%20d='M120%20318%20C140%20305%2C%20165%20310%2C%20180%20325%20C165%20338%2C%20140%20340%2C%20120%20318Z'/%3E%3Cpath%20stroke-width='1.1'%20d='M330%20295%20C345%20282%2C%20370%20286%2C%20385%20300%20C370%20312%2C%20348%20315%2C%20330%20295Z'/%3E%3C!--%20Right%20tree%20(trunk%20+%20branches)%20--%3E%3Cpath%20stroke-width='3'%20d='M1070%20820%20C1085%20710%2C%201098%20625%2C%201075%20555%20C1055%20495%2C%201000%20470%2C%201000%20405%20C1000%20335%2C%201055%20310%2C%201045%20235%20C1035%20160%2C%20960%20125%2C%20935%2065'/%3E%3Cpath%20stroke-width='2'%20d='M1030%20505%20C1075%20485%2C%201110%20445%2C%201135%20405'/%3E%3Cpath%20stroke-width='2'%20d='M1018%20470%20C970%20455%2C%20930%20410%2C%20900%20370'/%3E%3Cpath%20stroke-width='1.8'%20d='M1010%20425%20C1045%20405%2C%201075%20370%2C%201090%20320'/%3E%3Cpath%20stroke-width='1.8'%20d='M1005%20390%20C960%20365%2C%20920%20325%2C%20870%20295'/%3E%3Cpath%20stroke-width='1.5'%20d='M1020%20310%20C1070%20285%2C%201090%20255%2C%201110%20210'/%3E%3Cpath%20stroke-width='1.5'%20d='M990%20325%20C950%20310%2C%20910%20280%2C%20875%20245'/%3E%3C!--%20Right%20tree%20blossom%20clusters%20--%3E%3Cpath%20stroke-width='1.2'%20d='M1120%20405%20C1100%20392%2C%201075%20398%2C%201055%20412%20C1075%20425%2C%201100%20428%2C%201120%20405Z'/%3E%3Cpath%20stroke-width='1.2'%20d='M905%20370%20C890%20355%2C%20865%20360%2C%20845%20375%20C865%20390%2C%20885%20395%2C%20905%20370Z'/%3E%3Cpath%20stroke-width='1.1'%20d='M1088%20320%20C1068%20306%2C%201043%20312%2C%201028%20328%20C1045%20340%2C%201070%20342%2C%201088%20320Z'/%3E%3Cpath%20stroke-width='1.1'%20d='M870%20295%20C855%20282%2C%20830%20286%2C%20815%20300%20C830%20312%2C%20852%20315%2C%20870%20295Z'/%3E%3C/g%3E%3C/svg%3E");

  background-repeat: repeat;
  background-size: calc(1200px * var(--sumi-tree-scale)) calc(800px * var(--sumi-tree-scale));
  background-position: center;
  opacity: var(--sumi-tree-opacity);

  /* Make it feel like it’s “ink on paper”, not a sticker */
  mix-blend-mode: screen;
  filter: blur(.15px);
}

/* Falling leaves/petals overlay */
body::after{
  content:"";
  position: fixed;
  inset: -20vh 0 0 0; /* start above the viewport */
  pointer-events: none;
  z-index: 0;

  /* Two layers of petals for depth */
  background-image:
    radial-gradient(circle at 10% 10%, rgba(255,255,255,var(--petal-opacity)) 0 2px, transparent 3px),
    radial-gradient(circle at 40% 30%, rgba(255,255,255,calc(var(--petal-opacity) * .8)) 0 2px, transparent 3px),
    radial-gradient(circle at 70% 20%, rgba(255,255,255,calc(var(--petal-opacity) * .65)) 0 1.6px, transparent 2.6px),
    radial-gradient(circle at 90% 40%, rgba(255,255,255,calc(var(--petal-opacity) * .55)) 0 1.5px, transparent 2.5px);

  background-size:
    calc(var(--petal-size) * 4) calc(var(--petal-size) * 4),
    calc(var(--petal-size) * 5) calc(var(--petal-size) * 5),
    calc(var(--petal-size) * 6) calc(var(--petal-size) * 6),
    calc(var(--petal-size) * 7) calc(var(--petal-size) * 7);

  background-repeat: repeat;
  opacity: 1;
  mix-blend-mode: screen;

  animation: petals-fall var(--petal-speed) linear infinite;
}

@keyframes petals-fall{
  0%{
    transform: translateY(-20vh);
    background-position:
      0px 0px,
      60px -120px,
      140px -40px,
      220px -180px;
  }
  100%{
    transform: translateY(120vh);
    background-position:
      140px 900px,
      0px 780px,
      220px 860px,
      60px 740px;
  }
}

/* Ensure content is above overlays */
.topbar, .container, main, section, .card, .drawer{
  position: relative;
  z-index: 1;
}

/* Optional: reduce motion for accessibility */
@media (prefers-reduced-motion: reduce){
  body::after{ animation: none; }
}




















/* =========================================================
   Click-to-expand (Lightbox) for Gallery images (non-index pages)
   ========================================================= */

.gallery img{
  cursor: zoom-in;
}

/* Lightbox overlay */
.lightbox{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.72);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 9999;
}

.lightbox.open{ display: flex; }

.lightbox-inner{
  position: relative;
  width: min(1100px, 92vw);
  max-height: 86vh;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(20, 14, 10, .65);
  backdrop-filter: blur(6px);
  box-shadow: 0 30px 80px rgba(0,0,0,.45);
}

.lightbox-img{
  width: 100%;
  height: auto;
  max-height: 86vh;
  object-fit: contain;
  display: block;
}

.lightbox-close{
  position: absolute;
  top: 10px;
  right: 10px;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(0,0,0,.45);
  color: #fff;
  border-radius: 12px;
  padding: 8px 10px;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
}

.lightbox-close:hover{
  background: rgba(0,0,0,.60);
}












/* =========================================================
   Drawer overlay always on top + mobile friendly
   ========================================================= */

body.drawer-open{
  overflow: hidden;
}

/* Make sure nothing can sit above the drawer */
#drawer,
.drawer{
  position: fixed;
  inset: 0;                  /* full-screen overlay */
  z-index: 99999 !important; /* beat everything */
  isolation: isolate;        /* avoids stacking-context bugs */
}

/* If your drawer has an inner panel, keep it scrollable */
#drawer .drawer-panel,
.drawer .drawer-panel{
  max-height: 100vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Topbar should still be above normal content but below open drawer */
.topbar{
  position: sticky;  /* if you already use fixed/sticky, this won't hurt */
  top: 0;
  z-index: 2000;
}














/* Make sure nothing blocks clicks on gallery images */
.gallery .cap,
.gallery .small{
  pointer-events: none;
}

/* Keep image definitely clickable */
.gallery img{
  position: relative;
  z-index: 2;
}










/* Ensure gallery images always receive the click */
.gallery .cap,
.gallery .cap *{
  pointer-events: none;
}

.gallery img{
  position: relative;
  z-index: 2;
}







/* Desktop fix: captions/overlays should NOT block clicks on photos */
.gallery .cap,
.gallery .cap *{
  pointer-events: none;
}

/* Keep images clearly clickable */
.gallery img{
  cursor: zoom-in;
  position: relative;
  z-index: 2;
}