/* Shared styles for the category gallery pages (sunsets / cars / concretes / nature) */
:root{
  --bg:#001829;
  --fg:#f5f6f7;
  --muted:rgba(245,246,247,.55);
  --pad:clamp(18px, 4vw, 42px);
  --gap:16px;
  --max:1100px;
  --shadow:0 18px 60px rgba(0,0,0,.45);
  --dock-in: calc(clamp(14px, 1.6vw, 26px) + 6px);
}

/* ---- Navbar: same as the home page — Home on the left, three-dot menu on the
       right that slides open sideways into a row of plain text links ---- */
header.site-nav{
  position:fixed;
  top:0; left:0; right:0;
  z-index:50;
  padding: var(--dock-in) var(--dock-in) 0;
  pointer-events:none;
}
.nav{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  width:100%;
}
.nav-home, .nav-more{
  pointer-events:auto;
  width:46px; height:46px;
  border-radius:14px;
  display:grid; place-items:center;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(10,12,15,.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 10px 36px rgba(0,0,0,.35);
  color:rgba(245,246,247,.6);
  text-decoration:none;
  cursor:pointer;
  padding:0;
  transition: color .2s ease, border-color .2s ease;
}
.nav-home:hover, .nav-more:hover, .nav-more[aria-expanded="true"]{
  color:rgba(245,246,247,.95);
  border-color:rgba(255,255,255,.2);
}
.nav-more svg{ transition: transform .45s cubic-bezier(.22,1,.36,1); }
.nav-more[aria-expanded="true"] svg{ transform: rotate(90deg); }
.menu-row{
  position:absolute;
  top: var(--dock-in);
  right: calc(var(--dock-in) + 54px);
  height:46px;
  display:flex; align-items:center;
  padding:0 6px;
  white-space:nowrap;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(10,12,15,.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 10px 36px rgba(0,0,0,.35);
  pointer-events:none;
  opacity:0;
  clip-path: inset(0 0 0 100% round 14px);
  transition: clip-path .55s cubic-bezier(.22,1,.36,1), opacity .3s ease;
}
.menu-row.open{ opacity:1; pointer-events:auto; clip-path: inset(0 0 0 0 round 14px); }
.menu-row a{
  display:inline-flex; align-items:center; height:100%;
  padding:0 12px;
  color:rgba(245,246,247,.62);
  text-decoration:none;
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  transition: color .2s ease;
}
.menu-row a:hover{ color:#fff; }
@media (max-width: 700px){
  .menu-row{ padding:0 4px; }
  .menu-row a{ padding:0 7px; font-size:10px; letter-spacing:.1em; }
}

*{box-sizing:border-box}
html,body{margin:0}
html{scroll-behavior:smooth}
body{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  /* same deep blue used behind the photographs */
  background:#001829;
  color:var(--fg);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  -webkit-font-smoothing:antialiased;
}

/* ---- Category bar: sits below the fixed pill navbar ---- */
.gx-top{
  position:static;
  z-index:20;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: clamp(14px, 2vh, 20px);
  padding: calc(var(--dock-in) + 46px + clamp(20px, 4vh, 44px)) var(--pad) 20px;
  background: linear-gradient(to bottom, #001829 72%, rgba(0,24,41,0));
}

.gx-brand{
  align-self:flex-start;
  display:inline-flex;
  text-decoration:none;
  color:var(--fg);
  font-size:12px;
  letter-spacing:.04em;
  opacity:.85;
  transition:opacity .2s ease;
}
.gx-brand:hover{opacity:1}
.gx-brand b{font-weight:700}
.gx-brand .reg{font-weight:400}

/* Story header: the open story's name, large and spaced like the home page's
   STORIES heading; beneath it, a quiet row of all four. The open one is marked
   with the glider's yellow dot. */
.gx-title{
  margin:0;
  font-size: clamp(26px, 3.2vw, 44px);
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  line-height:1;
  color: var(--fg);
  padding-left:.14em;               /* balance the trailing letter-spacing */
}
.cat-nav{
  display:flex;
  justify-content:center;
  gap: clamp(18px, 2.6vw, 34px);
  margin: 0 0 clamp(8px, 1.5vw, 16px);
}
.cat-nav a{
  position:relative;
  padding: 4px 0 10px;
  text-decoration:none;
  font-size:10px;
  font-weight:500;
  letter-spacing:.22em;
  text-transform:uppercase;
  color: rgba(245,246,247,.34);
  transition: color .25s ease;
}
.cat-nav a::after{
  content:""; position:absolute; left:50%; bottom:0;
  width:4px; height:4px; margin-left:-2px; border-radius:50%;
  background:#ffd60a;
  opacity:0; transform: scale(.3);
  transition: opacity .25s ease, transform .35s cubic-bezier(.22,1,.36,1);
}
.cat-nav a:hover{ color: rgba(245,246,247,.8); }
.cat-nav a.active{ color: rgba(245,246,247,.9); }
.cat-nav a.active::after{ opacity:1; transform: scale(1); }

/* ---- Gallery grid ---- */
.gallery{
  flex:1 0 auto;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-content:flex-start;
  gap:var(--gap);
  padding: 8px var(--pad) clamp(48px,8vh,90px);
}

.g-card{
  flex:0 0 auto;
  /* 16:10 portrait, height capped at ~1/3 of the viewport at every screen size */
  height: min(33vh, 320px);
  aspect-ratio: 10 / 16;
  width:auto;
  border-radius:14px;
  overflow:hidden;
  position:relative;
  display:block;
  text-decoration:none;
  background:#000;                 /* letterbox fill when the photo isn't 16:10 */
  border:none;
  box-shadow: 0 12px 34px rgba(0,0,0,.28);
  transform: translateZ(0);
  transition: transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s ease;
}
.g-card:hover{ transform: translateY(-3px); box-shadow: 0 18px 44px rgba(0,0,0,.36); }

.g-media{
  position:absolute;
  inset:0;
  background-size:contain;         /* show the whole photo; black bars fill the rest */
  background-position:center;
  background-repeat:no-repeat;
}

.g-empty{
  color: rgba(245,246,247,.4);
  font-size:13px;
  letter-spacing:.06em;
  padding: 40px 0;
}

/* ---- Lightbox ---- */
.lb{
  position:fixed;
  inset:0;
  z-index:200;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: clamp(16px, 4vw, 56px);
  background: rgba(0,8,14,.92);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity:0;
  pointer-events:none;
  transition: opacity .2s ease;
}
.lb.open{ opacity:1; pointer-events:auto; }
.lb-img{
  position:relative;
  z-index:1;
  max-width: min(94vw, 1400px);
  max-height: 90vh;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 30px 90px rgba(0,0,0,.6);
  transform: scale(.98);
  transition: transform .2s ease;
}
.lb.open .lb-img{ transform: scale(1); }
.lb-close, .lb-prev, .lb-next{
  position:absolute;
  z-index:10;
  border:1px solid rgba(255,255,255,.16);
  background: rgba(10,12,15,.4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: rgba(245,246,247,.92);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  transition: background .2s ease, border-color .2s ease, transform .15s ease;
}
.lb-close:hover, .lb-prev:hover, .lb-next:hover{ background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.28); }
.lb-close:active, .lb-prev:active, .lb-next:active{ transform: scale(.94); }
.lb-close{ top: clamp(14px,3vw,28px); right: clamp(14px,3vw,28px); width:44px; height:44px; font-size:26px; line-height:1; }
.lb-prev, .lb-next{ top:50%; transform: translateY(-50%); width:52px; height:52px; font-size:30px; line-height:1; }
.lb-prev{ left: clamp(10px,2vw,28px); }
.lb-next{ right: clamp(10px,2vw,28px); }
.lb-prev:active, .lb-next:active{ transform: translateY(-50%) scale(.94); }
@media (max-width: 560px){
  .lb-prev, .lb-next{ width:42px; height:42px; font-size:24px; }
}

/* fewer per row on smaller screens (max 3) */
@media (max-width: 900px){
  .g-card{ height: min(30vh, 300px); }
}
@media (max-width: 560px){
  .g-card{ height: min(28vh, 250px); }
}

/* ---- Footer: same as the home page ---- */
.site-footer{
  background:#0b0c0f;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  flex-wrap:nowrap;
  padding: 18px var(--pad) 22px;
  border-top:1px solid rgba(255,255,255,.06);
  font-size:11px;
  letter-spacing:.08em;
  color: rgba(245,246,247,.4);
}
.foot-links{display:flex;align-items:center;gap:10px}
.foot-links a{ color: rgba(245,246,247,.5); text-decoration:none; transition: color .2s ease; }
.foot-links a:hover{color: rgba(245,246,247,.85)}
.foot-dot{color: rgba(245,246,247,.25)}
.foot-top{font-size:13px;line-height:1}

/* T&C sheet (same as the home page) */
.tnc-overlay{
  position:fixed; inset:0; z-index:120;
  display:flex; align-items:center; justify-content:center;
  padding: var(--pad);
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  opacity:0; pointer-events:none;
  transition: opacity .22s ease;
}
.tnc-overlay.open{opacity:1;pointer-events:auto}
.tnc-sheet{
  position:relative;
  width:min(560px, 100%);
  max-height: 80vh; overflow:auto;
  border-radius: 18px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(14,16,22,.82);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 30px 80px rgba(0,0,0,.55);
  padding: 26px 26px 22px;
  transform: translateY(8px);
  transition: transform .22s ease;
  scrollbar-width:none;
}
.tnc-sheet::-webkit-scrollbar{display:none}
.tnc-overlay.open .tnc-sheet{transform:translateY(0)}
.tnc-close{
  position:absolute; top:14px; right:16px;
  width:30px;height:30px;
  border:none;background:transparent;
  color: rgba(245,246,247,.5);
  font-size:22px;line-height:1;cursor:pointer;
  transition: color .2s ease;
}
.tnc-close:hover{color: rgba(245,246,247,.9)}
.tnc-title{
  margin:0 0 16px 0;
  font-size:12px; letter-spacing:.22em; text-transform:uppercase;
  font-weight:700; color: rgba(245,246,247,.82);
}
.tnc-body p{
  margin:0 0 14px 0;
  font-size:13px; line-height:1.7; letter-spacing:.01em;
  color: rgba(245,246,247,.62);
  text-wrap:pretty;
}
.tnc-body .tnc-foot{ margin-top:18px; font-size:11px; letter-spacing:.08em; color: rgba(245,246,247,.42); }

/* ---- Fish-eye strip (story pages) ---- */
.gallery.strip{
  position:relative;
  z-index:0;
  isolation:isolate;          /* card stacking stays inside the strip, so the photo viewer opens on top */
  display:block;
  flex:1 0 auto;
  min-height: 58vh;
  padding:0;
  overflow:hidden;
  touch-action: pan-y;
  user-select:none;
  -webkit-user-select:none;
  cursor:grab;
}
.gallery.strip:active{ cursor:grabbing; }
.gallery.strip .g-card{
  position:absolute;
  left:50%; top:50%;
  aspect-ratio:auto;
  border-radius:6px;
  border:none;
  box-shadow: 0 14px 40px rgba(0,0,0,.32);
  transition:none;
  will-change: transform;
  background:#0b0c0f;
}
.gallery.strip .g-card:hover{ box-shadow: 0 14px 40px rgba(0,0,0,.32); }
.gallery.strip .g-media{ background-size:cover; }
.gallery.strip .g-empty{ position:absolute; left:0; right:0; top:50%; text-align:center; transform:translateY(-50%); }

/* minimal glider: hairline + yellow circle */
.glider{
  display:flex; justify-content:center;
  padding: 4px 0 clamp(22px, 5vh, 44px);
}
.glider-track{
  position:relative;
  width: min(300px, 56vw);
  height:18px;
  cursor:pointer;
  touch-action:none;
}
.glider-track::before{
  content:""; position:absolute; left:0; right:0; top:50%;
  height:1px; background: rgba(245,246,247,.16);
}
.glider-dot{
  position:absolute; top:50%; left:0;
  width:9px; height:9px; border-radius:50%;
  background:#ffd60a;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 4px rgba(255,214,10,.12);
}