/* ────────────────────────────────────────────────────────────
   RAVIKUMAR KASHI — SITE STYLESHEET
   Layout approach closely follows the reference site
   slim sticky left sidebar with a flat,
   left-aligned nested nav; right side is a continuous, edge-to
   -edge editorial image stream with no card chrome, no section
   headings, and no captions — proportions vary image to image.
   ──────────────────────────────────────────────────────────── */

/* ─── 1. FONTS ─── */
@font-face {
    font-family: 'dosis-regular';
    src: url('../fonts/dosis-regular.ttf') format('truetype');
    font-display: swap;
}

@font-face {
    font-family: 'proxima-nova-regular';
    src: url('../fonts/proxima-nova-regular.ttf') format('truetype');
}
/* ─── 2. CSS VARIABLES ─── */
:root {
    /* colour palette — white ground, grey text, ochre + blue-grey accents */
    --color-bg: #ffffff;
    --color-text: #4a4a4a;
    --color-text-muted: #8a8a8a;
    --color-text-soft: #ada79f;
    --color-text-black: #000000;
    --color-border: #ececec;
    --color-accent: #b9872a; /* yellow ochre */
    --color-accent-dark: #96701f;
    --color-accent-blue: #62808f; /* blue-grey */
    --color-active-bg: #f7f5f1;
    /* type */
    --font-heading: 'dosis-regular', 'Trebuchet MS', sans-serif;
    --font-body: 'proxima-nova-regular', 'Segoe UI', sans-serif;
    /* layout */
    --sidebar-width: 250px;
    --sidebar-width-lg: 270px;
    --gutter: 12px;
    --content-max: 1400px;
    --transition-fast: 160ms ease;
    --transition-medium: 260ms ease;
    /* scrollbar */
    --scrollbar-thumb: #e2e0dc;
    --scrollbar-thumb-hover: #d3d0ca;
}

/* ─── 3. RESET & BASE ─── */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    /* Firefox: thin, very light grey scrollbar, transparent track */
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb) transparent;
}

/* Chrome / Safari / Edge (WebKit/Blink): narrow, light grey thumb */
::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background-color: var(--scrollbar-thumb);
    border-radius: 8px;
    border: 2px solid transparent;
    background-clip: padding-box;
}

    ::-webkit-scrollbar-thumb:hover {
        background-color: var(--scrollbar-thumb-hover);
    }

/* Sidebar's own independently-scrolling nav gets the same light, thin bar */
.site-sidebar {
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb) transparent;
}

    .site-sidebar::-webkit-scrollbar {
        width: 3px;
    }

    .site-sidebar::-webkit-scrollbar-track {
        background: transparent;
    }

    .site-sidebar::-webkit-scrollbar-thumb {
        background-color: var(--scrollbar-thumb);
        border-radius: 8px;
    }

        .site-sidebar::-webkit-scrollbar-thumb:hover {
            background-color: var(--scrollbar-thumb-hover);
        }

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

body {
    font-family: var(--font-body);
    color: var(--color-text);
    background: var(--color-bg);
    font-size: 15px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

a {
    color: inherit;
    text-decoration: none;
}

img {
    display: block;
    max-width: 100%;
    height: auto;
}

ul, ol {
    list-style: none;
}

button {
    font-family: inherit;
    background: none;
    border: none;
    cursor: pointer;
    color: inherit;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 400;
    color: var(--color-text);
}

:focus-visible {
    outline: 2px solid var(--color-accent-blue);
    outline-offset: 2px;
}

.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
    padding: 0;
    margin: -1px;
}

.skip-link {
    position: absolute;
    left: -999px;
    top: 0;
    background: var(--color-accent);
    color: #fff;
    padding: 10px 18px;
    z-index: 1000;
    font-family: var(--font-heading);
}

    .skip-link:focus {
        left: 8px;
        top: 8px;
    }

/* ─── 4. APP SHELL / SIDEBAR ─── */
.site-shell {
    display: flex;
    min-height: 100vh;
}

.site-sidebar {
    width: var(--sidebar-width);
    flex-shrink: 0;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    padding: 40px 26px 22px;
    background: var(--color-bg);
    overflow-y: auto;
    z-index: 100;
}

.sidebar-brand {
    display: block;
    margin-bottom: 30px;
}

.sidebar-brand-name {
    font-family: var(--font-heading);
    font-size: 1.8rem;
    line-height: 1.28;
    color: var(--color-text-soft);
    font-weight: 400;
}

.sidebar-brand-tagline {
    display: block;
    font-family: var(--font-body);
    font-size: 1.16rem;
    color: var(--color-text-muted);
    margin-top: 4px;
}

/* ─── 5. NAVIGATION — flat, left-aligned, minimal chrome ─── */
.sidebar-nav {
    flex: 1 0 auto;
}

.nav-main {
    display: flex;
    flex-direction: column;
}

.nav-main-link,
.nav-main-toggle {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    text-align: left;
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: var(--color-text-muted);
    padding: 5px 0;
    transition: color var(--transition-fast);
}

    .nav-main-link:hover,
    .nav-main-toggle:hover {
        color: var(--color-accent-dark);
    }

    .nav-main-link[aria-current="page"],
    .nav-main-toggle.is-active {
        color: var(--color-accent);
    }

/* level 2 — left-aligned, indented under its parent */
.nav-sub {
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--transition-medium);
    text-align: left;
    padding-left: 14px;
}

    .nav-sub.is-open {
        max-height: 900px;
    }

.nav-sub-link,
.nav-sub-toggle {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    text-align: left;
    font-family: var(--font-body);
    font-size: 0.87rem;
    color: var(--color-text-muted);
    padding: 4px 0;
}

    .nav-sub-link:hover,
    .nav-sub-toggle:hover {
        color: var(--color-accent-dark);
    }

    .nav-sub-link[aria-current="page"],
    .nav-sub-toggle.is-active {
        color: var(--color-accent);
        font-weight: 500;
    }

/* level 3 — further left-aligned indent */
.nav-subsub {
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--transition-medium);
    text-align: left;
    padding-left: 14px;
}

    .nav-subsub.is-open {
        max-height: 500px;
    }

.nav-subsub-link {
    display: block;
    text-align: left;
    font-family: var(--font-body);
    font-size: 0.81rem;
    color: var(--color-text-muted);
    padding: 3px 0;
}

    .nav-subsub-link:hover {
        color: var(--color-accent-dark);
    }

    .nav-subsub-link[aria-current="page"] {
        color: var(--color-accent);
        font-weight: 500;
    }

/* sidebar groups sit with breathing room between them, like the reference */
.nav-main > li {
    margin-bottom: 3px;
}

    .nav-main > li.has-gap-before {
        /* margin-top: 22px;*/
    }

/* sidebar footer */
.sidebar-footer {
    margin-top: 26px;
    padding-top: 14px;
    font-size: 0.76rem;
    color: var(--color-text-soft);
}

.sidebar-social {
    display: flex;
    gap: 14px;
    margin-bottom: 12px;
}

    .sidebar-social a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: var(--color-text-muted);
        font-size: 1.05rem;
        transition: color var(--transition-fast);
    }

        .sidebar-social a:hover {
            color: var(--color-accent);
        }

.sidebar-copyright {
    line-height: 1.5;
}

    .sidebar-copyright strong {
        color: var(--color-text-muted);
        font-weight: 600;
    }

/* mobile nav toggle button (hidden on desktop) */
.nav-hamburger {
    display: none;
    position: fixed;
    top: 7px;
    right: 16px;
    z-index: 200;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 50px;
}

    .nav-hamburger .bar {
        display: block;
        width: 20px;
        height: 2px;
        background: var(--color-text);
        position: relative;
        transition: background var(--transition-fast);
    }

        .nav-hamburger .bar::before,
        .nav-hamburger .bar::after {
            content: "";
            position: absolute;
            left: 0;
            width: 20px;
            height: 2px;
            background: var(--color-text);
            transition: transform var(--transition-medium);
        }

        .nav-hamburger .bar::before {
            top: -6px;
        }

        .nav-hamburger .bar::after {
            top: 6px;
        }

    .nav-hamburger[aria-expanded="true"] .bar {
        background: transparent;
    }

        .nav-hamburger[aria-expanded="true"] .bar::before {
            transform: translateY(6px) rotate(45deg);
        }

        .nav-hamburger[aria-expanded="true"] .bar::after {
            transform: translateY(-6px) rotate(-45deg);
        }

.sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.35);
    z-index: 90;
}

/* ─── 6. MAIN CONTENT AREA ─── */
.site-main {
    margin-left: var(--sidebar-width);
    flex: 1 1 auto;
    min-width: 0;
    padding: 30px var(--gutter) 60px;
    max-width: var(--content-max);
}

/* ─── 7. EDITORIAL IMAGE STREAM (homepage + listing pages) ───
   A continuous masonry of mixed portrait / landscape / square
   images, edge to edge, no captions, no card chrome — matching
   the reference site's image-placement approach.               */
.gallery {
    --gallery-columns: 3; /* read by scripts/site.js - keep equal to column-count */
    column-count: 3;
    column-gap: var(--gutter);
}

.gallery-item {
    display: block;
    break-inside: avoid;
    margin-bottom: var(--gutter);
}

    .gallery-item img {
        width: 100%;
        height: auto;
        display: block;
        transition: opacity var(--transition-fast);
    }

    .gallery-item:hover img,
    .gallery-item:focus-visible img {
        opacity: 0.86;
    }

/* ─── 8. PROJECT / ITEM DETAIL PAGE ───
   One large framed hero image with overlaid prev/next circular
   controls, a quoted title, fact lines, and description copy —
   matching the supplied reference screenshot.                  */
.project-detail {
    max-width: 760px;
}

.project-frame {
    position: relative;
    background: #fff;
    border: 1px solid var(--color-border);
    padding: 8px;
    box-shadow: 0 6px 30px rgba(20, 18, 14, 0.08);
    margin-bottom: 22px;
}

    .project-frame img {
        width: 100%;
        display: block;
    }

/* Responsive 16:9 video embed, used in place of the static image
   for talks/lectures that have a recorded video (see HasVideo). */
.video-embed-wrap {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* 16:9 */
}

    .video-embed-wrap iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: 0;
        display: block;
    }

/* Prev/next photo arrows: bare "<" / ">" glyphs only — no circle,
   border or background — in a light, translucent grey. */
.frame-nav-btn {
    position: absolute;
    bottom: 18px;
    padding: 4px 6px;
    border: none;
    border-radius: 0;
    background: transparent;
    color: rgba(210, 210, 210, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    line-height: 1;
    text-shadow: 0 0 3px rgba(0, 0, 0, 0.35);
    transition: color var(--transition-fast);
}

    .frame-nav-btn:hover,
    .frame-nav-btn:focus-visible {
        background: transparent;
        color: rgba(235, 235, 235, 0.95);
    }

.frame-nav-prev {
    left: 18px;
}

.frame-nav-next {
    right: 18px;
}

.project-quote-title {
    font-family: var(--font-heading);
    font-size: 1.2rem;
    color: var(--color-accent-dark);
    font-weight: 600;
    margin-bottom: 8px;
}

.project-facts {
    font-size: 0.86rem;
    color: var(--color-accent-blue);
    font-style: italic;
    margin-bottom: 16px;
    line-height: 1.6;
    display: none; /*Temporary hidden*/
}

.project-description p {
    color: var(--color-text);
    margin-bottom: 14px;
}

.project-more {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin: 34px 0 40px;
    max-width: 900px;
}

    .project-more figure {
        margin: 0;
    }

    .project-more figcaption {
        margin-top: 8px;
        font-size: 0.78rem;
        color: var(--color-text-soft);
    }

.type-pager {
    display: flex;
    justify-content: space-between;
    padding-top: 18px;
    border-top: 1px solid var(--color-border);
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text-soft);
}

    .type-pager a {
        color: var(--color-text-muted);
        transition: color var(--transition-fast);
    }

        .type-pager a:hover {
            color: var(--color-accent);
        }

/* ─── 9. PROFILE / CONTACT ─── */
.profile-layout {
    display: flex;
    flex-direction: column;
    max-width: var(--content-max);
}

    .profile-layout .frame.profile-photo-full {
        width: 100%;
        overflow: hidden;
    }

        .profile-layout .frame.profile-photo-full img {
            width: 100%;
            height: auto;
            display: block;
        }

.profile-credits p {
    font-size: 0.8rem;
    color: var(--color-text-soft);
    text-align: right;
    margin: 3px 0px 15px 0px;
}

.profile-layout .profile-text {
    color: var(--color-text-muted);
}

    .profile-layout .profile-text p {
        margin-bottom: 14px;
    }

.contact-block {
    max-width: 520px;
}

    .contact-block a.email {
        display: inline-block;
        margin-top: 10px;
        font-family: var(--font-heading);
        font-size: 1.3rem;
        color: var(--color-accent);
        border-bottom: 1px solid var(--color-accent);
        padding-bottom: 2px;
    }

/* ─── Contact page ─── */
.contact-photo-panel {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    max-width: var(--content-max);
    margin-bottom: 40px;
    min-height: 350px;
}

    .contact-photo-panel img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        aspect-ratio: 1 / 1;
    }

.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    max-width: 1100px;
    align-items: start;
}

.contact-subheading {
    font-family: var(--font-heading);
    font-size: 1.3rem;
    color: var(--color-text);
    margin-bottom: 16px;
}

.contact-address {
    color: var(--color-text-muted);
    margin-bottom: 14px;
    line-height: 1.6;
}

.contact-info a.email {
    display: inline-block;
    font-family: var(--font-heading);
    font-size: 1.15rem;
    color: var(--color-accent);
    border-bottom: 1px solid var(--color-accent);
    padding-bottom: 2px;
    margin-bottom: 8px;
}

.contact-phone {
    color: var(--color-text-muted);
    margin-bottom: 22px;
}

    .contact-phone a {
        color: var(--color-text);
    }

.contact-map {
    margin: 24px 0px;
    border: 1px solid var(--color-border);
}

    .contact-map iframe {
        display: block;
    }

.sidebar-social.contact-social {
    margin: 0;
}

.form-row {
    margin-bottom: 18px;
    display: flex;
    flex-direction: column;
}

    .form-row label {
        font-size: 0.82rem;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: var(--color-text-muted);
        margin-bottom: 6px;
    }

.form-input {
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: var(--color-text);
    border: 1px solid var(--color-border);
    background: var(--color-bg);
    padding: 10px 12px;
    transition: border-color var(--transition-fast);
}

    .form-input:focus {
        border-color: var(--color-accent-blue);
        outline: none;
    }

.form-textarea {
    resize: vertical;
}

.form-error {
    color: #b6462f;
    font-size: 0.8rem;
    margin-top: 4px;
    display: block;
}

.form-submit {
    font-family: var(--font-heading);
    font-size: 0.95rem;
    color: #fff;
    background: var(--color-accent);
    border: none;
    padding: 11px 26px;
    cursor: pointer;
    transition: background var(--transition-fast);
}

    .form-submit:hover {
        background: var(--color-accent-dark);
    }

.form-thankyou {
    color: var(--color-text);
    font-size: 1rem;
    padding: 11px 14px;
    background: #e6f2e9;
    border: 1px solid #cfe4d5;
    border-radius: 6px;
}

/* Profile accordion — collapsible credential sections (Awards, Solo
   Shows, Teaching, Writing, etc.), built with plain <details> so it
   works with no JavaScript.                                        */
.profile-accordion {
    max-width: 900px;
    margin-top: 44px;
    border-top: 1px solid var(--color-border);
}

.pf-section {
    border-bottom: 1px solid var(--color-border);
}

    .pf-section summary {
        cursor: pointer;
        list-style: none;
        padding: 16px 4px;
        font-family: var(--font-heading);
        font-size: 1.1rem;
        color: var(--color-text);
        display: flex;
        align-items: center;
        justify-content: space-between;
        transition: color var(--transition-fast);
    }

        .pf-section summary::-webkit-details-marker {
            display: none;
        }

        .pf-section summary::after {
            content: "\002B";
            font-family: var(--font-body);
            font-size: 1.3rem;
            color: var(--color-accent);
            margin-left: 12px;
            flex-shrink: 0;
        }

    .pf-section[open] summary::after {
        content: "\2212";
    }

    .pf-section summary:hover {
        color: var(--color-accent-dark);
    }

.pf-list {
    padding: 2px 4px 20px;
}

    .pf-list li {
        display: flex;
        gap: 18px;
        padding: 7px 0;
        border-top: 1px solid var(--color-border);
        font-size: 0.92rem;
        color: var(--color-text-muted);
        line-height: 1.55;
    }

        .pf-list li:first-child {
            border-top: none;
        }

.pf-year {
    flex: 0 0 88px;
    color: var(--color-accent-blue);
    font-style: italic;
    font-size: 0.86rem;
}

.pf-text {
    flex: 1 1 auto;
}

/* ─── 10. ITEM GALLERY MODE (nav leaf → this page) ───
   Shows the item's own title and every one of its images as a
   small thumbnail grid — click one to open the full lightbox.  */
.item-heading {
    font-family: var(--font-heading);
    font-size: 1.9rem;
    color: var(--color-accent);
    font-weight: 400;
    margin-bottom: 22px;
}

/* Uniform 3-column grid, edge to edge: every image fills an
   identical square tile (same width and height), so each row is
   completely filled with no empty space. object-fit: cover keeps
   each photo's true proportions (never stretched or squashed),
   centred in its tile; only the overflow beyond the square is
   trimmed.                                                       */
.item-gallery-grid {
    --item-columns: 4; /* desktop: 4 per row (tablet/mobile overrides below) */
    --item-gap: 10px;
    display: grid;
    grid-template-columns: repeat(var(--item-columns), minmax(0, 1fr));
    gap: var(--item-gap);
    max-width: var(--content-max);
}

    .item-gallery-grid a {
        display: block;
        aspect-ratio: 1 / 1;
        overflow: hidden;
    }

    .item-gallery-grid img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        transition: opacity var(--transition-fast);
    }

    .item-gallery-grid a:hover img,
    .item-gallery-grid a:focus-visible img {
        opacity: 0.82;
    }

/* Facts + description shown below the images on the gallery page */
.item-gallery-text {
    max-width: var(--content-max);
    margin-top: 28px;
}

/* Rich-text (TinyMCE) markup inside the description block. The
   global reset removes list bullets, so restore them here only.  */
.project-description ul,
.project-description ol {
    padding-left: 20px;
    margin-bottom: 14px;
    color: var(--color-text);
}

.project-description ul {
    list-style: disc;
}

.project-description ol {
    list-style: decimal;
}

.project-description li {
    margin-bottom: 4px;
}

.project-description a {
    color: var(--color-accent);
    text-decoration: underline;
}

.project-description h1 {
    font-family: var(--font-heading);
    font-size: 1.6rem;
    color: var(--color-accent);
    font-weight: 400;
}

    .project-description h1::before {
        content: "'";
    }

    .project-description h1::after {
        content: "'";
    }

.project-description h2 {
    font-size: 1.2rem;
    color: var(--color-text-black);
    margin-bottom: 10px;
}

.project-description h3 {
    font-size: 1.1rem;
    color: var(--color-accent);
    margin-bottom: 5px;
}

.project-description h4 {
    font-size: 1rem;
    margin-bottom: 10px;
}

.project-description h5 {
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.8;
    margin: 10px 0px;
}

.project-description h6 {
    border-bottom: 1px solid var(--scrollbar-thumb);
    margin-bottom: 20px;
}

.project-description strong {
    font-weight: 600;
}

/* ─── 12. MOBILE FIXED HEADER + MOBILE FOOTER ───
   Hidden on desktop/tablet; switched on in the max-width: 767px
   query. The header reuses the sidebar brand classes so the type
   matches the existing branding exactly.                         */
.mobile-header,
.mobile-footer {
    display: none;
}

.mobile-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 80; /* above page content, below backdrop (90), drawer (150) and hamburger (200) */
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
    padding: 5px 76px 5px 14px;
}

.mobile-brand {
    display: block;
}

    .mobile-brand .sidebar-brand-name {
        display: block;
        font-size: 1.3rem;
        line-height: 1.25;
    }

    .mobile-brand .sidebar-brand-tagline {
        font-size: 0.95rem;
        line-height: 1.3;
        margin-top: 2px;
    }

.mobile-footer {
    margin-top: 40px;
    padding-top: 16px;
    border-top: 1px solid var(--color-border);
    font-size: 0.76rem;
    color: var(--color-text-soft);
    overflow: hidden; /* clips the separator that starts each wrapped line */
}

/* Every link carries a leading "|" separator; the list is shifted left
   by exactly one separator width, so the separator at the start of
   each line (including a wrapped second line) is clipped away.        */
.mobile-footer-nav {
    display: flex;
    flex-wrap: wrap;
    row-gap: 6px;
    margin: 0 0 14px -17px;
}

    .mobile-footer-nav a {
        font-size: 0.8rem;
        color: var(--color-text-muted);
        transition: color var(--transition-fast);
    }

        .mobile-footer-nav a::before {
            content: "|";
            display: inline-block;
            width: 17px;
            text-align: center;
            color: var(--color-text-soft);
        }

        .mobile-footer-nav a:hover {
            color: var(--color-accent);
        }

.mobile-footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--color-border);
}

.mobile-footer-copy {
    flex: 1 1 auto;
    min-width: 0;
    line-height: 1.5;
}

    .mobile-footer-copy strong {
        color: var(--color-text-muted);
        font-weight: 600;
    }

.mobile-footer-social {
    display: flex;
    gap: 14px;
    flex-shrink: 0;
}

    .mobile-footer-social a {
        display: inline-flex;
        align-items: center;
        color: var(--color-text-muted);
        font-size: 1.05rem;
        transition: color var(--transition-fast);
    }

        .mobile-footer-social a:hover {
            color: var(--color-accent);
        }

/* ─── 11. LIGHTBOX MODE (single image, full available width) ─── */
.project-detail {
    max-width: var(--content-max);
}

.project-frame {
    margin-bottom: 1rem;
}

.back-to-gallery {
    display: inline-block;
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin-bottom: 18px;
    transition: color var(--transition-fast);
}

    .back-to-gallery:hover {
        color: var(--color-accent);
    }

    .back-to-gallery::before {
        content: "\2190";
        margin-right: 6px;
    }

/*Media query*/
/* Large desktop and laptops*/
@media (min-width: 1200px) {
    .pnl-lightbox {
        margin: 0 1rem;
    }
}

/* Landscape tablets and medium desktops*/
@media (min-width: 992px) and (max-width: 1199px) {
    .pnl-lightbox {
        margin: 0 1rem;
    }
}
/*Media query*/


/* leaf marker colour, to read closer to the supplied reference
   screenshots (warm orange/red accents throughout) */

.nav-subsub-link {
    position: relative;
    padding-left: 14px;
}

    .nav-subsub-link::before {
        content: "\276F";
        position: absolute;
        left: 0;
        font-size: 0.62rem;
        color: var(--color-accent);
    }

    .nav-subsub-link[aria-current="page"]::before {
        color: var(--color-accent-dark);
    }

/*Media query*/
/* Large desktop and laptops*/
@media (min-width: 1200px) {
    :root {
        --sidebar-width: var(--sidebar-width-lg);
    }
}

/* Landscape tablets and medium desktops*/
@media (min-width: 992px) and (max-width: 1199px) {
    .gallery {
        --gallery-columns: 3;
        column-count: 3;
    }

    .item-gallery-grid {
        --item-columns: 4;
    }
}

/* medium tablets and medium laptop*/
@media (min-width: 768px) and (max-width: 991px) {
    :root {
        --sidebar-width: 220px;
        --gutter: 10px;
    }

    .gallery {
        --gallery-columns: 2;
        column-count: 2;
    }

    .item-gallery-grid {
        --item-columns: 3;
        --item-gap: 10px;
    }
}

/* portrait tablets and small desktops*/
@media (max-width: 767px) {
    .site-sidebar {
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        width: min(82vw, 300px);
        transform: translateX(-100%);
        transition: transform var(--transition-medium);
        box-shadow: 0 0 40px rgba(0,0,0,0.15);
        z-index: 150;
    }

        .site-sidebar.is-open {
            transform: translateX(0);
        }

    .site-main {
        margin-left: 0;
        padding: 84px 14px 18px;
    }

    .nav-hamburger {
        display: flex;
    }

    /* fixed branding bar + footer (mobile only) */
    html {
        scroll-padding-top: 84px;
    }

    .mobile-header,
    .mobile-footer {
        display: block;
    }

    .sidebar-backdrop.is-visible {
        display: block;
    }

    .gallery {
        --gallery-columns: 2;
        column-count: 2;
        column-gap: 8px;
    }

    .gallery-item {
        margin-bottom: 8px;
    }

    .type-pager {
        font-size: 0.72rem;
    }

    .item-gallery-grid {
        --item-columns: 3;
        --item-gap: 6px;
    }

    .pf-list li {
        flex-direction: column;
        gap: 2px;
    }

    .pf-year {
        flex: none;
    }

    .contact-photo-panel {
        grid-template-columns: repeat(3, 1fr);
    }

    .contact-grid {
        grid-template-columns: 1fr;
        gap: 36px;
    }
}

/* Mobile and small Phones*/
@media (max-width: 480px) {
    .gallery {
        --gallery-columns: 1;
        column-count: 1;
    }

    .sidebar-brand-name {
        font-size: 1.3rem;
    }

    .sidebar-brand-tagline {
        font-size: 0.95rem;
    }

    .project-quote-title {
        font-size: 1.05rem;
    }
}
/*Media query*/

/* ─── 13. FOOTER VISIT COUNT (sidebar + mobile footer) ─── */
.site-visits {
    display: block;
    margin-top: 6px;
    font-size: 0.68rem;
    color: var(--color-text-soft);
}

/* ─── 14. GALLERY IN SEQUENCE, BALANCED (homepage + listing pages) ───
   CSS columns fill top-to-bottom (1, 13, 25 across the first row).
   scripts/site.js places the images in their defined sequence, each
   into the currently shortest column (first row 1, 2, 3), so rows read
   in order; the last image of each column is fitted so the columns end
   on the same line. Same masonry look, column count and gaps. Without
   JavaScript the CSS columns above are used.                          */
.gallery.is-ordered {
    column-count: auto;
    display: flex;
    align-items: flex-start;
}

.gallery-col {
    flex: 1 1 0;
    min-width: 0;
}

/* last two images of a column, fitted by scripts/site.js so all columns
   end on the same line (height set in --fit-height, max 35% change) */
.gallery-item.is-fitted img {
    height: var(--fit-height);
    object-fit: cover;
    object-position: center;
}

/* ─── 15. BOOKS AND ARTICLES GALLERY (detail.aspx?type=writing only) ───
   Images show at 40% of their own size, in their real proportions -
   no square tile, no cropping. scripts/site.js passes each image's
   real width in --natural-width. Never wider than the screen.
   Click-to-enlarge is unchanged. Other menus keep the grid above.   */
.item-gallery-grid.item-gallery-writing {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
}

    .item-gallery-grid.item-gallery-writing a {
        flex: 0 1 auto;
        max-width: 100%;
        aspect-ratio: auto;
        overflow: visible;
    }

    .item-gallery-grid.item-gallery-writing img {
        width: auto;
        height: auto;
        max-width: 100%;
        object-fit: initial;
    }

        .item-gallery-grid.item-gallery-writing img.is-sized {
            width: calc(var(--natural-width) * 0.6);
        }

    /* while the script reads the real size (no flash at full size) */
    .item-gallery-grid.item-gallery-writing.is-sizing img:not(.is-sized) {
        visibility: hidden;
    }

/* ─── 16. TALKS (detail.aspx?type=writing only) ───
   Images show at 40% of their own size, in their real proportions -
   no square tile, no cropping. scripts/site.js passes each image's
   real width in --natural-width. Never wider than the screen.
   Click-to-enlarge is unchanged. Other menus keep the grid above.   */

.item-gallery-grid.item-gallery-talks {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
}

    .item-gallery-grid.item-gallery-talks a {
        flex: 0 1 auto;
        max-width: 100%;
        aspect-ratio: auto;
        overflow: visible;
    }

    .item-gallery-grid.item-gallery-talks img {
        width: auto;
        height: auto;
        max-width: 100%;
        object-fit: initial;
    }

        .item-gallery-grid.item-gallery-talks img.is-sized {
            width: calc(var(--natural-width) * 0.6);
        }

    /* while the script reads the real size (no flash at full size) */
    .item-gallery-grid.item-gallery-talks.is-sizing img:not(.is-sized) {
        visibility: hidden;
    }

/* ─── 17. CONTACT FORM (contact.aspx) ───
   Uses the existing form styles (.form-row, .form-input, .form-error,
   .form-submit, .form-thankyou); these rules add only the required
   mark, the form message box and the CAPTCHA row.                  */
.contact-form {
    margin-bottom: 24px;
}

    .contact-form select.form-input {
        cursor: pointer;
    }

.form-required {
    color: var(--color-accent);
}

.form-alert {
    border-left: 3px solid #b6462f;
    background: #fbf3f1;
    color: #b6462f;
    font-size: 0.86rem;
    padding: 10px 12px;
    margin-bottom: 18px;
}

.captcha-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.captcha-code {
    display: inline-block;
    min-width: 112px;
    padding: 8px 14px;
    background: var(--color-active-bg);
    border: 1px dashed var(--color-text-soft);
    font-family: var(--font-heading);
    font-size: 1.25rem;
    letter-spacing: 0.3em;
    text-align: center;
    color: var(--color-accent-dark);
    user-select: none;
}

.captcha-refresh {
    color: var(--color-text-muted);
    font-size: 1.05rem;
    padding: 4px;
    transition: color var(--transition-fast);
}

    .captcha-refresh:hover,
    .captcha-refresh:focus-visible {
        color: var(--color-accent);
    }

.form-input.captcha-input {
    width: 112px;
    padding: 11px 14px;
    background: var(--color-active-bg);
    border: 1px dashed var(--color-text-soft);
    font-family: var(--font-heading);
    font-size: 1.25rem;
    letter-spacing: 0.3em;
    text-align: center;
    color: var(--color-accent-dark);
}