/* ==========================================================
   ShoJen.ART Gallery
   gallery.css
   Part 1 — Foundation, Typography, Layout & Navigation
   ========================================================== */

/* ---------- CSS Reset ---------- */

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

html {
    font-size: 16px;
    scroll-behavior: smooth;
}

body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
ul,
ol {
    margin: 0;
    padding: 0;
}

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

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

button,
input,
textarea {
    font: inherit;
}

ul {
    list-style: none;
}

/* ---------- Design System ---------- */

:root {

    /* Colours */

    --colour-paper: #faf8f4;
    --colour-white: #ffffff;

    --colour-ink: #222222;
    --colour-charcoal: #444444;

    --colour-grey-100: #f3f3f3;
    --colour-grey-200: #e8e8e8;
    --colour-grey-300: #d7d7d7;

    --colour-accent: #9a3c35;
    --colour-accent-dark: #7d2d28;

    /* Typography */

    --font-heading:
        "Cormorant Garamond",
        Georgia,
        serif;

    --font-body:
        Inter,
        "Segoe UI",
        Helvetica,
        Arial,
        sans-serif;

    /* Layout */

    --container-width: 1200px;

    --space-xs: .50rem;
    --space-sm: .75rem;
    --space-md: 1.50rem;
    --space-lg: 3rem;
    --space-xl: 5rem;

    --radius: .5rem;

    --shadow:

        0 8px 30px rgba(0,0,0,.08);

    --transition:

        .25s ease;

}

/* ---------- Base ---------- */

body {

    background: var(--colour-paper);

    color: var(--colour-ink);

    font-family: var(--font-body);

    line-height: 1.7;

    -webkit-font-smoothing: antialiased;

    text-rendering: optimizeLegibility;

}

/* ---------- Typography ---------- */

h1,
h2,
h3,
h4 {

    font-family: var(--font-heading);

    font-weight: 500;

    line-height: 1.15;

    letter-spacing: .02em;

}

h1 {

    font-size: clamp(2rem,4vw,3rem);

}

h2 {

    font-size: clamp(2rem,3vw,2.8rem);

    margin-bottom: .5rem;

}

h3 {

    font-size: 1.35rem;

    margin-top: .8rem;

}

p {

    margin-bottom: 1rem;

    color: var(--colour-charcoal);

}

.note {

    font-style: italic;

    color: #666;

}

/* ---------- Containers ---------- */

.container {

    width:

        min(
            92%,
            var(--container-width)
        );

    margin-inline: auto;

}

/* ---------- Header ---------- */

.site-header {

    position: sticky;

    top: 0;

    z-index: 100;

    background: rgba(250,248,244,.96);

    backdrop-filter: blur(10px);

    border-bottom: 1px solid var(--colour-grey-200);

}

.site-header .container {

    display: flex;

    justify-content: space-between;

    align-items: center;

    min-height: 84px;

}

/* ---------- Logo ---------- */

.logo {

    display: inline-flex;

    align-items: center;

}

.logo h1 {

    color: var(--colour-ink);

    transition: color var(--transition);

}

.logo:hover h1 {

    color: var(--colour-accent);

}

/* ---------- Navigation ---------- */

nav ul {

    display: flex;

    gap: 2rem;

    align-items: center;

}

nav a {

    position: relative;

    font-size: .95rem;

    font-weight: 500;

    letter-spacing: .08em;

    text-transform: uppercase;

    color: var(--colour-charcoal);

    transition:

        color var(--transition);

}

nav a:hover {

    color: var(--colour-accent);

}

nav a::after {

    content: "";

    position: absolute;

    left: 0;

    bottom: -.45rem;

    width: 0;

    height: 2px;

    background: var(--colour-accent);

    transition: width .25s;

}

nav a:hover::after,

nav a.active::after {

    width: 100%;

}

nav a.active {

    color: var(--colour-accent);

}

/* ---------- Hero ---------- */

.hero {

    padding:

        5rem 0
        4rem;

    text-align: center;

}

.hero h2 {

    margin-bottom: 1rem;

}

.hero p {

    max-width: 700px;

    margin-inline: auto;

    font-size: 1.05rem;

}

.hero .note {

    margin-top: 2rem;

    font-size: .95rem;

}

/* ---------- Utility ---------- */

.visually-hidden {

    position: absolute;

    width: 1px;

    height: 1px;

    overflow: hidden;

    clip: rect(0 0 0 0);

    white-space: nowrap;

}

/* ---------- Focus ---------- */

a:focus-visible,
button:focus-visible {

    outline: 3px solid var(--colour-accent);

    outline-offset: 4px;

}


/* ==========================================================
   ShoJen.ART Gallery
   gallery.css
   Part 3 — Lightbox, Responsive Layout, Accessibility & Print
   ========================================================== */

/* ==========================================================
   Native Dialog Lightbox
   ========================================================== */

dialog#lightbox {

    padding: 0;

    border: none;

    border-radius: 1rem;

    background: transparent;

    overflow: hidden;

    max-width: min(92vw, 1400px);

    max-height: 92vh;

}

dialog::backdrop {

    background: rgba(0,0,0,.82);

    backdrop-filter: blur(6px);

}

#lightbox-image {

    display: block;

    max-width: 92vw;

    max-height: 82vh;

    width: auto;

    height: auto;

    object-fit: contain;

    background: #000;

}

#lightbox-caption {

    background: #fff;

    padding: 1rem 1.5rem;

    text-align: center;

    color: var(--colour-charcoal);

    font-size: .95rem;

}

.close {

    position: absolute;

    top: .75rem;

    right: .75rem;

    width: 44px;

    height: 44px;

    border: none;

    border-radius: 50%;

    background: rgba(255,255,255,.92);

    color: #222;

    font-size: 1.8rem;

    cursor: pointer;

    transition:
        background .25s,
        transform .2s;

}

.close:hover {

    background: white;

    transform: scale(1.08);

}

/* ==========================================================
   Loading State
   ========================================================== */

.artwork img {

    background: linear-gradient(
        90deg,
        #efefef,
        #fafafa,
        #efefef
    );

}

/* ==========================================================
   Responsive Navigation
   ========================================================== */

@media (max-width: 900px) {

    .site-header .container {

        flex-direction: column;

        gap: 1rem;

        padding:
            1rem 0;

    }

    nav ul {

        gap: 1.25rem;

        flex-wrap: wrap;

        justify-content: center;

    }

}

/* ==========================================================
   Tablet Gallery
   ========================================================== */

@media (max-width: 900px) {

    .gallery-grid {

        grid-template-columns:
            repeat(
                auto-fit,
                minmax(220px,1fr)
            );

    }

}

/* ==========================================================
   Mobile
   ========================================================== */

@media (max-width: 640px) {

    html {

        font-size: 15px;

    }

    .hero {

        padding:
            3rem
            0;

    }

    .gallery-grid {

        grid-template-columns: 1fr;

        gap: 1.5rem;

    }

    .artwork {

        max-width: 520px;

        margin-inline: auto;

    }

    .button {

        width: 100%;

    }

    #lightbox-image {

        max-width: 100vw;

        max-height: 70vh;

    }

}

/* ==========================================================
   Large Screens
   ========================================================== */

@media (min-width: 1400px) {

    .gallery-grid {

        grid-template-columns:
            repeat(4,1fr);

    }

}

/* ==========================================================
   Reduced Motion
   ========================================================== */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {

        animation: none !important;

        transition: none !important;

        scroll-behavior: auto !important;

    }

}

/* ==========================================================
   Keyboard Accessibility
   ========================================================== */

dialog:focus {

    outline: none;

}

.artwork a:focus-visible {

    border-radius: .5rem;

}

.close:focus-visible {

    outline: 3px solid white;

    outline-offset: 4px;

}

/* ==========================================================
   Selection
   ========================================================== */

::selection {

    background: var(--colour-accent);

    color: white;

}

/* ==========================================================
   Scrollbar (WebKit)
   ========================================================== */

::-webkit-scrollbar {

    width: 12px;

}

::-webkit-scrollbar-track {

    background: #efefef;

}

::-webkit-scrollbar-thumb {

    background: #999;

    border-radius: 10px;

}

::-webkit-scrollbar-thumb:hover {

    background: #666;

}

/* ==========================================================
   Print
   ========================================================== */

@media print {

    body {

        background: white;

        color: black;

    }

    .site-header,
    .gallery-cta,
    .site-footer,
    dialog {

        display: none !important;

    }

    .gallery-grid {

        display: block;

    }

    .artwork {

        page-break-inside: avoid;

        margin-bottom: 2rem;

        box-shadow: none;

        border: 1px solid #ccc;

    }

}

/* ==========================================================
   Optional Dark Theme
   Enable by adding:
   <body class="dark">
   ========================================================== */

body.dark {

    background: #161616;

    color: #ececec;

}

body.dark .site-header {

    background: rgba(25,25,25,.94);

    border-color: #333;

}

body.dark .artwork {

    background: #242424;

}

body.dark .artwork h3 {

    color: white;

}

body.dark .artwork p {

    color: #cccccc;

}

body.dark .gallery-cta {

    background: #202020;

    border-color: #333;

}

body.dark .site-footer {

    background: black;

}

/* ==========================================================
   End of gallery.css
   ========================================================== */
   
/*
enhanced css
*/

.nav {

    position:absolute;

    top:50%;

    transform:translateY(-50%);

    width:52px;

    height:52px;

    border:none;

    border-radius:50%;

    background:rgba(255,255,255,.92);

    cursor:pointer;

    font-size:1.5rem;

}

.prev{

    left:20px;

}

.next{

    right:20px;

}

.lightbox-footer{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:1rem 1.5rem;

    background:white;

}

#lightbox-counter{

    font-size:.9rem;

    color:#666;

}

/*
add this to end of css
*/

/* ============================================
   Lightbox Stage
============================================ */

.lightbox-stage{

    display:flex;

    align-items:center;

    justify-content:center;

    min-height:65vh;

    overflow:hidden;

    background:#111;

}

#lightbox-image{

    opacity:1;

    transition:
        opacity .22s ease,
        transform .22s ease;

    touch-action:none;

}

#lightbox-image.loading{

    opacity:.2;

    transform:scale(.97);

}

#lightbox-image.visible{

    opacity:1;

    transform:scale(1);

}

.nav{

    transition:
        background .2s,
        transform .2s;

}

.nav:hover{

    transform:
        translateY(-50%)
        scale(1.08);

}

.nav:active{

    transform:
        translateY(-50%)
        scale(.96);

}

.close{

    z-index:10;

}

.lightbox-footer{

    user-select:none;

}


/* ==========================================================
   HOME PAGE
========================================================== */

.hero-home {
    text-align: center;
}

.hero-home .lead {
    font-size: 1.2rem;
    letter-spacing: .05em;
    margin-bottom: 1.5rem;
    opacity: .9;
}

.hero-actions {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 2rem;
}

.content-section {
    padding: 5rem 0;
}

.content-section.alt {
    background: #fafafa;
}

.two-column {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 3rem;
    align-items: start;
}

.profile-image img {
    width: 100%;
    display: block;
    border-radius: 10px;
    box-shadow: 0 12px 30px rgba(0,0,0,.15);
}

.profile-content h2,
.content-section h2 {
    margin-top: 0;
}

.profile-content p,
.content-section p {
    line-height: 1.8;
    margin-bottom: 1.25rem;
}

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(240px,1fr));
    gap: 2rem;
    margin-top: 2rem;
}

.info-card {
    background: #fff;
    padding: 2rem;
    border-radius: 10px;
    box-shadow: 0 6px 20px rgba(0,0,0,.08);
    transition: transform .25s ease,
                box-shadow .25s ease;
}

.info-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 30px rgba(0,0,0,.15);
}

.info-card h3 {
    margin-top: 0;
}

.callout {
    margin-top: 3rem;
    padding: 2.5rem;
    background: #ffffff;
    border-left: 5px solid #b48b3c;
    border-radius: 8px;
    box-shadow: 0 8px 20px rgba(0,0,0,.08);
}

.button-secondary {
    background: transparent;
    border: 2px solid currentColor;
}

.button-secondary:hover {
    opacity: .85;
}

@media (max-width:900px) {

    .two-column {
        grid-template-columns: 1fr;
    }

    .profile-image {
        max-width: 300px;
        margin: 0 auto;
    }

}

@media (max-width:700px) {

    .hero-actions {
        flex-direction: column;
        align-items: center;
    }

    .hero-actions .button {
        width: 100%;
        max-width: 320px;
        text-align: center;
    }

}