/* LOSSLESS — shared base styles. Edit once, applies everywhere. */
:root {
  --ink:          #0a0a0a;
  --body:         #3a3a3a;
  --muted:        #6a6a6a;
  --canvas:       #fffaf0;
  --surface-soft: #faf5e8;
  --surface-card: #f5f0e0;
  --hairline:     #d8d3c8;
  --navy:         #141f69;
  --cyan:         #4ec6db;
  --coral:        #ed1b33;
  --pink:         #eabed9;
  --teal:         #105e55;
  --lime:         #a6c654;
  --ochre:        #e8b94a;
  --mint:         #a4d4c5;
  --r-sm:   8px;
  --r-md:   12px;
  --r-lg:   16px;
  --r-xl:   24px;
  --r-pill: 9999px;
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html, body { background: var(--canvas); font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }

/* Category page nav */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 50; height: 120px; display: flex; align-items: center; justify-content: space-between; padding: 0 28px; }
.nav .brand { display: flex; align-items: center; }
.nav .brand img { height: 116px; width: auto; display: block; }
.nav .right { display: flex; align-items: center; gap: 12px; }

.btn-back { background: rgba(255,250,240,0.85); backdrop-filter: blur(12px); border: 1px solid rgba(0,0,0,0.12); color: var(--ink); padding: 0 16px; height: 38px; border-radius: var(--r-pill); font-size: 13px; font-weight: 500; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; transition: border-color .15s; }
.btn-back:hover { border-color: var(--ink); }
.btn-cta { background: var(--ink); color: #fff; padding: 0 20px; height: 38px; border-radius: 10px; font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; cursor: pointer; }

/* Category page chrome */
.title-overlay { position: fixed; bottom: 40px; left: 32px; z-index: 50; pointer-events: none; }
.title-overlay .num { font-size: 12px; font-weight: 600; letter-spacing: 1.8px; text-transform: uppercase; color: rgba(10,10,10,0.45); margin-bottom: 6px; }
.title-overlay h1 { font-family: "Fraunces", serif; font-weight: 500; font-size: clamp(2rem, 4vw, 3.2rem); letter-spacing: -0.04em; line-height: 1; color: var(--ink); font-variation-settings: "opsz" 144; }
.hint { position: fixed; bottom: 44px; right: 32px; z-index: 50; font-size: 12px; font-weight: 500; letter-spacing: 1.2px; text-transform: uppercase; color: rgba(10,10,10,0.35); display: flex; flex-direction: column; align-items: flex-end; gap: 4px; pointer-events: none; }
@media (max-width: 600px) { .title-overlay h1 { font-size: 1.8rem; } .hint { display: none; } }

/* Lightbox (hospitality, people) */
.lightbox { position: fixed; inset: 0; z-index: 200; background: rgba(10,10,10,0.94); display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity .28s cubic-bezier(.22,1,.36,1); }
.lightbox.open { opacity: 1; pointer-events: auto; }
.lightbox img { max-width: min(90vw,1200px); max-height: 88vh; object-fit: contain; border-radius: 10px; display: block; box-shadow: 0 40px 100px rgba(0,0,0,0.7); transition: transform .28s cubic-bezier(.22,1,.36,1); }
.lightbox:not(.open) img { transform: scale(0.96); }
.lb-close { position: absolute; top: 24px; right: 24px; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.18); background: rgba(255,255,255,0.08); color: #fff; font-size: 18px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .15s; backdrop-filter: blur(8px); }
.lb-close:hover { background: rgba(255,255,255,0.2); }
.lb-counter { position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%); font-size: 12px; font-weight: 600; letter-spacing: 1.8px; text-transform: uppercase; color: rgba(255,255,255,0.4); }

/* Base a11y */
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 2px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}