/* Container for horizontal padding and max-width */
.container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding-left: 2rem;
    padding-right: 2rem;
    width: 100%;
    box-sizing: border-box;
}

/* Header layout: logo/tagline left, nav right (fixed so logo+nav stay visible) */
.site-hero {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: calc(var(--nav-height) + 20px); /* extra padding for visual comfort */
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: var(--bg-color);
    padding: 12px 20px;
    z-index: 1300;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    width: 100vw;
    box-sizing: border-box;
}
.header-left {
    display: flex;
    align-items: center;
    gap: 1.2rem;
}
.logo-tagline-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4rem;
}
.logo {
    /* constrain by header height so the fixed header never clips the logo */
    max-height: calc(var(--logo-size));
    width: auto;
    height: auto;
    display: block;
}
.tagline {
    font-size: 1rem;
    color: var(--muted-text);
    font-weight: 400;
    margin: 0;
    white-space: normal;
    max-width: 680px;
}
.tagline-subtle { opacity: 0.75; }
.header-right {
    margin-left: auto;
}
/* ================================
   1. Global Reset & Base Settings
   ================================ */

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    --black: #000000;
    --charcoal: #1f1f1f;
    --bg-color: #ffffff;
    --text-color: var(--charcoal);
    --muted-text: #666666;
    --accent-color: var(--black);
    --border-color: #e5e5e5;

    --max-width: 1200px;
    --spacing: 1.5rem;
    --radius: 6px;
    --nav-height: 24px; /* used to set header height */
    --nav-offset: 54px; /* used to offset anchor jumps (header height) */
    --logo-size: 40px; /* used to set the logo size */
    --anchor-offset: 120px; /* used to offset anchor jumps (header + padding) */
    --collage-gutter: 24px; /* gutter used by collage layouts */
    --collage-row-height: 260px; /* default height for each collage row */
}

html {
    font-size: 16px;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background-color: var(--bg-color);
    color: var(--text-color);
    line-height: 1.6;
}

/* reserve space for the fixed navigation so content doesn't jump under it */
body { padding-top: calc(var(--nav-offset) + 8px); }

.site-hero { padding: 60px 40px; }
.site-hero .hero-inner {
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 1.5rem;
    align-items: center;
}
.hero-icon { width: 140px; height: auto; border-radius: 8px; }
.hero-copy h1 { color: var(--charcoal); font-weight: 600; margin-bottom: .3rem; }
.lead { color: var(--muted-text); margin-bottom: .6rem; max-width: 800px;}
.cta { background: var(--charcoal); color: #fff; padding: .5rem .9rem; text-decoration: none; border-radius: 6px; }
.cta:hover { opacity: .95; }

/* Navigation list styles and sticky nav */
.skip-link {
    position: absolute;
    left: -9999px;
    top: auto;
}

.sticky-nav {
    position: static; /* placed inside the fixed .site-hero */
    z-index: 1200; /* stacking context inside header */
    background: transparent;
    border-bottom: none;
    box-shadow: none;
}

/* helpers to keep logo/nav aligned inside the fixed header */
#logo-placeholder { display: flex; align-items: center; }
#nav-placeholder { display: flex; align-items: center; }
#nav-placeholder .main-nav { margin-left: auto; }

/* Keep header contents constrained so header height doesn't grow unexpectedly */
.site-hero .main-nav ul { padding: 0; border-bottom: none; }
.site-hero #logo-placeholder img,
.site-hero .logo { max-height: var(--logo-size); width: auto; }

@media (max-width: 800px) {
    /* slightly larger reserved space on mobile to accommodate wrapped items */
    body { padding-top: calc(var(--nav-offset) + 12px); }
    .site-hero .logo { max-height: calc(var(--logo-size) - 6px); }
}

.main-nav ul {
    display: flex;
    gap: 2rem;
    justify-content: flex-end;
    align-items: center;
    padding: 0;
    margin: 0;
    list-style: none;
}

/* Nav toggle (hamburger) - hidden on wide screens */
.nav-toggle {
    display: none;
    background: transparent;
    border: none;
    padding: .4rem .6rem;
    margin-right: .25rem;
    cursor: pointer;
    align-self: center;
}
.nav-toggle:focus { outline: 2px solid rgba(0,0,0,0.12); outline-offset: 2px; }
.nav-toggle__bars {
    display: inline-block;
    width: 22px;
    height: 2px;
    background: var(--charcoal);
    position: relative;
}
.nav-toggle__bars::before, .nav-toggle__bars::after {
    content: '';
    position: absolute;
    left: 0;
    width: 22px;
    height: 2px;
    background: var(--charcoal);
}
.nav-toggle__bars::before { top: -7px; }
.nav-toggle__bars::after { top: 7px; }
.main-nav a {
    color: var(--charcoal);
    text-decoration: none;
    font-weight: 500;
    font-size: 1.1rem;
    padding-bottom: 0.2em;
    border-bottom: 2px solid transparent;
    transition: border-color 0.2s;
    padding: .35rem .5rem;
}
.main-nav a:hover, .main-nav a:focus {
    border-bottom: 2px solid var(--charcoal);
}

/* Section backgrounds (alternate) */

.section-bg-white, .section-bg-charcoal {
    width: 100vw;
    margin-left: 50%;
    transform: translateX(-50%);
    padding: 3rem 0 2.5rem 0;
}
.section-bg-white {
    background: #fff; /* You can change this to your preferred white */
    color: var(--text-color);
}
.section-bg-charcoal {
    background: var(--charcoal); /* You can change this to your preferred charcoal */
    color: #fff !important;
}

/* Section spacing */
section {
    margin-bottom: 2.5rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

/* About section two-column layout */
.about-container {
    display: flex;
    flex-wrap: wrap;
    gap: 2.5rem;
    align-items: flex-start;
    max-width: 1100px;
    margin: 0 auto;
    padding: 2rem 1rem;
}
.about-image {
    flex: 0 0 220px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}
.about-text {
    flex: 1 1 350px;
}
.about-text p {
    color: #ffffff;
    font-size: 1rem; /* adjust to taste, e.g. 1.1rem or 16px */
    line-height: 1.6;
    padding-bottom: 12px;
}

.about-text h1 {
    font-size: 1.5rem;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: clamp(1.25rem, 2.5vw, 2rem);
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 1.2em;
}

.about-chinese-text {
    margin-top: 2rem;
    font-size: 1rem;
    color: #ffffff;
}


/* Standardize heading underlines */
h1, h2, h3 {
    border-bottom: 2px solid var(--border-color);
    padding-bottom: 0.3em;
    margin-bottom: 1.2em;
}
.site-hero h1,

h1 {
    font-size: 2.2rem;
}

/* Video / Instagram preview card styles */
.video-card, .ig-card {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius);
    background: #fafafa;
}
.video-card img, .ig-card img, .video-preview img, .instagram-preview img {
    display: block;
    width: 100%;
    height: auto;
}

/* Services list spacing used in About/What I Do sections */
.services-list {
    padding-left: 40px;
}

/* Privacy page: reduce space between heading and metadata line */
.last-updated {
    margin-top: 0.25rem; /* smaller gap under the heading */
    margin-bottom: 0.6rem;
    color: var(--muted-text);
    font-size: 0.98rem;
}

/* Compact section variant to reduce vertical rhythm for short pages like privacy */
.section--compact {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
    margin-bottom: 0.5rem !important;
}

/* Reduce heading bottom spacing inside compact sections */
.section--compact .section-heading-full {
    margin-bottom: 0.25rem !important;
    padding-bottom: 0.25rem !important;
}
.video-preview, .instagram-preview {
    display: inline-block;
    position: relative;
    vertical-align: middle;
}
.play-overlay {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0,0,0,0.6);
    color: #fff;
    padding: .6rem .8rem;
    border-radius: 999px;
    font-size: 1.1rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

/* small corner badge variant (if needed) */
.play-overlay.corner {
    left: auto;
    right: .6rem;
    top: auto;
    bottom: .6rem;
    transform: none;
}

/* series grid */
.series-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
}

/* responsive limit for preview thumbnails */
.instagram-preview img,
.video-preview img {
    width: 100%;
    max-width: 200px;
    height: auto;
    display: block;
}
h2 {
    font-size: 1.5rem;
}
h3 {
    font-size: 1.2rem;
}

/* prevent anchor targets from hiding under the sticky nav */
section, h1, h2, h3 { scroll-margin-top: calc(var(--anchor-offset)); }

/* Full-bleed section headings (robust) and small vertical padding so text/images are not cut off */
/* Use an approach that avoids translateX and works across pages */
.section-heading-full {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    box-sizing: border-box;
    padding-left: 2rem;
    padding-right: 2rem;
    padding-top: 18px;
    padding-bottom: 18px;
    margin-left: 0;
    margin-right: 0;
}

/* apply to common section heading selectors */
.section-bg-white > .container > h1,
.section-bg-charcoal > .container > h1,
.portfolio-section > .container > h1 {
    /* keep current visual style; ensure vertical padding so headings aren't clipped */
    padding-top: 12px;
    padding-bottom: 12px;
}

/* Apply small vertical padding to h2 in sections (aligned with container) */
.section-bg-white > .container > h2,
.section-bg-charcoal > .container > h2,
.portfolio-section > .container > h2 {
    padding-top: 6px;
    padding-bottom: 6px;
}
.skip-link:focus {
    left: 1rem;
    top: 1rem;
    width: auto;
    height: auto;
    background: #fff;
    padding: .4rem .6rem;
    border-radius: 4px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}
.main-nav ul { list-style: none; display: flex; gap: 1rem; align-items: center; padding: 0; margin: 0; }
.main-nav li a { color: var(--text-color); text-decoration: none; padding: .35rem .5rem; }
.main-nav li a:hover { text-decoration: underline; }

/* Mobile adjustments */
@media (max-width: 800px) {
    .site-hero { flex-direction: column; align-items: flex-start; padding: 1rem; }
    .header-left, .logo-tagline-wrap { flex-direction: column; align-items: flex-start; gap: .5rem; }
    .main-nav ul { flex-direction: column; gap: .5rem; align-items: flex-start; }
    .header-right { margin-left: 0; }
    /* show hamburger and collapse menu (animation via max-height) */
    .nav-toggle { display: inline-flex; }
    /* keep menu flex but hide via max-height for smooth animation */
    .main-nav ul { display: flex; flex-direction: column; gap: .5rem; align-items: flex-start; max-height: 0; overflow: hidden; opacity: 0; transition: max-height 320ms ease, opacity 220ms ease; }
    .main-nav.open ul { max-height: 600px; opacity: 1; }
}

/* mobile menu presentation tweaks */
@media (max-width: 800px) {
    .main-nav { width: 100%; }
    .main-nav ul { background: var(--bg-color); padding: .75rem 1rem; border-top: 1px solid var(--border-color); box-shadow: 0 6px 18px rgba(0,0,0,0.06); border-radius: 8px; }
    .main-nav ul li { width: 100%; }
    .main-nav ul li a { display: block; padding: .6rem 0; }
}

/* Ensure fixed header is truly full-bleed and not constrained by the generic header selector */
header.site-hero,
.site-hero {
    max-width: 100vw !important;
    width: 100vw !important;
    left: 0 !important;
    right: 0 !important;
    margin: 0 !important;
    box-sizing: border-box;
}

/* Decouple logo size from nav offset: keep a sensible max height so increasing --nav-offset
   doesn't blow up the visual logo size. */
.site-hero .logo {
    max-height: 64px;
    width: auto;
    height: auto;
    display: block;
}

/* If the tagline wraps, ensure it remains inside the header background */
.site-hero .logo-tagline-wrap {
    overflow: visible;
}

/* Honeypot - visually hidden but accessible to bots (do not use display:none) */
.hp {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}
.hp input { pointer-events: none; }

/* ================================
   2. Layout Containers
   ================================ */

header,
main,
footer {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: var(--spacing);
}

/* ================================
   3. Navigation
   ================================ */

.main-nav {
    /* make the nav full width but keep content centered via the inner ul */
    width: 100%;
}

/* center and constrain the menu so its bottom border aligns with other containers */
.main-nav ul {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: var(--spacing);
    display: flex;
    gap: 2rem;
    align-items: center;
    border-bottom: 1px solid var(--border-color);
}

.main-nav a {
    text-decoration: none;
    color: var(--text-color);
    font-weight: 500;
    padding: .35rem .5rem;
}

.main-nav a:hover {  text-decoration: underline; }

.site-header { 
    /* position: fixed; */
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    background: white;
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    z-index: 1000;
    /* keeps it above everything */
}

/* ================================
   4. Typography
   ================================ */

h1 {
    font-size: 2.5rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

h2 {
    font-size: 1.8rem;
    margin-bottom: 1rem;
}

p {
    color: var(--muted-text);
    max-width: 65ch;
}

/* ================================
   5. Gallery Grid
   ================================ */

#gallery {
    margin-top: 2rem;
}

/* Responsive video container */
.video-embed {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    margin-bottom: 48px;
}
.video-embed iframe {
    position: absolute;
    left: 0; top: 0; width: 100%; height: 100%;
}

/* Layout for multiple side-by-side embeds with headings */
.video-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--collage-gutter, 24px);
    align-items: start;
    margin-top: 1.25rem;
}
.video-row .video-item h2 {
    margin-bottom: .6rem;
    font-size: 1.05rem;
}
.video-row .video-item { display: block; }

@media (max-width: 900px) {
    .video-row { grid-template-columns: 1fr; }
}

#gallery img:hover {
    transform: scale(1.02);
}

/* ================================
   6. Footer
   ================================ */

footer, .site-footer {
    border-top: 1px solid var(--border-color);
    margin-top: 3rem;
    font-size: 0.95rem;
    color: var(--muted-text);
}

/* Structured site footer: three columns (copyright / contact / links) */
.site-footer {
    display: flex;
    gap: 1rem;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 2rem;
}
.site-footer__col { flex: 1 1 0; }
.site-footer__copyright { margin: 0; color: var(--muted-text); }
.site-footer__contact { margin: 0; color: var(--muted-text); }
.site-footer__links { display: flex; gap: 1rem; justify-content: flex-end; align-items: center; }
.site-footer__link { color: var(--muted-text); text-decoration: none; border-bottom: 1px solid transparent; padding-bottom: 0.1rem; }
.site-footer__link:hover { color: var(--charcoal); border-bottom-color: var(--border-color); }

@media (max-width: 800px) {
    .site-footer { flex-direction: column; align-items: flex-start; padding-left: 1rem; padding-right: 1rem; gap: .6rem; }
    .site-footer__links { justify-content: flex-start; }
}

/* Cookie consent banner - modern plain design matching site */
.cookie-consent-banner {
    position: fixed;
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
    z-index: 12000;
    background: rgba(31,31,31,0.95); /* charcoal with slight transparency */
    color: #fff;
    padding: 14px 16px;
    border-radius: 10px;
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 10px 30px rgba(0,0,0,0.25);
    max-width: calc(100% - 40px);
    box-sizing: border-box;
}
.cookie-consent__message {
    flex: 1 1 60%;
    color: #fff;
    font-size: 0.95rem;
    line-height: 1.3;
}
.cookie-consent__actions { display: flex; gap: 10px; align-items: center; }
.cookie-consent__btn {
    cursor: pointer;
    border: none;
    padding: 10px 14px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.98rem;
}
.cookie-consent__btn--accept {
    background: var(--charcoal);
    color: #fff;
}
.cookie-consent__btn--reject {
    background: transparent;
    color: #fff;
    border: 1px solid rgba(255,255,255,0.12);
}

@media (max-width: 700px) {
    .cookie-consent-banner { flex-direction: column; align-items: stretch; gap: 10px; left: 12px; right: 12px; }
    .cookie-consent__message { flex: unset; }
    .cookie-consent__actions { justify-content: flex-end; }
}

/* ================================
     Lightbox
     ================================ */
.no-scroll { overflow: hidden; }

.lightbox {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}
.lightbox.is-open { display: flex; }
.lightbox__backdrop {
    position: absolute; inset: 0; background: rgba(0,0,0,0.7);
}

.lightbox__content {
    position: relative;
    max-width: calc(100vw - 80px);
    max-height: calc(100vh - 100px);
    width: min(1100px, 90vw);
    display: flex;
    align-items: center;
    justify-content: center;
}
.lightbox__content { overflow: visible; }
.lightbox__frame {
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.lightbox__img {
    max-width: calc(100vw - 120px);
    max-height: calc(100vh - 120px);
    object-fit: contain;
    transition: transform 220ms cubic-bezier(.2,.9,.27,1);
    cursor: zoom-in;
    transform-origin: center center;
    touch-action: none;
    display: block;
}
.lightbox__img.zoomed {
    cursor: grab;
}
.lightbox__img.dragging { cursor: grabbing; }

/* Attach lightbox controls to image border */
.lightbox__btn {
    position: absolute;
    background: rgba(0,0,0,0.7);
    color: #fff;
    border: none;
    padding: .5rem .75rem;
    border-radius: 8px;
    font-size: 1rem;
    line-height: 1;
    box-shadow: 0 6px 18px rgba(0,0,0,0.45);
    z-index: 2;
    cursor: pointer;
}

/* Make the frame wrap the image exactly so buttons attach to its border */
.lightbox__frame {
    position: relative;
    display: inline-block; /* shrinkwrap to image */
    line-height: 0;
}

/* make the frame visually match the image and provide a subtle edge for controls */
.lightbox__frame { border-radius: 10px; }
.lightbox__frame img, .lightbox__img { border-radius: 8px; }
.lightbox__frame { box-shadow: 0 12px 40px rgba(0,0,0,0.45); }

.lightbox__frame .lightbox__close {
    top: 8px;
    right: 8px;
}
.lightbox__frame .lightbox__prev {
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
}
.lightbox__frame .lightbox__next {
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
}

/* Slightly increase hit targets on small screens */
@media (max-width: 600px) {
    .lightbox__btn { padding: .7rem .9rem; font-size: 1.25rem; }
}

/* Ensure the visible image governs the frame size and is responsive */
.lightbox__img {
    display: block;
    max-width: 100%;
    max-height: calc(100vh - 140px);
    width: auto;
    height: auto;
    object-fit: contain;
    transition: transform 220ms cubic-bezier(.2,.9,.27,1);
    cursor: zoom-in;
    transform-origin: center center;
}

/* Zoomed behaviour */
.lightbox__img.zoomed { cursor: grab; }
.lightbox__img.dragging { cursor: grabbing; }

/* Slightly larger hit targets on small screens */
@media (max-width: 600px) {
    .lightbox__btn { padding: .7rem .9rem; font-size: 1.25rem; }
}

@media (max-width: 800px) {
    .lightbox__content { max-width: calc(100vw - 40px); max-height: calc(100vh - 60px); }
}

/* ================================
   7. Responsive Tweaks
   ================================ */

@media (max-width: 600px) {
    h1 {
        font-size: 2rem;
    }

    .main-nav {
        flex-direction: column;
        gap: 1rem;
    }
}

/* ================================
   Contact page styles
   ================================ */
.contact-grid {
    display: grid;
    grid-template-columns: 360px 1fr;
    gap: 2rem;
    align-items: stretch;
    margin-top: 1rem;
}
.contact-info .contact-card {
    background: #fff;
    border: 1px solid var(--border-color);
    padding: 1.2rem;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    line-height: 20%;
}
.contact-photo { width: 100%; object-fit: cover; border-radius: 8px; margin-bottom: .9rem; height: 320px; }
/* limit portrait height so left column doesn't exceed form height; mobile override below */
.contact-info h2 { margin-bottom: .5rem; }
.contact-info .muted { color: var(--muted-text); }
.social { margin-top: 1rem; }
.social-link { display: inline-flex; gap: .6rem; align-items: center; color: var(--text-color); text-decoration: none; }
.social-link svg { color: var(--charcoal); }
.social-text { font-weight: 500; }

.contact-form { display: flex; }
.contact-form form { background: #fff; border: 1px solid var(--border-color); padding: .9rem; border-radius: 8px; width: 100%; display: flex; flex-direction: column; }
.form-row { display: flex; flex-direction: column; margin-bottom: .6rem; }
.form-row label { font-size: .95rem; margin-bottom: .25rem; color: var(--charcoal); }
input[type="text"], input[type="email"], input[type="tel"], textarea {
    padding: .45rem .6rem; border: 1px solid #e6e6e6; border-radius: 6px; font-size: 0.98rem; width: 100%;
}
textarea { resize: vertical; max-height: 160px; }
.form-row:last-child { margin-top: auto; }
.btn {
    /* layout only: padding, radius, alignment and basic interaction. Color/background are provided by modifiers */
    padding: .6rem .95rem;
    border-radius: 6px;
    cursor: pointer;
    align-self: flex-start;
    border: none;
    background: transparent;
    color: inherit;
}
.btn:hover { opacity: .95; }

/* Ensure the contact form send button keeps primary (charcoal) styling */
.send-button {
    background: var(--charcoal);
    color: #fff;
    border: none;
}

/* Re-apply inside dark sections to be explicit */
.section-bg-charcoal .send-button {
    background: var(--charcoal);
    color: #fff;
}

.send-button:hover { opacity: .95; }
.send-button:focus { outline: 2px solid rgba(0,0,0,0.08); outline-offset: 2px; }

/* Contact icons spacing */
.contact-info .icon {
    width: 28px;
    height: 28px;
    vertical-align: middle;
    margin-right: 10px;
    display: inline-block;
}


@media (max-width: 900px) {
    .contact-grid { grid-template-columns: 1fr; }
    .contact-photo { height: 220px; }
}

/* Project grid for portfolio overview */
.back-to-projects {
  display: inline-block;   /* needed so margin works properly */
  margin-top: 30px;      /* adjust as needed */
  margin-left: 0px;
}
.project-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-top: 1.25rem;
}
.project-grid { align-items: start; }
.project-card { display: block; border-radius: 8px; overflow: hidden; text-decoration: none; color: var(--charcoal); background: #fff; border: 1px solid var(--border-color); display: flex; flex-direction: column; }
.project-card img { width: 100%; aspect-ratio: 16 / 9; height: auto; object-fit: cover; display: block; }
.project-card__meta { margin-top: auto; padding: .8rem; min-height: 56px; }
.project-card__meta h3 { margin: 0; font-size: 1.05rem; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; }
.project-card:hover { transform: translateY(-4px); box-shadow: 0 8px 30px rgba(0,0,0,0.08); transition: transform .18s ease, box-shadow .18s ease; }

@media (max-width: 1000px) { .project-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px) { .project-grid { grid-template-columns: 1fr; } .project-card img { aspect-ratio: 16 / 9; height: auto; } }

/* Style Instagram/video previews like project cards so they sit in the same grid
   and have a centered play overlay and rounded previews. */
/* Instagram / social previews: show the media itself (no card chrome), but rounded */
.instagram-preview {
    display: block;
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    background: transparent;
    border: none;
    text-decoration: none;
}
.instagram-preview img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 9 / 16; /* vertical videos */
    object-fit: cover;
    border-radius: inherit;
}

/* Constrain social previews so vertical videos sit nicely in the project grid
   and remain centered. Adjust max-width as needed. */
.project-grid .instagram-preview {
    justify-self: center;
    max-width: 320px;
}
.instagram-preview .play-overlay {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
    background: rgba(0,0,0,0.6);
    color: #fff;
    padding: .6rem .9rem;
    border-radius: 999px;
    font-size: 1.15rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

/* Keep a little transform effect on hover for visual affordance */
.instagram-preview:hover img { transform: scale(1.02); transition: transform .18s ease; }

/* Social-specific grid: allow more vertical previews per row by using auto-fit
   with a small minimum width. Reduce gap so thumbnails sit closer together. */
.project-grid.social-grid {
    /* place items in a single horizontal row; allow scrolling when they overflow */
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(160px, 1fr);
    gap: 20px; /* 20px between videos as requested */
    align-items: start;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.project-grid.social-grid .instagram-preview {
    max-width: none; /* let grid column control sizing */
}

/* Utility to remove container side padding for specific sections */
.container--flush { padding-left: 0; padding-right: 0; }

/* Primary button for important CTAs */
.btn--primary, .btn.btn--primary {
    /* Primary color variant for buttons on light backgrounds */
    background: var(--charcoal);
    color: #fff;
}

.btn--inverted, .btn.btn--inverted {
    /* Inverted color variant for buttons on dark backgrounds */
    background: #ffffff;
    color: var(--charcoal);
    border: 1px solid var(--border-color);
}

/* Convenience hover grouping (preserve existing interaction) */
.btn:hover, .btn--primary:hover, .btn--inverted:hover { opacity: .95; }

/* Auto-invert primary buttons when placed inside a dark (charcoal) section — optional fallback during rollout */
.section-bg-charcoal .btn--primary,
.section-bg-charcoal .btn.btn--primary {
    background: #ffffff;
    color: var(--charcoal);
    border: 1px solid var(--border-color);
}

/* Project detail gallery (project pages) */
.project-gallery {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.9rem;
    margin-top: 1rem;
}
.project-gallery img {
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
    object-fit: cover;
    border-radius: 8px;
    display: block;
}
@media (max-width: 900px) {
    .project-gallery { grid-template-columns: 1fr; }
}

/* Make portfolio headings and nav styling consistent on subpages */
/* (Duplicate rules removed to avoid conflicts with fixed header sizing) */

/* ==============================
   Slideshow (project cards)
   ============================== */
.slideshow-container {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: #000;
}
.slideshow-img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    aspect-ratio: 16 / 9;
}
.slideshow-track {
    display: flex;
    width: 100%;
    will-change: transform;
}
.slideshow-slide {
    flex: 0 0 100%;
    min-width: 100%;
    display: block;
}
.slideshow-caption {
    position: absolute;
    left: 8px;
    right: 8px;
    bottom: 8px;
    background: rgba(0,0,0,0.7);
    color: #fff;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 0.9rem;
    max-width: calc(100% - 16px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.slideshow-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0,0,0,0.6);
    color: #fff;
    border: none;
    padding: 8px 10px;
    border-radius: 6px;
    cursor: pointer;
    z-index: 2;
}
.slideshow-prev { left: 8px; }
.slideshow-next { right: 8px; }
.slideshow-dots {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 12px; /* above caption */
    display: flex;
    gap: 6px;
    z-index: 3;
}
.slideshow-dot {
    width: 10px; height: 10px; border-radius: 50%; border: none; background: rgba(255,255,255,0.35); cursor: pointer; padding: 0;
}
.slideshow-dot.active { background: #fff; }

@media (max-width: 600px) {
    .slideshow-arrow { padding: 10px 12px; font-size: 1.1rem; }
    .slideshow-caption { font-size: 0.85rem; }
}

/* Collage: horizontal (wide) + vertical (tall) pairing
   - Use the HTML structure:
     <div class="collage-hv">
       <img src="..." class="collage-h" /> <!-- horizontal, wide -->
       <img src="..." class="collage-v" /> <!-- vertical, tall -->
     </div>
   - Adjust `--collage-height` to control desktop height. On mobile the images stack and show natural height.
*/
.collage-hv {
    --collage-height: 520px;
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--collage-gutter);
    align-items: stretch;
    width: 100%;
}
.collage-hv > * { overflow: hidden; display: block; }
.collage-hv img {
    width: 100%;
    height: var(--collage-height);
    object-fit: cover;
    display: block;
}
.collage-h { /* horizontal image — left column */ }
.collage-v { /* vertical image — right column */ }

@media (max-width: 900px) {
    .collage-hv {
        grid-template-columns: 1fr;
    }
    .collage-hv img { height: auto; }
}

/* Variant: 3x3 alternating HV collage (use class `collage-hv collage-3x3`) */
.collage-hv.collage-3x3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--collage-gutter);
    grid-auto-rows: minmax(160px, 260px);
}
.collage-hv.collage-3x3 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--radius);
    display: block;
}

/* Alternating 2-column collage: rows alternate H|V and V|H
   Use the markup order below so each row keeps the same height across both columns.
   - Row height is controlled by `--collage-row-height`. */
.collage-hv-rows {
    display: grid;
    grid-template-columns: 2fr 1fr; /* horizontal image gets wider column */
    gap: var(--collage-gutter);
    grid-auto-rows: var(--collage-row-height);
    width: 100%;
    align-items: stretch;
}
.collage-hv-rows img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--radius);
    display: block;
}
@media (max-width: 900px) {
    .collage-hv-rows { grid-template-columns: 1fr; }
    .collage-hv-rows img { height: auto; }
}

/* Utility: full-bleed image that spans the viewport width */
.img-full-bleed {
    display: block;
    width: 100vw;
    max-width: 100vw;
    margin-left: 50%;
    transform: translateX(-50%);
    object-fit: cover;
}

/* Utility for subpages to offset content below the fixed header
   Use on project page sections so local changes don't affect global header sizing */
.subpage-offset {
    padding-top: calc(var(--nav-offset));
}