/* ==================== Base ==================== */
* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --bg-primary: #fff;
    --bg-secondary: #f8f8f8;
    --text-primary: #000;
    --text-secondary: #333;
    --border-color: #000;
    --border-light: #e6e6e6;
}

/* dark mode support removed */

body {
    font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    background: var(--bg-primary);
    color: var(--text-primary);
    transition: background 0.3s, color 0.3s;
}

/* ==================== Layout Container ==================== */
.site-wrapper {
    max-width: min(2000px, 100%); /* control site width without overflow */
    margin: 0 auto;    /* center horizontally */
    /* Reduced top padding to match the design with topbar */
    padding: 40px 0 0;   /* top 40, no side padding; inner containers handle margins */
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* sticky footer layout */
}

/* Allow main content to grow and push footer to bottom */
main { flex: 1 0 auto; }

.site-footer {
    padding: 22px 0;
    border-top: 1px solid var(--border-color);
    margin-top: auto; /* stick to bottom in flex layout */
    text-align: center;
    font-size: 13px;
    color: var(--text-secondary);
}

@media (max-width: 700px) {
    .site-footer { font-size: 12px; padding: 16px 0; }
}
@media (max-width: 480px) {
    .site-footer { font-size: 10px; padding: 12px 0; }
}

/* (topbar removed — prototype chrome not part of site design) */

/* ==================== Borders ==================== */
.border-bottom { border-bottom: 1px solid var(--border-color); }
.border-top { border-top: 1px solid var(--border-color); }
.border-all { border: 1px solid var(--border-color); }

/* ==================== Navbar ==================== */
.navbar {
    display: grid;
    grid-template-columns: auto 1fr; /* logo | links */
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px 32px; /* container side gutter */
    width: 100%;
    gap: 20px;
    min-width: 0; /* allow children to shrink */
}

/* Remove the visible divider under the navbar site-wide */
.navbar.border-bottom { border-bottom: none; }

/* Ensure logo is black and not underlined */
.logo a, .logo a:link, .logo a:visited, .logo a:hover {
    color: var(--text-primary);
    text-decoration: none;
}
/* Remove focus outline for logo link (visual only) */
.logo a:focus,
.logo a:focus-visible {
    outline: none;
    box-shadow: none;
}
.logo-main { color: var(--text-primary); }
.logo-sub { color: var(--text-secondary); text-decoration: none; }

/* Logo override: use Arial only for the main brand text (W2KSHOP) */
.logo-main {
    font-family: Arial, Helvetica, sans-serif;
}
.nav-links {
    display: flex;
    list-style: none;
    gap: 30px;
    align-items: center;
    justify-self: end; /* push links to the right in the grid */
    margin-left: 0; /* grid handles alignment */
    flex-wrap: nowrap; /* keep links on one row */
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0; /* allow shrinking in grid */
}

.nav-links a {
    text-decoration: none;
    color: var(--text-primary);
    text-transform: uppercase;
    font-size: clamp(8px, 1.5vw, 13px);
    white-space: nowrap;
}

/* dark mode toggle removed */

/* ==================== Logo ==================== */
.logo {
    display: flex;
    flex-direction: column;
    line-height: 1;
}
/* prevent logo from growing and pushing nav-links to next line */
.logo { flex: 0 0 auto; }
.logo-main {
    font-family: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-weight: 700;
    font-variation-settings: 'wght' 700;
    font-synthesis: none;
    font-size: 34px;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.logo-sub {
    font-family: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-weight: 300;
    font-size: 14px;
    color: #666;
    text-transform: capitalize;
    margin-top: 2px;
}

/* ensure logo text stacks on two lines */
.logo-main, .logo-sub {
    display: block;
    line-height: 1;
}
/* Make the brand name responsive (smaller) */
.logo-main { font-size: clamp(12px, 2.2vw, 30px); }
.logo-sub { margin-top: 1px; font-size: clamp(7px, 1vw, 16px); color: #666; }

/* ==================== Grid (Projects) ==================== */
/* ==================== Grid (Projects) ==================== */
/* Category tabs that sit above the homepage grid */
.category-tabs {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px 32px 0; /* align with grid gutters */
    border-bottom: 1px solid #e6e6e6;
}
.category-tabs .tabs-inner { display:flex; gap:18px; align-items:center; }
.category-tabs .tab {
    text-decoration: none;
    color: #666;
    font-size: 13px;
    padding: 8px 6px 12px;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px; /* sit the border on top of the subtle baseline */
}
.category-tabs .tab.active { color: var(--text-primary); border-bottom-color: var(--text-primary); font-weight:600; padding-bottom:10px; }
.category-tabs .tab:focus,
.category-tabs .tab:active { outline: none; box-shadow: none; }

/* Navbar links: remove underlines and focus outlines */
.nav-links a,
.nav-links a:visited,
.nav-links a:hover,
.nav-links a:focus {
    text-decoration: none;
    color: inherit;
}
/* ensure nav links don't expand to full width on small screens */
.nav-links { flex: 0 0 auto; }
.nav-links a:focus { outline: none; box-shadow: none; }


/* Homepage (index) grid: centered container aligned to navbar */
.grid-container {
    display: grid;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding: 48px 32px 24px; /* top 48 under navbar, 32 side gutters */
    grid-template-columns: repeat(3, 1fr);
    gap: 24px; /* index grid gap */
    justify-items: center; /* ensure thumbnails are centered in their grid tracks */
}

/* Initial skeleton placeholders: prevent first-load white flash and card reflow */
.grid-container .skeleton-item {
    width: 100%;
    pointer-events: none;
    border: none;
}
.grid-container .skeleton-item .image-wrapper {
    width: 100%;
    aspect-ratio: 3 / 2;
    border-radius: 2px;
    background: #f1f1f1;
}
.grid-container .skeleton-item .overlay,
.grid-container .skeleton-item .item-info {
    display: none !important;
}
/* Listing cards: fixed slot for stable grid, full image visible (no crop/stretch) */
body:not(.project-page) .grid-container {
    justify-items: stretch;
    align-items: start;
}
body:not(.project-page) .grid-container .grid-item {
    width: 100%;
}
body:not(.project-page) .grid-container .image-wrapper {
    aspect-ratio: 3 / 2;
    background: #f3f3f3;
    display: flex;
    align-items: center;
    justify-content: center;
}
body:not(.project-page) .grid-container .image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}


/* Project pages: clean grid (no masonry), centered images on white cards */
.project-page .grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px; /* project grid gap */
    padding: 0 32px 56px; /* 32 side gutters, 56 bottom spacing */
    align-items: center;
    justify-content: center;
    justify-items: center; /* center items within their tracks so mismatched sizes look balanced */
}
.project-page .grid-item {
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.project-page .image-wrapper {
    /* Preserve natural image aspect ratio on project pages (no forced square) */
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent; /* remove grey background */
    padding: 12px 0; /* give a little vertical breathing room */
}
.project-page .image-wrapper {
    display: flex;
    align-items: center; /* vertically center images inside wrappers */
    justify-content: center; /* horizontally center */
}
.project-page .image-wrapper img {
    /* Keep the image at its natural aspect, max-width to container */
    width: 100%;
    height: auto;
    max-width: 92%; /* slightly smaller so images don't touch edges */
    max-height: 400px; /* constrain very tall images */
    object-fit: contain; /* show whole image and center vertically */
    display: block;
}

/* JS helper classes: when JS adds `.two-last` the last row has exactly two items;
     place them in the left and right columns. When `.last-single` is present,
     place the single last item on the right column. These rules only take
     effect on wide (3-column) layouts. */
@media (min-width: 1000px) {
    .project-page .grid-container.two-last .grid-item:nth-last-child(2) { grid-column: 1; }
    .project-page .grid-container.two-last .grid-item:nth-last-child(1) { grid-column: 3; }
    .project-page .grid-container.last-single .grid-item:nth-last-child(1) { grid-column: 3; }
}

/* Project header container aligns with navbar */
.project-header {
    max-width: 1200px;
    margin: 0 auto;
    padding: 56px 32px 24px; /* match grid container gutters */
    text-align: left;
    width: 100%;
    display: flex;           /* prevent any centering by layout engines */
    flex-direction: column;
    align-items: flex-start;  /* anchor children to left */
}

/* Project grid uses the same centered container */
.project-page .grid-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 32px 56px;
}

/* ==================== About page specifics ==================== */
.about-grid { display:grid; grid-template-columns: 180px 1fr; gap:24px; align-items:start; max-width:1000px; margin:0 auto; padding:0 32px; }
.about-grid img.profile { width:160px; height:160px; object-fit:cover; border-radius:6px; display:block; }
.about-grid .profile-cta { margin-top:12px; font-size:13px; color:#333; }
.team-grid { display:grid; grid-template-columns: repeat(3,1fr); gap:16px; margin-top:12px; }
.team-card { border:1px solid #000; padding:12px; font-size:13px; background:#fff; }
.fact-list { margin-left:18px; font-size:13px; }
@media (max-width:900px) {
    .about-grid { grid-template-columns: 1fr; padding:0 20px; }
    .team-grid { grid-template-columns: repeat(2,1fr); }
}
@media (max-width:480px) {
    .team-grid { grid-template-columns: 1fr; }
}

/* Additional mobile tweaks: reduce margins and hide slider controls */
@media (max-width: 640px) {
    /* Tighter gutters on small devices */
    .site-wrapper { padding-top: 20px; }
    .navbar { padding: 12px 14px; }
    .category-tabs { padding: 12px 16px 0; }
    .grid-container { padding: 16px 12px 12px; gap: 12px; grid-template-columns: 1fr !important; }
    /* About page: stack vertically on mobile */
    .about-card { 
        max-width: calc(100% - 32px) !important; 
        margin: 24px 16px !important; 
        padding: 0 !important; 
        grid-template-columns: 1fr !important; 
        gap: 20px; 
        display: grid !important;
    }
    .about-media { width: 100%; display: block; }
    .about-content { width: 100%; display: block; }
    .about-media img { max-height: none; width: 100%; height: auto; display: block; }
    /* Contact form: keep margins and border on mobile */
    .contact-panel { 
        max-width: calc(100% - 32px) !important; 
        margin: 24px 16px !important; 
        padding: 20px; 
        border: 1px solid #e6e6e6 !important;
        box-sizing: border-box;
        display: block;
    }
}

@media (max-width: 480px) {
    /* On phones, simplify UI: hide lightbox navigation and counter (no slider behavior)
       and reduce overlay distractions. Keep image viewing simple and tap-to-close. */
    #lightbox-prev, #lightbox-next, #lightbox-counter { display: none !important; }
    #lightbox-image { max-width: 100% !important; max-height: 80vh !important; transform: none !important; }
    .logo-main { font-size: clamp(18px, 5vw, 26px); }
    .grid-container { grid-template-columns: 1fr !important; }
    /* Ensure navbar stays horizontal: logo left, links right */
    .navbar { flex-direction: row !important; justify-content: space-between !important; align-items: center !important; }
    .logo { text-align: left !important; }
    .nav-links { margin-left: auto !important; gap: 8px !important; }
    /* Contact form: smaller margins on smallest screens but still visible */
    .contact-panel { 
        max-width: calc(100% - 24px) !important; 
        margin: 16px 12px !important; 
        padding: 16px; 
        border: 1px solid #e6e6e6 !important;
        box-sizing: border-box;
        display: block;
    }
}
/* ===== About / Contact panels ===== */
.about-card {
    max-width: 1200px;
    margin: 40px auto;
    padding: 56px 32px;
    border: none;
    background: transparent;
    display: grid;
    grid-template-columns: 1fr 1fr; /* equal columns on desktop */
    gap: 32px;
    align-items: stretch; /* ensure both columns match height */
}
.about-card > div:first-child { display: flex; height: 100%; }
.about-media.placeholder {
    background: #fff;
    border-radius: 6px;
    min-height: 240px;
}
.about-card img { width:100%; height:100%; object-fit: cover; border-radius:6px; display:block; }
/* On narrower viewports, keep photo the same width as text and avoid stretching height */
@media (max-width: 939px) {
  .about-card { grid-template-columns: 1fr !important; }
  .about-card > div:first-child { justify-content: center; align-items: center; }
  .about-card > div:first-child img { width: 100%; height: auto; object-fit: contain; }
  .about-media.placeholder { min-height: 180px; }
}

.about-card .meta { color:#666; font-size:13px; margin-top:12px; }
.about-content { display: block; }
.about-content p { line-height: 1.6; color: #333; font-size: 15px; margin: 0 0 12px 0; text-align: justify; text-justify: inter-word; }

.about-actions { margin-top: 18px; display:flex; gap:16px; align-items:center; }
.instagram-link { display:inline-flex; align-items:center; gap:8px; text-decoration:none; color:inherit; font-size:13px; outline:none; }
.instagram-link svg { width:20px; height:20px; display:block; }
.instagram-link:hover, .instagram-link:focus, .instagram-link:focus-visible { outline: none; box-shadow: none; opacity:0.9; }
.contact-link { display: inline-block; margin-top: 8px; padding: 12px 32px; border: 1px solid var(--text-primary); background: var(--bg-primary); color: var(--text-primary); text-decoration: none; cursor: pointer; font-size: 13px; font-weight: 500; letter-spacing: 0.3px; transition: all 0.2s ease; width: fit-content; }
.contact-link:hover { background: var(--text-primary); color: var(--bg-primary); }

/* removed dark-mode overrides for contact link */

.contact-panel {
    max-width:500px;
    margin:40px auto;
    padding:24px;
    border:1px solid var(--border-light);
    background: var(--bg-primary);
    border-radius:4px;
}
.contact-panel form { display:grid; gap:12px; }
.contact-panel input[type="text"], .contact-panel input[type="email"], .contact-panel textarea {
    width:100%; padding:10px; border:1px solid var(--border-light); font-size:14px; background: var(--bg-primary); color: var(--text-primary); transition:all 0.2s ease; border-radius:4px;
}
.contact-panel input[type="text"]:focus, .contact-panel input[type="email"]:focus, .contact-panel textarea:focus {
    outline: none; border-color: #999; box-shadow: 0 0 0 2px rgba(0,0,0,0.05);
}
.contact-panel textarea { resize: none; }
.contact-panel button { padding:12px 32px; border:1px solid var(--text-primary); background:var(--bg-primary); color:var(--text-primary); cursor:pointer; font-size:13px; font-weight:500; letter-spacing:0.3px; transition:all 0.2s ease; border-radius:4px; }
.contact-panel button:hover { background:var(--text-primary); color:var(--bg-primary); }
.contact-panel button:focus { outline: none; box-shadow: 0 0 0 2px rgba(0,0,0,0.05); }
/* removed dark-mode overrides for contact panel */
.contact-panel button:active { transform:scale(0.98); }

/* Keep overlays visible on homepage but hide them on exhibitions and project pages */
.grid-container .overlay { opacity: 0.95; }
.project-page .image-wrapper .overlay, .pages-exhibitions .image-wrapper .overlay { display: none !important; }
@media (max-width: 1100px) {
    .project-page .grid-container { grid-template-columns: repeat(2, minmax(180px, 420px)); gap: 24px; }
    .project-page .grid-item { min-height: 0; }
}
@media (max-width: 700px) {
    .project-page .grid-container { grid-template-columns: 1fr; gap: 20px; }
    .project-page .grid-item { min-height: 0; }
}

/* Hide native browser scrollbars but keep scrolling functional */
html {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
}
html::-webkit-scrollbar { display: none; } /* WebKit */

/* mobile flex overrides removed to avoid conflicts with grid navbar */

/* About card force rules to help JS-free fallbacks */
.about-card { align-items: stretch !important; }
.about-card > div:first-child { display: flex !important; overflow: hidden !important; }
.about-card img { width:100% !important; height:100% !important; object-fit: cover !important; display:block !important; }


/* Minimal scroll-to-top button */
.scroll-top {
    position: fixed;
    right: 18px;
    bottom: 22px;
    width: 44px;
    height: 44px;
    border-radius: 22px;
    background: #fff;
    color: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0; /* hide any text fallback */
    border: 1px solid rgba(0,0,0,0.08);
    cursor: pointer;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .18s ease, transform .18s ease, box-shadow .15s ease;
    z-index: 9999;
    box-shadow: 0 6px 18px rgba(0,0,0,0.06);
}
.scroll-top:hover { box-shadow: 0 10px 24px rgba(0,0,0,0.10); transform: translateY(-2px); }
.scroll-top svg { display:block; width:18px; height:18px; }
.scroll-top svg path { stroke: #000; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.scroll-top.visible { opacity: 1; transform: translateY(0); }


/* Each grid entry is a card: square thumbnail on top, caption below */
/* Backwards-compatibility for existing HTML: keep image wrapper square and show title below */

/* Make each grid item a square card (image + caption together = square) */
.grid-item {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    overflow: hidden;
    border: none; /* remove outline border for photos */
}

.image-wrapper {
    position: relative;
    width: 100%;
    /* image-wrapper sizes to the image to keep overlay on the photo only */
    flex: 0 0 auto;
    min-height: 0; /* allow flex children to shrink correctly */
    overflow: hidden;
    background: var(--bg-secondary); /* match site background */
    line-height: 0; /* remove inline-image baseline gap */
}

.image-wrapper img {
    width: 100%;
    height: auto; /* preserve natural aspect ratio */
    display: block;
}

/* If an image is placed directly inside a .grid-item (project gallery pages),
   show it full-width and keep its natural aspect ratio. This does not affect
   thumbnails inside .image-wrapper (they use .image-wrapper img selector). */
.grid-item > img {
    /* direct images inside .grid-item (project galleries) should fill the
       available width while keeping their natural aspect ratio */
    width: 100%;
    height: auto;
    display: block;
    flex: 0 0 auto;
}

/* ensure overlay inside image-wrapper works on hover */
.image-wrapper .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.85);
    color: #fff;
    display:flex;
    justify-content:center;
    align-items:center;
    opacity: 0;
    transition: opacity .25s ease;
}
.grid-item:hover .image-wrapper .overlay { opacity: 1; }

/* Style the span text inside the overlay */
.overlay span {
    font-family: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-weight: 600;
    letter-spacing: 1px;
    font-size: 16px;
    text-transform: uppercase;
    color: #ffffff;
    text-align: center;
    text-shadow: 0 1px 4px rgba(0,0,0,0.7);
    max-width: 85%;
    line-height: 1.2;
}

/* Exhibitions page: white background with black text */
.exhibitions-page .image-wrapper .overlay {
    background: rgba(255,255,255,0.95);
    color: #000;
}

.exhibitions-page .overlay span {
    color: #000;
    text-shadow: 0 1px 4px rgba(255,255,255,0.7);
}

/* Architecture page: white background with black text */
.architecture-page .image-wrapper .overlay {
    background: rgba(255,255,255,0.95);
    color: #000;
}

.architecture-page .overlay span {
    color: #000;
    text-shadow: 0 1px 4px rgba(255,255,255,0.7);
}

/* removed dark-mode overlay rules */

/* Disable overlays on actual project pages (show plain photos only) */
.project-page .image-wrapper .overlay { display: none !important; }

/* Remove borders on items inside the grid to make images flush */
.grid-container .border-all { border: none; }

/* Remove any padding inside homepage thumbnails so overlay touches image edges */
body:not(.project-page) .grid-container .grid-item { padding: 0; }
body:not(.project-page) .grid-container .image-wrapper { padding: 0; background: #f3f3f3; }

/* ==================== Item Info ==================== */
.item-info {
    padding: 12px 15px;
    font-size: 11px;
    letter-spacing: 1px;
    flex: 0 0 auto; /* caption occupies its natural height */
}

/* Hide captions under photos on grid pages; title will appear on hover */
.grid-container .item-info { display: none; }

/* ==================== Project Detail Specifics ==================== */

.project-header h1 {
    font-size: 24px;
    margin-bottom: 20px;
    text-transform: uppercase;
}

/* force header and meta content left-aligned regardless of inherited center rules */
.project-header,
.project-header * {
    text-align: left !important;
}

.details-meta {
    text-align: left; /* force left alignment for meta block */
}
.details-meta p {
    margin-bottom: 5px;
    font-size: 14px;
    font-weight: 400; /* normal weight for description values */
}
.details-meta p strong { font-weight: 600; } /* make labels slightly bolder than values */

/* ensure header elements cannot center themselves via auto margins */
.project-header h1,
.project-header .details-meta {
    display: block;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* ==================== Responsive ==================== */
@media (max-width: 1100px) {
    /* Narrow sides and use 2 columns between 901–1100px */
    .site-wrapper { padding: 64px 0 0; }
    .navbar { padding: 16px 24px; }
    .grid-container { padding: 40px 24px 20px; grid-template-columns: repeat(2, 1fr); gap: 24px; }
    .project-page .grid-container { padding: 0 24px 48px; grid-template-columns: repeat(2, 1fr); gap: 28px; }
    .project-header { padding: 48px 24px 20px; }
}

@media (max-width: 700px) {
    .grid-container { grid-template-columns: 1fr !important; }
}

@media (max-width: 900px) {
    .about-grid { grid-template-columns: 1fr; padding:0 20px; }
    .about-card { grid-template-columns: 1fr; padding: 40px 20px; gap: 24px; }
    .project-page .grid-container { grid-template-columns: 1fr; padding: 0 20px 40px; gap: 24px; }
    .navbar { padding: 10px 12px; gap: 12px; }
    .nav-links { gap: 8px; }
    .site-wrapper { padding: 56px 0 0; }
    .project-header { padding: 40px 20px 16px; }
}

@media (max-width: 640px) {
    /* Small tablets/phablets */
    .site-wrapper { padding: 48px 0 0; }
}

@media (max-width: 480px) {
    /* Phones */
    .site-wrapper { padding: 40px 0 0; }
    .navbar { padding: 8px 10px; gap: 10px; }
    .logo { min-width: 0; }
    .nav-links { gap: 8px; overflow-x: auto; -webkit-overflow-scrolling: touch; justify-self: end; }
    .grid-container { padding: 28px 16px 14px; gap: 16px; }
    .project-page .grid-container { padding: 0 16px 32px; gap: 20px; }
    .project-header { padding: 28px 16px 12px; }
}
/* Page section wrapper to align headings with navbar */
.page-section { padding: 40px 0; }
.page-inner { max-width: 1200px; margin: 0 auto; padding: 0 32px; }
.about-inner h1 { max-width: 1000px; margin: 0 auto 28px; }
@media (max-width:900px) {
    .about-inner h1 { max-width: 100%; margin-left: 0; margin-right: 0; }
}

/* Link and CTA adjustments to avoid default purple links */
a, a:link, a:visited { color: var(--text-primary); text-decoration: none; }
a:hover, a:focus { color: #8B6A3F; text-decoration: underline; }

/* removed dark-mode link hover overrides */

/* Subtle bordered call-to-action */
a.cta { display:inline-block; padding:8px 12px; border:1px solid var(--text-primary); color:var(--text-primary); text-decoration:none; }
a.cta:hover { background:var(--bg-secondary); border-color:#cbb17d; color:var(--text-primary); }

/* removed dark-mode cta hover override */

/* Reduce emphasis of link focus outlines for visual consistency */
a:focus { outline: none; box-shadow: 0 0 0 2px rgba(0,0,0,0.05); }
.grid-item:focus { outline: none; box-shadow: none; }
#instagram-link:focus { outline: none; box-shadow: none; }

/* Lightbox dark mode support */
#lightbox-modal { background: rgba(245,245,245,0.92) !important; }
#lightbox-close, #lightbox-prev, #lightbox-next, #lightbox-counter { color: #333 !important; }

/* removed dark-mode lightbox overrides */

/* Responsive heading spacing */
@media (max-width:900px) {
    .page-inner h1 { margin-bottom: 20px; }
}

/* Navbar hard enforcement: keep logo left and links right on one line */
.navbar { display: grid !important; grid-template-columns: auto 1fr !important; align-items: center !important; }
.navbar > .logo { justify-self: start !important; }
.navbar > .nav-links { justify-self: end !important; }
.navbar .nav-links { flex-wrap: nowrap !important; min-width: 0 !important; }
.navbar .nav-links a { white-space: nowrap !important; }

/* Mobile navbar & about-image fallbacks: keep desktop-like navbar layout
   on narrow screens and ensure about images fit the text column when stacked. */
@media (max-width: 640px) {
    .navbar { padding: 10px 12px !important; }
    .nav-links { gap: 10px !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
    .nav-links a { white-space: nowrap !important; font-size: 11px !important; letter-spacing: 0.015em; }
}

@media (max-width: 480px) {
    .navbar { padding: 10px 12px !important; }
    /* Restore optimized mobile nav with precise top-edge alignment */
    .nav-links {
        margin-left: 0 !important;
        display: flex !important;
        gap: 12px !important;
        justify-self: end !important;
        align-self: start !important;   /* anchor to top of grid cell */
        position: relative;
        top: -6px;                     /* lowered to avoid sitting too high; tweak -4 to -8 if needed */
    }
    .nav-links li { display: inline-block !important; }
    .nav-links a { font-size: 10px !important; letter-spacing: 0.01em; }

    /* Keep category tabs compact on phones */
    .category-tabs .tab { font-size: 11px; padding: 6px 4px 8px; }
    .category-tabs .tabs-inner { gap: 10px; }
}