/* ═══════════════════════════════════════════════
   RICHMONDPIX.COM — DESIGN SYSTEM v2.0
   Warm Cream · Cormorant Garamond / DM Sans
═══════════════════════════════════════════════ */
:root {
  --bg:        #F8F4F0;
  --sf1:       #F1EBE4;
  --sf2:       #E9E1D8;
  --sf3:       #DDD4C8;
  --sf4:       #D8D0C8;
  --accent:    #C9472B;
  --accent-h:  #B33D25;
  --accent-bg: rgba(201,71,43,.08);
  --accent-br: rgba(201,71,43,.22);
  --t1: #1C1714;
  --t2: #6B5D56;
  --t3: #9D8D86;
  --bd:  rgba(28,23,20,.09);
  --bd2: rgba(28,23,20,.17);
  --r-sm:4px; --r-md:12px; --r-lg:20px; --r-xl:28px; --r-full:999px;
  --sh:    0 2px 12px rgba(0,0,0,.08);
  --sh-lg: 0 8px 40px rgba(0,0,0,.13);
}
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html  { scroll-behavior:smooth; }
body  { background:var(--bg); color:var(--t1); font-family:'DM Sans',system-ui,sans-serif; font-size:15px; line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
img   { display:block; max-width:100%; }
a     { text-decoration:none; color:inherit; }
button{ font-family:inherit; cursor:pointer; }

/* TYPOGRAPHY */
.serif    { font-family:'Cormorant Garamond',Georgia,serif; }
.t-display{ font-family:'Cormorant Garamond',serif; font-size:clamp(3.5rem,8vw,6.5rem); font-weight:600; line-height:.9; letter-spacing:-.02em; }
.t-h1     { font-family:'Cormorant Garamond',serif; font-size:clamp(2rem,4vw,3.5rem); font-weight:600; line-height:1.05; }
.t-h2     { font-family:'Cormorant Garamond',serif; font-size:2.25rem; font-weight:600; line-height:1.1; }
.t-h3     { font-size:1.15rem; font-weight:600; line-height:1.3; }
.t-label  { font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; font-weight:600; }
.t-muted  { color:var(--t2); }
.t-accent { color:var(--accent); }

/* LAYOUT */
.container { max-width:1360px; margin:0 auto; padding:0 40px; }
.section   { padding:80px 0; }
.section-sm{ padding:48px 0; }
.page      { min-height:100vh; padding-top:68px; }
.page-hero { padding-top:0; }
.grid-2    { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.grid-3    { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.grid-4    { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.grid-sidebar { display:grid; grid-template-columns:260px 1fr; gap:28px; }

/* ── NAV ──────────────────────────────────────── */
.nav            { position:fixed; top:0; left:0; right:0; z-index:200; height:68px; display:flex; align-items:center; padding:0 40px; gap:8px; transition:background .3s,border-color .3s,backdrop-filter .3s; }
.nav-solid      { background:rgba(248,244,240,.96); backdrop-filter:blur(24px) saturate(1.5); border-bottom:1px solid var(--bd); }
.nav-transparent{ background:transparent; }
.nav-logo       { font-family:'Cormorant Garamond',serif; font-size:1.55rem; font-weight:700; letter-spacing:-.01em; flex-shrink:0; cursor:pointer; color:var(--t1); }
.nav-logo em    { font-style:normal; color:var(--accent); }
.nav-links      { display:flex; align-items:center; gap:2px; margin:0 20px; flex:1; }
.nav-link       { padding:6px 11px; border-radius:6px; font-size:13px; color:var(--t2); background:none; border:none; transition:all .15s; white-space:nowrap; }
.nav-link:hover,.nav-link.active { color:var(--t1); background:var(--sf2); }
.nav-right      { display:flex; align-items:center; gap:10px; margin-left:auto; flex-shrink:0; }
.nav-icon-btn   { width:34px; height:34px; border-radius:50%; background:var(--sf2); color:var(--t2); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:all .2s; flex-shrink:0; border:none; }
.nav-icon-btn:hover { background:var(--sf3); }
.nav-avatar     { width:34px; height:34px; border-radius:50%; object-fit:cover; border:2px solid var(--bd2); cursor:pointer; }
.nav-hamburger  { display:none; background:none; border:none; color:var(--t1); padding:4px; }

/* Nav dark mode (transparent nav over dark hero) */
.nav.nav-transparent .nav-logo { color:#fff; }
.nav.nav-transparent .nav-link { color:rgba(255,255,255,.75); }
.nav.nav-transparent .nav-link:hover,
.nav.nav-transparent .nav-link.active { color:#fff; background:rgba(255,255,255,.15); }
.nav.nav-transparent .nav-icon-btn { background:rgba(255,255,255,.15); color:#fff; }
.nav.nav-transparent .nav-avatar { border-color:rgba(255,255,255,.3); }
/* When mobile menu is open, reset to light colors */
.nav.nav-transparent .nav-links.open .nav-link { color:var(--t2); }
.nav.nav-transparent .nav-links.open .nav-link.active { color:var(--t1); background:var(--sf2); }

/* ── BUTTONS ──────────────────────────────────── */
.btn         { display:inline-flex; align-items:center; gap:7px; padding:10px 20px; border-radius:var(--r-full); font-size:14px; font-weight:500; border:none; cursor:pointer; transition:all .2s; font-family:inherit; text-decoration:none; line-height:1; }
.btn-primary { background:var(--accent); color:#fff; box-shadow:0 4px 16px rgba(201,71,43,.3); }
.btn-primary:hover { background:var(--accent-h); transform:translateY(-1px); box-shadow:0 6px 24px rgba(201,71,43,.45); }
.btn-ghost   { background:transparent; color:var(--t1); border:1.5px solid var(--bd2); }
.btn-ghost:hover { border-color:var(--t2); background:var(--sf2); }
.btn-surface { background:var(--sf2); color:var(--t1); border:1px solid var(--bd); }
.btn-surface:hover { background:var(--sf3); }
.btn-ghost-dark { background:rgba(255,255,255,.1); color:#fff; border:1.5px solid rgba(255,255,255,.45); backdrop-filter:blur(8px); }
.btn-ghost-dark:hover { background:rgba(255,255,255,.18); }
.btn-danger  { background:rgba(201,71,43,.15); color:var(--accent); border:1px solid var(--accent-br); }
.btn-danger:hover { background:var(--accent); color:#fff; }
.btn-sm  { padding:7px 15px; font-size:13px; }
.btn-lg  { padding:14px 30px; font-size:15px; }
.icon-btn{ width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,.16); backdrop-filter:blur(8px); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:all .2s; border:none; color:#fff; flex-shrink:0; }
.icon-btn:hover { background:var(--accent); }
.icon-btn.liked { background:var(--accent); }
.icon-btn-lg { width:44px; height:44px; }

/* ── CARDS ────────────────────────────────────── */
.card       { background:var(--sf1); border-radius:var(--r-md); border:1px solid var(--bd); overflow:hidden; transition:all .25s; }
.card:hover { transform:translateY(-3px); box-shadow:var(--sh-lg); border-color:var(--bd2); }

/* ── PHOTO CARDS ──────────────────────────────── */
.photo-card         { break-inside:avoid; border-radius:var(--r-md); overflow:hidden; position:relative; cursor:pointer; display:block; background:var(--sf2); margin-bottom:12px; }
.photo-card img     { width:100%; display:block; transition:transform .5s ease; }
.photo-card:hover img { transform:scale(1.04); }
.photo-card-overlay { position:absolute; inset:0; background:linear-gradient(to top,rgba(0,0,0,.83) 35%,transparent 62%); opacity:0; transition:opacity .3s; display:flex; flex-direction:column; justify-content:flex-end; padding:14px; }
.photo-card:hover .photo-card-overlay { opacity:1; }
.photo-card-actions { display:flex; gap:6px; margin-bottom:8px; }
.photo-card-action  { display:flex; align-items:center; gap:4px; padding:5px 9px; border-radius:var(--r-full); background:rgba(255,255,255,.16); backdrop-filter:blur(8px); color:#fff; font-size:10px; font-weight:500; }
.photo-card-title   { font-size:.82rem; font-weight:500; color:#fff; line-height:1.3; }
.photo-card-meta    { display:flex; align-items:center; gap:8px; margin-top:2px; font-size:.7rem; color:rgba(255,255,255,.65); }

/* ── MASONRY ──────────────────────────────────── */
.masonry   { columns:3; column-gap:12px; }
.masonry-4 { columns:4; }
.masonry-2 { columns:2; }

/* ── HERO ─────────────────────────────────────── */
.hero         { position:relative; height:800px; overflow:hidden; background:#080807; }
.hero.page-hero { padding-top:0; }
.hero-slide   { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity 1.2s ease-in-out; }
.hero-slide-active { opacity:1; }
.hero > img   { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hero-overlay { position:absolute; inset:0; background:linear-gradient(to bottom,rgba(0,0,0,.52) 0%,rgba(0,0,0,.22) 40%,rgba(0,0,0,.78) 100%); z-index:2; }
.hero-overlay-btm { position:absolute; bottom:0; left:0; right:0; height:30%; background:linear-gradient(to top,rgba(8,8,7,.92),transparent); z-index:3; }
.hero-content { position:absolute; inset:0; z-index:4; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:0 24px; }
.hero-stats   { display:flex; gap:56px; justify-content:center; margin-top:52px; padding-top:32px; border-top:1px solid rgba(255,255,255,.12); }
.hero-stat-num{ font-family:'Cormorant Garamond',serif; font-size:2.6rem; font-weight:600; color:#fff; line-height:1; }
.hero-stat-lbl{ font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.5); margin-top:3px; }

/* ── LIGHTBOX ─────────────────────────────────── */
.lightbox-overlay { display:none; position:fixed; inset:0; z-index:9000; background:rgba(10,9,8,.95); align-items:center; justify-content:center; flex-direction:column; padding:20px; }
.lightbox-overlay.open { display:flex; }
.lightbox-img  { max-width:min(90vw,900px); max-height:72vh; object-fit:contain; border-radius:6px; box-shadow:0 12px 60px rgba(0,0,0,.6); display:block; }
.lightbox-panel {
  width:min(90vw,900px); background:rgba(28,23,20,.85); backdrop-filter:blur(12px);
  border-radius:0 0 10px 10px; padding:14px 20px;
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  border-top:1px solid rgba(255,255,255,.08);
}
.lightbox-panel-left  { flex:1; min-width:0; }
.lightbox-panel-right { flex-shrink:0; display:flex; gap:8px; align-items:center; }
.lightbox-title { color:#fff; font-family:'Cormorant Garamond',serif; font-size:1.1rem; font-weight:600; line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lightbox-meta  { display:flex; gap:12px; margin-top:4px; flex-wrap:wrap; }
.lightbox-meta span { font-size:.75rem; color:rgba(255,255,255,.55); display:flex; align-items:center; gap:4px; }
.lightbox-close { position:absolute; top:16px; right:20px; background:rgba(255,255,255,.1); border:none; cursor:pointer; color:rgba(255,255,255,.7); padding:6px; border-radius:50%; width:36px; height:36px; display:flex; align-items:center; justify-content:center; transition:background .2s; }
.lightbox-close:hover { background:rgba(255,255,255,.2); color:#fff; }
.lightbox-prev,.lightbox-next { position:absolute; top:calc(50% - 30px); transform:translateY(-50%); background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12); color:#fff; width:44px; height:44px; border-radius:50%; cursor:pointer; font-size:1.1rem; display:flex; align-items:center; justify-content:center; transition:background .2s; }
.lightbox-prev { left:12px; }
.lightbox-next { right:12px; }
.lightbox-prev:hover,.lightbox-next:hover { background:rgba(255,255,255,.18); }
@media (max-width:600px) {
  .lightbox-img { max-height:58vh; }
  .lightbox-panel { padding:10px 14px; border-radius:0 0 8px 8px; }
  .lightbox-panel-right .btn { display:none; }
}

/* ── BADGE ────────────────────────────────────── */
.badge        { display:inline-flex; align-items:center; gap:4px; padding:4px 12px; border-radius:var(--r-full); font-size:.72rem; font-weight:600; letter-spacing:.04em; }
.badge-accent { background:var(--accent-bg); color:var(--accent); border:1px solid var(--accent-br); }
.badge-muted  { background:var(--sf2); color:var(--t2); border:1px solid var(--bd); }
.badge-green  { background:rgba(40,120,70,.1); color:#1e7a42; border:1px solid rgba(40,120,70,.2); }
.badge-yellow { background:rgba(180,130,30,.12); color:#9a7010; border:1px solid rgba(180,130,30,.2); }
.badge-red    { background:var(--accent-bg); color:var(--accent); border:1px solid var(--accent-br); }

/* ── PILLS & CAT STRIP ────────────────────────── */
.pill       { display:inline-flex; align-items:center; padding:7px 14px; border-radius:var(--r-full); background:var(--sf2); border:1px solid var(--bd); cursor:pointer; transition:all .18s; font-size:12.5px; color:var(--t2); white-space:nowrap; font-family:inherit; font-weight:400; }
.pill:hover { color:var(--t1); border-color:var(--bd2); background:var(--sf3); }
.pill.active{ background:var(--accent); color:#fff; border-color:var(--accent); }
.cat-strip  { display:flex; gap:8px; overflow-x:auto; padding:4px 0 12px; scrollbar-width:none; }
.cat-strip::-webkit-scrollbar { display:none; }

/* ── SECTION HEADER ───────────────────────────── */
.sec-hdr   { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:28px; gap:16px; }
.sec-title { font-family:'Cormorant Garamond',serif; font-size:2.2rem; font-weight:600; line-height:1; color:var(--t1); }
.sec-sub   { color:var(--t2); font-size:.9rem; margin-top:6px; }
.sec-action{ display:flex; align-items:center; gap:5px; padding:8px 16px; border:1.5px solid var(--bd2); border-radius:var(--r-full); font-size:13px; color:var(--t1); cursor:pointer; white-space:nowrap; transition:all .15s; }
.sec-action:hover { border-color:var(--t2); background:var(--sf2); }

/* ── SPOT CARD ────────────────────────────────── */
.spot-card       { background:var(--sf1); border-radius:16px; overflow:hidden; border:1px solid var(--bd); transition:all .25s; cursor:pointer; }
.spot-card:hover { transform:translateY(-4px); box-shadow:var(--sh-lg); }
.spot-card-img   { width:100%; height:196px; object-fit:cover; display:block; }
.spot-card-body  { padding:14px 16px 16px; }
.spot-card-cat   { font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); font-weight:600; margin-bottom:4px; }
.spot-card-title { font-size:1rem; font-weight:600; margin-bottom:5px; color:var(--t1); }
.spot-card-desc  { font-size:.8rem; color:var(--t2); line-height:1.5; margin-bottom:10px; }
.spot-card-meta  { display:flex; gap:10px; font-size:.75rem; color:var(--t2); }
/* Compact spot item (horizontal) */
.spot-mini       { display:flex; gap:10px; padding:10px 12px; background:var(--bg); border:1px solid var(--bd); border-radius:var(--r-md); cursor:pointer; align-items:center; transition:all .2s; }
.spot-mini:hover { border-color:var(--bd2); background:var(--sf2); }
.spot-mini-img   { width:48px; height:48px; border-radius:8px; object-fit:cover; flex-shrink:0; }
.spot-mini-cat   { font-size:10px; color:var(--accent); font-weight:600; letter-spacing:.08em; text-transform:uppercase; }
.spot-mini-name  { font-size:.875rem; font-weight:600; color:var(--t1); margin-top:1px; }
.spot-mini-rating{ font-size:.72rem; color:var(--t2); margin-top:1px; }

/* ── USER CARD ────────────────────────────────── */
.user-card        { display:flex; flex-direction:column; align-items:center; gap:8px; padding:24px 16px 20px; background:var(--sf1); border-radius:20px; border:1px solid var(--bd); transition:all .25s; cursor:pointer; min-width:158px; position:relative; overflow:hidden; }
.user-card::before{ content:''; position:absolute; top:0; left:0; right:0; height:72px; background:linear-gradient(to bottom,var(--sf2),var(--sf1)); pointer-events:none; }
.user-card:hover  { border-color:rgba(201,71,43,.35); transform:translateY(-3px); box-shadow:0 8px 32px rgba(0,0,0,.12); }
.user-card > *    { position:relative; z-index:1; }
.user-card-avatar { width:64px; height:64px; border-radius:50%; object-fit:cover; border:3px solid var(--bg); box-shadow:0 0 0 2px var(--accent); }
.user-card-name   { font-size:.875rem; font-weight:600; text-align:center; color:var(--t1); }
.user-card-stat   { font-size:.72rem; color:var(--t2); text-align:center; }

/* ── EDITORIAL STRIP ──────────────────────────── */
.editorial-strip      { border-radius:20px; overflow:hidden; display:grid; grid-template-columns:repeat(3,1fr); border:1px solid var(--bd); }
.editorial-item       { position:relative; height:360px; overflow:hidden; cursor:pointer; }
.editorial-item img   { width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s; }
.editorial-item:hover img { transform:scale(1.05); }
.editorial-item-ov    { position:absolute; inset:0; background:linear-gradient(to top,rgba(0,0,0,.85) 40%,transparent 70%); }
.editorial-item-body  { position:absolute; bottom:0; left:0; right:0; padding:24px; }
.editorial-item-cat   { font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); font-weight:600; margin-bottom:6px; }
.editorial-item-title { font-family:'Cormorant Garamond',serif; font-size:1.4rem; font-weight:600; color:#fff; line-height:1.1; margin-bottom:7px; }
.editorial-item-desc  { font-size:.8rem; color:rgba(255,255,255,.65); line-height:1.5; }

/* ── SCROLL ROW ───────────────────────────────── */
.scroll-row { display:flex; gap:14px; overflow-x:auto; padding-bottom:6px; scrollbar-width:none; }
.scroll-row::-webkit-scrollbar { display:none; }

/* ── FILTER SIDEBAR ───────────────────────────── */
.filter-sidebar    { background:var(--sf1); border-radius:var(--r-lg); border:1px solid var(--bd); padding:20px; position:sticky; top:88px; }
.filter-group      { margin-bottom:24px; }
.filter-group:last-child { margin-bottom:0; }
.filter-group-title{ font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--t3); font-weight:600; margin-bottom:10px; }
.filter-opt        { display:flex; align-items:center; gap:10px; padding:7px 8px; border-radius:8px; cursor:pointer; margin-bottom:2px; transition:background .15s; }
.filter-opt:hover  { background:var(--sf2); }
.filter-check      { width:18px; height:18px; border-radius:4px; border:1.5px solid var(--bd2); display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:all .15s; }
.filter-check.on   { background:var(--accent); border-color:var(--accent); }
.filter-label      { font-size:.875rem; color:var(--t2); }

/* ── TABS ─────────────────────────────────────── */
.tabs    { display:flex; gap:0; border-bottom:1px solid var(--bd); }
.tab-btn { padding:10px 18px; background:none; border:none; color:var(--t2); font-size:.875rem; font-family:inherit; cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1px; transition:all .15s; white-space:nowrap; }
.tab-btn:hover  { color:var(--t1); }
.tab-btn.active { color:var(--t1); border-bottom-color:var(--accent); font-weight:500; }

/* ── FORMS ────────────────────────────────────── */
.input       { width:100%; padding:11px 14px; background:var(--sf1); border:1.5px solid var(--bd2); border-radius:var(--r-md); color:var(--t1); font-family:inherit; font-size:.9rem; transition:border-color .15s; outline:none; resize:vertical; }
.input:focus { border-color:var(--accent); }
.input::placeholder { color:var(--t3); }
.label       { display:block; font-size:.7rem; font-weight:600; color:var(--t2); margin-bottom:7px; letter-spacing:.08em; text-transform:uppercase; }
.input-group { margin-bottom:20px; }
.search-bar  { display:flex; align-items:center; gap:12px; background:var(--bg); border:2px solid var(--bd2); border-radius:var(--r-full); padding:12px 20px; transition:border-color .15s; box-shadow:0 4px 20px rgba(0,0,0,.08); }
.search-bar:focus-within { border-color:var(--accent); }
.search-input { flex:1; background:none; border:none; outline:none; color:var(--t1); font-family:inherit; font-size:.95rem; }
.search-input::placeholder { color:var(--t3); }
select.input { appearance:none; background-image:url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%239D8D86' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; padding-right:36px; cursor:pointer; }

/* ── UPLOAD ───────────────────────────────────── */
.dropzone { position:relative; overflow:hidden; border:2px dashed var(--bd2); border-radius:var(--r-xl); padding:60px 40px; display:flex; flex-direction:column; align-items:center; gap:16px; text-align:center; transition:all .2s; cursor:pointer; background:var(--sf1); }
.dropzone:hover { border-color:var(--accent); background:var(--accent-bg); }
.upload-step-indicator { width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:600; transition:all .2s; }

/* ── COMMENTS ─────────────────────────────────── */
.comment        { display:flex; gap:12px; padding:14px 0; border-bottom:1px solid var(--bd); }
.comment-avatar { width:36px; height:36px; border-radius:50%; object-fit:cover; flex-shrink:0; }
.comment-body   { flex:1; background:var(--sf1); border-radius:12px; padding:8px 12px; }
.comment-author { font-size:.875rem; font-weight:600; margin-bottom:3px; color:var(--t1); }
.comment-text   { font-size:.875rem; color:var(--t2); line-height:1.6; }
.comment-meta   { display:flex; gap:12px; margin-top:6px; font-size:.72rem; color:var(--t3); }
.comment-meta span { cursor:pointer; }
.comment-meta span:hover { color:var(--t1); }

/* ── PROFILE ──────────────────────────────────── */
.profile-cover        { position:relative; height:320px; overflow:hidden; }
.profile-cover img    { width:100%; height:100%; object-fit:cover; }
.profile-cover-ov     { position:absolute; inset:0; background:linear-gradient(to top,var(--bg) 0%,rgba(248,244,240,.15) 60%); }
.profile-avatar-wrap  { position:absolute; bottom:-44px; left:48px; }
.profile-avatar       { width:100px; height:100px; border-radius:50%; object-fit:cover; border:3px solid var(--bg); }

/* ── PHOTO INFO ROWS (detail page) ───────────── */
.photo-info-row   { display:flex; align-items:flex-start; gap:10px; padding:9px 0; border-bottom:1px solid var(--bd); font-size:.875rem; color:var(--t2); }
.photo-info-row:last-child { border-bottom:none; }
.photo-info-icon  { width:20px; flex-shrink:0; display:flex; align-items:center; justify-content:center; color:var(--t3); margin-top:1px; }

/* ── RESULT CARD ──────────────────────────────── */
.result-card  { display:flex; gap:14px; padding:14px; background:var(--sf1); border-radius:var(--r-md); border:1px solid var(--bd); transition:all .2s; }
.result-card:hover { border-color:var(--bd2); transform:translateY(-1px); }
.result-thumb { width:72px; height:72px; border-radius:var(--r-md); object-fit:cover; flex-shrink:0; }
.result-body  { flex:1; min-width:0; }
.result-title { font-size:.95rem; font-weight:600; margin-bottom:4px; color:var(--t1); }
.result-meta  { font-size:.8rem; color:var(--t2); line-height:1.5; }

/* ── PAGINATION ───────────────────────────────── */
.pagination { display:flex; gap:6px; justify-content:center; flex-wrap:wrap; margin-top:40px; }
.page-btn   { min-width:36px; height:36px; display:flex; align-items:center; justify-content:center; border-radius:8px; background:var(--sf2); color:var(--t2); border:1px solid var(--bd); font-size:13px; cursor:pointer; transition:all .15s; }
.page-btn:hover { background:var(--sf3); color:var(--t1); }
.page-btn.active { background:var(--accent); color:#fff; border-color:var(--accent); }

/* ── PHOTO DETAIL ─────────────────────────────── */
.photo-detail-img  { width:100%; border-radius:16px; display:block; cursor:zoom-in; }
.photo-info-panel  { background:var(--sf1); border-radius:16px; border:1px solid var(--bd); padding:24px; position:sticky; top:88px; }

/* Photo detail 4-column grid layout */
.pdc-grid {
  display:grid;
  grid-template-columns: 1fr 360px;
  grid-template-areas:
    "image  sidebar"
    "actions sidebar"
    "comments sidebar";
  grid-template-rows: auto auto 1fr;
  gap: 0 28px;
  align-items:start;
}
.pdc-image    { grid-area:image; }
.pdc-actions  { grid-area:actions; }
.pdc-sidebar  { grid-area:sidebar; }
.pdc-comments { grid-area:comments; padding-top:28px; }

/* Action bar */
.pdc-actions {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border:1px solid var(--bd);
  border-radius:12px;
  margin:16px 0 0;
  overflow:hidden;
  background:var(--sf1);
}
.pdc-action-btn {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:5px;
  padding:14px 8px;
  font-size:.78rem;
  font-weight:500;
  color:var(--t2);
  background:none;
  border:none;
  border-right:1px solid var(--bd);
  cursor:pointer;
  text-decoration:none;
  transition:background .15s, color .15s;
  font-family:inherit;
}
.pdc-action-btn:last-child { border-right:none; }
.pdc-action-btn:hover { background:var(--sf2); color:var(--t1); }
.pdc-action-btn.active svg { fill:var(--accent); }
.pdc-action-btn.active { color:var(--accent); }
.pdc-action-views { cursor:default; }
.pdc-action-views:hover { background:none; color:var(--t2); }
.pdc-action-lbl { font-size:.7rem; }

/* Photographer card inside info panel */
.pdc-photographer {
  display:flex;
  align-items:center;
  gap:12px;
  padding-bottom:16px;
  border-bottom:1px solid var(--bd);
  margin-bottom:4px;
  flex-wrap:wrap;
}

/* Info grid (2-col, inside sidebar) */
.pdc-info-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:16px;
}
.pdc-info-box {
  background:var(--sf2);
  border-radius:10px;
  padding:12px;
}
.pdc-info-label {
  font-size:.65rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--t3);
  margin-bottom:4px;
}
.pdc-info-val {
  font-size:.82rem;
  color:var(--t1);
  font-weight:500;
  line-height:1.3;
}
.photo-stat-grid   { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:20px; }
.photo-stat-box    { text-align:center; padding:12px 8px; background:var(--sf2); border-radius:10px; }
.photo-stat-val    { font-family:'Cormorant Garamond',serif; font-size:1.5rem; font-weight:600; color:var(--t1); line-height:1; }
.photo-stat-lbl    { font-size:.68rem; color:var(--t2); margin-top:2px; }
.photo-meta-row    { display:flex; justify-content:space-between; padding:7px 0; border-bottom:1px solid var(--bd); font-size:.8rem; }
.photo-meta-row:last-child { border-bottom:none; }
.photo-meta-key    { color:var(--t3); font-weight:500; }
.photo-meta-val    { color:var(--t2); text-align:right; }

/* ── MAP ──────────────────────────────────────── */
.map-mock     { position:relative; border-radius:var(--r-xl); overflow:hidden; min-height:480px; }
.map-pin      { position:absolute; transform:translate(-50%,-100%); cursor:pointer; display:flex; flex-direction:column; align-items:center; z-index:10; }
.map-pin-dot  { width:24px; height:24px; background:var(--accent); border-radius:50% 50% 50% 0; transform:rotate(-45deg); display:flex; align-items:center; justify-content:center; box-shadow:0 2px 8px rgba(0,0,0,.4); transition:transform .2s; }
.map-pin:hover .map-pin-dot { transform:rotate(-45deg) scale(1.2); }
.map-pin-label{ font-size:10px; font-weight:600; background:var(--sf1); color:var(--t1); padding:2px 6px; border-radius:4px; white-space:nowrap; box-shadow:var(--sh); margin-top:4px; opacity:0; transition:opacity .2s; }
.map-pin:hover .map-pin-label { opacity:1; }

/* ── FEATURE STRIP ────────────────────────────── */
.feature-strip     { background:var(--sf1); border:1px solid var(--bd); border-radius:var(--r-xl); padding:48px; display:flex; gap:48px; align-items:center; }
.feature-strip-img { width:320px; flex-shrink:0; border-radius:var(--r-lg); overflow:hidden; }

/* ── ABOUT PAGE ───────────────────────────────── */
.about-hero     { position:relative; height:500px; overflow:hidden; background:#080807; }
.about-hero img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.about-stat-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.stat-num       { font-family:'Cormorant Garamond',serif; font-size:2.8rem; font-weight:600; color:var(--t1); line-height:1; }
.stat-lbl       { font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--t2); margin-top:4px; }
.value-card     { padding:28px; background:var(--bg); border-radius:16px; border:1px solid var(--bd); text-align:center; }
.value-icon     { width:52px; height:52px; border-radius:50%; background:var(--accent-bg); border:1px solid var(--accent-br); display:flex; align-items:center; justify-content:center; font-size:22px; margin:0 auto 18px; }

/* ── BLOG & ARTICLES ──────────────────────────── */
.article-card { background:var(--sf1); border-radius:var(--r-lg); border:1px solid var(--bd); overflow:hidden; transition:all .25s; }
.article-card:hover { transform:translateY(-3px); box-shadow:var(--sh-lg); }
.article-card-img { width:100%; height:200px; object-fit:cover; display:block; }
.article-card-body{ padding:20px; }
.article-cat  { font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); font-weight:600; margin-bottom:8px; }
.article-title{ font-family:'Cormorant Garamond',serif; font-size:1.35rem; font-weight:600; line-height:1.2; margin-bottom:8px; }
.article-excerpt { font-size:.85rem; color:var(--t2); line-height:1.6; margin-bottom:12px; }
.article-meta { font-size:.75rem; color:var(--t3); }

/* ── EVENTS ───────────────────────────────────── */
.event-card     { display:flex; gap:16px; padding:16px; background:var(--sf1); border-radius:var(--r-lg); border:1px solid var(--bd); transition:all .2s; }
.event-card:hover { border-color:var(--bd2); transform:translateY(-2px); }
.event-date-box { display:flex; flex-direction:column; align-items:center; justify-content:center; width:56px; flex-shrink:0; background:var(--sf2); border-radius:var(--r-md); padding:8px 4px; }
.event-date-day { font-family:'Cormorant Garamond',serif; font-size:1.6rem; font-weight:700; line-height:1; color:var(--t1); }
.event-date-mon { font-size:.65rem; letter-spacing:.1em; text-transform:uppercase; color:var(--t3); }

/* ── ADMIN ────────────────────────────────────── */
.admin-stat     { background:var(--sf1); border-radius:var(--r-lg); border:1px solid var(--bd); padding:24px; }
.admin-stat-val { font-family:'Cormorant Garamond',serif; font-size:3rem; font-weight:600; color:var(--t1); line-height:1; }
.admin-stat-lbl { font-size:.8rem; color:var(--t2); margin-top:6px; }
.admin-stat-delta { font-size:.75rem; color:var(--t3); margin-top:8px; display:flex; align-items:center; gap:4px; }
.table       { width:100%; border-collapse:collapse; font-size:.875rem; }
.table thead { background:var(--sf2); }
.table th    { padding:10px 14px; text-align:left; font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; color:var(--t3); font-weight:600; }
.table td    { padding:12px 14px; border-bottom:1px solid var(--bd); color:var(--t2); vertical-align:middle; }
.table tbody tr:hover td { background:var(--sf2); }

/* ── FOOTER ───────────────────────────────────── */
.footer          { background:var(--bg); border-top:1px solid var(--bd); padding:48px 0 32px; }
.footer-grid     { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:40px; margin-bottom:28px; }
.footer-logo     { font-family:'Cormorant Garamond',serif; font-size:1.8rem; font-weight:700; color:var(--t1); margin-bottom:10px; }
.footer-logo em  { font-style:normal; color:var(--accent); }
.footer-desc     { font-size:.875rem; color:var(--t2); line-height:1.7; max-width:240px; }
.footer-socials  { display:flex; gap:8px; margin-top:16px; }
.footer-social   { display:inline-flex; align-items:center; justify-content:center; padding:4px; background:none; border:none; font-size:11px; color:var(--t2); cursor:pointer; transition:color .15s; }
.footer-social:hover { color:var(--t1); }
.footer-col-title{ font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; font-weight:600; color:var(--t3); margin-bottom:14px; }
.footer-link     { display:block; font-size:.875rem; color:var(--t2); margin-bottom:9px; cursor:pointer; transition:color .15s; }
.footer-link:hover{ color:var(--t1); }
.footer-bottom   { display:flex; justify-content:space-between; padding-top:20px; border-top:1px solid var(--bd); font-size:.8rem; color:var(--t3); flex-wrap:wrap; gap:12px; }

/* ── FLASH ────────────────────────────────────── */
.flash        { padding:14px 20px; border-radius:var(--r-md); font-size:.875rem; margin-bottom:20px; display:flex; align-items:center; gap:10px; }
.flash-success{ background:rgba(40,120,70,.1); color:#1e7a42; border:1px solid rgba(40,120,70,.2); }
.flash-error  { background:rgba(201,71,43,.12); color:var(--accent); border:1px solid var(--accent-br); }
.flash-info   { background:rgba(100,149,237,.1); color:#5a85d6; border:1px solid rgba(100,149,237,.22); }

/* ── DIVIDERS & TAGS ──────────────────────────── */
.divider { height:1px; background:var(--bd); }
.tag     { display:inline-block; padding:4px 11px; border-radius:var(--r-full); background:var(--sf2); border:1px solid var(--bd); font-size:.75rem; color:var(--t2); cursor:pointer; transition:all .15s; }
.tag:hover { border-color:var(--bd2); color:var(--t1); }

/* ── MOBILE BOTTOM TAB BAR ────────────────────── */
.tab-bar { display:none; }

/* ══════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════ */
@media (max-width:1024px) {
  .container    { padding:0 28px; }
  .grid-4       { grid-template-columns:repeat(2,1fr); }
  .footer-grid  { grid-template-columns:1fr 1fr; gap:28px; }
  .about-stat-grid { grid-template-columns:repeat(2,1fr); }
  .editorial-strip { grid-template-columns:1fr 1fr; }
  .editorial-item:last-child { display:none; }
}

@media (max-width:768px) {
  /* Layout */
  .container    { padding:0 20px !important; }
  .section      { padding:40px 0; }
  .section-sm   { padding:24px 0; }
  /* Nav */
  .nav          { padding:0 16px; }
  .nav-links    { display:none; }
  .nav-hamburger{ display:flex; }
  .nav.nav-transparent .nav-hamburger { color:#fff; }
  .nav-links.open { display:flex; flex-direction:column; position:fixed; top:68px; left:0; right:0; background:rgba(248,244,240,.98); backdrop-filter:blur(24px); padding:16px; gap:4px; border-bottom:1px solid var(--bd); z-index:190; }
  .nav-right .btn-ghost { display:none; }
  /* Hero */
  .hero-desc    { display:none !important; }
  .hero         { height:560px; }
  .about-hero   { height:280px; }
  .hero-content { padding-top:108px; }
  .hero-content .badge     { margin-bottom:12px !important; }
  .hero-content .t-display { margin-bottom:22px !important; }
  .hero-content > p        { margin-bottom:20px !important; font-size:1rem !important; }
  .hero-stats   { gap:20px; margin-top:24px; padding-top:18px; }
  .hero-stat-num{ font-size:1.9rem; }
  /* Cat strip — let pills scroll edge-to-edge past container padding */
  .cat-strip    { margin:0 -20px; padding:4px 20px 12px; }
  /* Hero CTA buttons */
  .hero-btns    { gap:10px !important; }
  .hero-btns .btn-lg { padding:11px 22px; font-size:14px; }
  /* Typography */
  .t-display    { font-size:clamp(2rem,8vw,3.5rem); }
  .sec-title    { font-size:1.8rem; }
  .sec-hdr      { flex-wrap:wrap; }
  /* Grids */
  .masonry      { columns:2; }
  .masonry-4    { columns:2; }
  .masonry-2    { columns:1; }
  .grid-3       { grid-template-columns:1fr 1fr; }
  .grid-2       { grid-template-columns:1fr; }
  .grid-sidebar { grid-template-columns:1fr; }
  .footer-grid  { grid-template-columns:1fr 1fr; gap:24px; }
  .about-stat-grid { grid-template-columns:repeat(2,1fr); }
  /* Components */
  .profile-avatar-wrap { left:20px; }
  .profile-avatar { width:80px; height:80px; }
  .feature-strip{ flex-direction:column; }
  .feature-strip-img { width:100%; }
  .editorial-strip { grid-template-columns:1fr; }
  .editorial-item:last-child { display:block; }
  .editorial-item { height:260px; }
  /* About page — passion-project banner: more breathing room on mobile */
  .passion-banner { padding-top:36px !important; padding-bottom:36px !important; }
  /* About page — don't crop Carytown image on mobile */
  .origin-photo-wrap { min-height:220px !important; }
  .origin-photo-wrap img { object-fit:contain !important; min-height:220px !important; }
  /* Photo detail page mobile */
  .pdc-grid { display:flex; flex-direction:column; gap:0; }
  .pdc-image { order:1; }
  .pdc-actions { order:2; }
  .pdc-sidebar { order:3; }
  .pdc-comments { order:4; }
  .pdc-sidebar .photo-info-panel { position:static !important; border-radius:12px; padding:18px; margin-top:16px; }
  .photo-detail-img { border-radius:10px; }
  /* Mobile tab bar */
  .tab-bar { display:flex; position:fixed; bottom:0; left:0; right:0; background:rgba(248,244,240,.98); backdrop-filter:blur(24px); border-top:1px solid var(--bd); padding:10px 0 8px; justify-content:space-around; z-index:100; }
  .tab-bar-item { display:flex; flex-direction:column; align-items:center; gap:3px; cursor:pointer; color:var(--t3); }
  .tab-bar-item.active { color:var(--accent); }
  .tab-bar-lbl  { font-size:9px; letter-spacing:.04em; }
  body { padding-bottom:68px; }
}

@media (max-width:480px) {
  /* Hero — tighter spacing, flex-start so content doesn't hide behind nav */
  .hero         { height:520px; }
  .hero-content { padding-top:120px; justify-content:flex-start; }
  .hero-content > p { font-size:.95rem !important; }
  .hero-stats   { flex-direction:row; flex-wrap:wrap; gap:14px; justify-content:center;
                  margin-top:18px !important; padding-top:14px !important; }
  .hero-stat-num { font-size:1.6rem; }
  .hero-stat-lbl { font-size:.6rem; }
  .t-display    { font-size:clamp(1.8rem,8.5vw,2.6rem); }
  /* Buttons */
  .btn-lg       { padding:11px 20px; font-size:13.5px; }
  /* Grids */
  .masonry      { columns:1; }
  .masonry-4    { columns:1; }
  .grid-3       { grid-template-columns:1fr; }
  .grid-4       { grid-template-columns:1fr; }
  .footer-grid  { grid-template-columns:1fr; }
  .about-stat-grid { grid-template-columns:1fr 1fr; }
  /* Sections */
  .section      { padding:32px 0; }
  .section-sm   { padding:20px 0; }
  /* Navigation stacking */
  .sec-hdr      { flex-direction:column; align-items:flex-start; }
  .tabs         { overflow-x:auto; scrollbar-width:none; }
  .tabs::-webkit-scrollbar { display:none; }
  /* Category strip inherits 768px negative margin but update padding size */
  .cat-strip    { margin:0 -20px; padding:4px 20px 10px; }
}