/* ==========================================================================
   shirishdeshpande.art — single stylesheet
   --------------------------------------------------------------------------
   Layers: tokens → reset → base → layout → components → utilities
   Baseline: features are "widely available" except where noted below
   (text-wrap: balance 2024-05 — guarded/progressive).
   Dark-only theme. No Tailwind. No JS beyond the mobile-menu helper.
   ========================================================================== */

@layer tokens, reset, base, layout, components, utilities;

/* ==========================================================================
   TOKENS
   ========================================================================== */
@layer tokens {
    :root {
        /* Verdant (dark) — sampled from the original thematic palette studies
           #B3DCA0 and #76B972. The site is dark-only. */
        --surface: oklch(0.2214 0.0155 149.07);
        --surface-dim: oklch(0.1839 0.0127 145.04);
        --surface-container-lowest: oklch(0.2018 0.0124 145.10);
        --surface-container-low: oklch(0.2508 0.0165 145.06);
        --surface-container-high: oklch(0.2785 0.0183 145.06);
        --surface-container-highest: oklch(0.3134 0.0200 145.08);
        --on-surface: oklch(0.9342 0.0209 140.90);
        --on-surface-variant: oklch(0.8181 0.0299 145.30);
        --primary: oklch(0.8075 0.1132 146.17);
        --primary-dim: oklch(0.7342 0.1118 146.07);
        --on-primary: oklch(0.2174 0.0412 146.27);
        --primary-container: oklch(0.3844 0.0662 146.76);
        --on-primary-container: oklch(0.9064 0.0571 139.60);
        --tertiary: oklch(0.7986 0.0687 141.67);
        --outline: oklch(0.6828 0.0381 147.68);
        --outline-variant: oklch(0.3929 0.0269 149.09);
        --blue: oklch(0.32 0.07 270.55);

        color-scheme: dark;

        /* type */
        --font-sans: "Manrope", sans-serif;
        --font-serif: "Newsreader", serif;

        /* space + measure */
        --space-1: 0.25rem;
        --space-2: 0.5rem;
        --space-3: 0.75rem;
        --space-4: 1rem;
        --space-6: 1.5rem;
        --space-8: 2rem;
        --space-10: 2.5rem;
        --space-12: 3rem;
        --space-16: 4rem;
        --space-24: 6rem;
        --space-32: 8rem;
        --wrap-pad: 3rem;
        --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.05);
    }

    /* phones: the 3rem gutter eats too much of the viewport */
    @media (width < 30rem) {
        :root { --wrap-pad: 1.5rem; }
    }

}

/* ==========================================================================
   RESET — zero-specificity so components always win
   ========================================================================== */
@layer reset {
    :where(*, *::before, *::after) { box-sizing: border-box; }

    :where(body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ul, ol, fieldset) {
        margin: 0;
    }

    :where(h1, h2, h3, h4, h5, h6) { font-size: inherit; font-weight: inherit; }

    :where(ul, ol) { padding: 0; }

    :where(ul[role="list"], ol[role="list"]) { list-style: none; }

    :where(img, svg, video, canvas) { display: block; max-inline-size: 100%; }

    :where(img, video) { block-size: auto; }

    :where(button, input, select, textarea) { font: inherit; color: inherit; }

    :where(button) { background: none; border: 0; cursor: pointer; }

    :where(a) { color: inherit; text-decoration: none; }

    :where(summary) { cursor: pointer; }

    :where(html) {
        -webkit-text-size-adjust: 100%;
        scroll-behavior: smooth;
    }
}

/* ==========================================================================
   BASE — fonts, document defaults, typography
   ========================================================================== */
@layer base {
    /* ---- text fonts (Latin subsets) ---- */
    @font-face {
        font-family: "Manrope";
        font-style: normal;
        font-weight: 200 800;
        font-display: swap;
        src: url(./fonts/manrope-latin.woff2) format("woff2");
        unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }
    @font-face {
        font-family: "Newsreader";
        font-style: italic;
        font-weight: 200 800;
        font-display: swap;
        src: url(./fonts/newsreader-italic-latin.woff2) format("woff2");
        unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }
    @font-face {
        font-family: "Newsreader";
        font-style: normal;
        font-weight: 200 800;
        font-display: swap;
        src: url(./fonts/newsreader-latin.woff2) format("woff2");
        unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }

    /* ---- icon font (subset: menu, close, arrows, shopping_bag, …) ---- */
    @font-face {
        font-family: "Material Symbols Outlined";
        font-style: normal;
        font-weight: 100 700;
        font-display: swap;
        src: url(./fonts/material-symbols.woff2) format("woff2");
    }

    body {
        font-family: var(--font-sans);
        font-size: 1rem;
        line-height: 1.5;
        background-color: var(--surface);
        color: var(--on-surface);
    }

    h1, h2, h3, h4 {
        font-family: var(--font-serif);
        text-wrap: balance;
    }
    h2 { font-size: 2.25rem; line-height: 1.25; }
    h3 { font-size: 1.25rem; line-height: 1.75rem; }

    :where(a, button, summary):focus-visible {
        outline: 2px solid var(--primary);
        outline-offset: 3px;
    }

    ::selection {
        background-color: var(--primary);
        color: var(--on-primary);
    }

    /* icon font utility (used on every page) */
    .material-symbols-outlined {
        font-family: "Material Symbols Outlined";
        font-weight: normal;
        font-style: normal;
        font-size: 1.5rem;
        line-height: 1;
        letter-spacing: normal;
        text-transform: none;
        display: inline-block;
        white-space: nowrap;
        word-wrap: normal;
        direction: ltr;
        -webkit-font-feature-settings: "liga";
        -webkit-font-smoothing: antialiased;
        font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
    }

    @supports (scrollbar-color: auto) {
        :root {
            scrollbar-color: color-mix(in oklab, var(--outline) 60%, transparent) var(--surface);
        }
    }
}

/* ==========================================================================
   LAYOUT — wrappers, sections, page chrome
   ========================================================================== */
@layer layout {
    .wrap {
        --wrap-max: 96rem;
        inline-size: min(100% - 2 * var(--wrap-pad), var(--wrap-max));
        margin-inline: auto;
    }
    .wrap--narrow { --wrap-max: 56rem; }
    .wrap--page { --wrap-max: 48rem; }

    .section { padding-block: var(--space-24); }
    .section--tall { padding-block: var(--space-32); }
    .section--tail { padding-block: 0 var(--space-32); }
    .section--tint { background-color: var(--surface-container-low); }

    /* ---- sticky top navigation ---- */
    .site-nav {
        position: sticky;
        inset-block-start: 0;
        z-index: 50;
        background-color: var(--surface);
    }
    /* elevate the nav while the native menu is open */
    .site-nav:has(.mobile-menu[open]) {
        box-shadow: 0 1px 0 color-mix(in oklab, var(--outline-variant) 30%, transparent);
    }
    .nav-inner {
        display: flex;
        align-items: center;
        gap: var(--space-10);
        padding-block: var(--space-10);
    }
    .nav-actions { display: flex; align-items: center; gap: var(--space-10); }
    .brand {
        font-family: var(--font-serif);
        font-size: 1.5rem;
        line-height: 2rem;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        margin-inline-end: auto;
    }
    .nav-links {
        display: none;
        align-items: center;
        gap: var(--space-10);
    }
    @media (width >= 48rem) {
        .nav-links { display: flex; }
    }
    .nav-link {
        font-family: var(--font-serif);
        letter-spacing: -0.025em;
        opacity: 0.6;
        transition: opacity 150ms;

        &:hover { opacity: 1; }

        &[aria-current="page"] {
            opacity: 1;
            color: var(--primary);
            font-weight: 700;
            border-block-end: 2px solid var(--primary);
            padding-block-end: var(--space-1);
        }
    }

    /* ---- mobile menu (native details/summary, no JS) ---- */
    .mobile-menu { display: block; }
    @media (width >= 48rem) {
        .mobile-menu { display: none; }
    }
    .mobile-menu summary {
        list-style: none;
        color: var(--primary);
        transition: scale 100ms;
    }
    .mobile-menu summary:active { scale: 0.95; }
    .mobile-menu summary::-webkit-details-marker { display: none; }
    .mobile-menu .close-icon { display: none; }
    .mobile-menu[open] .menu-icon { display: none; }
    .mobile-menu[open] .close-icon { display: block; }
    .mobile-menu-panel {
        position: absolute;
        inset-inline: 0;
        inset-block-start: 100%;
        display: grid;
        gap: var(--space-2);
        padding: var(--space-8) var(--wrap-pad);
        background-color: var(--surface);
        border-block-start: 1px solid color-mix(in oklab, var(--outline-variant) 20%, transparent);
    }
    .mobile-link {
        font-family: var(--font-serif);
        font-size: 1.125rem;
        line-height: 1.75rem;
        letter-spacing: -0.025em;
        padding-block: var(--space-2);
        opacity: 0.6;
    }
    .mobile-link[aria-current="page"] { opacity: 1; color: var(--primary); font-weight: 700; }
    .mobile-menu-panel .btn { justify-self: start; margin-block-start: var(--space-4); }

    /* ---- footer ---- */
    .site-footer { background-color: var(--surface-container-high); }
    .foot-inner {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-8);
        padding-block: var(--space-16);
    }
    .foot-brand {
        font-family: var(--font-serif);
        font-size: 1.25rem;
        line-height: 1.75rem;
    }
    .copyright { color: var(--primary); opacity: 0.6; font-size: 0.875rem; line-height: 1.25rem; }
    .foot-links { display: flex; gap: var(--space-12); font-size: 0.875rem; line-height: 1.25rem; }
    .foot-link {
        opacity: 0.7;
        text-decoration: underline;
        text-decoration-thickness: 1px;
        text-underline-offset: 4px;
        transition: color 200ms, opacity 200ms;
    }
    .foot-link:hover { opacity: 1; color: var(--primary); }
    @media (width >= 48rem) {
        .foot-inner { flex-direction: row; }
    }

    /* ---- generic page head + article shells ---- */
    .page-head { padding-block: var(--space-24) var(--space-16); }
    #page-title {
        font-family: var(--font-serif);
        font-size: 3.75rem;
        line-height: 1.05;
        text-wrap: balance;
        margin-block-end: var(--space-8);
    }
    @media (width >= 48rem) {
        #page-title { font-size: 6rem; }
    }
    .page--compact #page-title {
        font-size: 3rem;
        line-height: 1.25;
        margin-block-end: var(--space-12);
    }
    @media (width >= 48rem) {
        .page--compact #page-title { font-size: 3.75rem; }
    }
    .article { padding-block: var(--space-24); }
    .article #page-title { margin-block-end: var(--space-6); }
    .page-body { padding-block: var(--space-24) var(--space-32); }
}

/* ==========================================================================
   COMPONENTS
   ========================================================================== */
@layer components {
    /* ---- buttons + icon buttons + links ---- */
    .btn {
        display: inline-flex;
        align-items: center;
        gap: var(--space-4);
        padding: var(--space-3) var(--space-8);
        background-color: var(--primary);
        color: var(--on-primary);
        font-family: var(--font-serif);
        letter-spacing: -0.025em;
        transition: all 150ms;
    }
    .btn:active { scale: 0.95; }
    .btn .material-symbols-outlined { transition: translate 200ms; }
    .btn:hover .material-symbols-outlined { translate: 0.3rem 0; }

    .icon-btn {
        color: var(--on-surface);
        opacity: 0.7;
        transition: opacity 150ms;
    }
    .icon-btn:hover { opacity: 1; }

    .eyebrow {
        font-size: 0.75rem;
        line-height: 1rem;
        text-transform: uppercase;
        letter-spacing: 0.3em;
        color: var(--primary);
    }
    .lead {
        font-size: 1.25rem;
        line-height: 1.75rem;
        color: var(--on-surface-variant);
        max-inline-size: 32rem;
    }
    .blog-rss { margin-block-start: var(--space-10); }

    /* ---- home hero ---- */
    .hero { padding-block: var(--space-16) var(--space-32); }
    .hero-inner { display: grid; gap: var(--space-12); }
    @media (width >= 48rem) {
        .hero-inner { grid-template-columns: 5fr 7fr; align-items: start; }
    }
    .hero-media img {
        inline-size: 100%;
        max-inline-size: 50rem;   /* 800px — the artwork's natural width; never upscale past it */
        block-size: auto;
        margin-inline-start: auto;
    }
    .hero-copy { display: grid; }
    .hero-copy .eyebrow { margin-block-end: var(--space-8); }
    .hero-copy #page-title { margin-block-end: var(--space-12); }
    .hero-copy p {
        color: var(--on-surface-variant);
        font-size: 1.125rem;
        line-height: 1.625;
        max-inline-size: 36rem;
    }
    .hero-copy p + p { margin-block-start: var(--space-8); }
    .highlight-copy { max-inline-size: 48rem; }

    /* ---- generic section head + two-column split ---- */
    .split { display: grid; gap: var(--space-24); }
    @media (width >= 48rem) {
        .split { grid-template-columns: repeat(12, 1fr); align-items: center; }
        .split > :first-child { grid-column: 1 / span 4; }
        .split > :last-child { grid-column: 6 / span 7; }
    }
    .rule {
        inline-size: var(--space-16);
        block-size: 1px;
        background-color: var(--primary);
        opacity: 0.3;
        margin-block-start: var(--space-6);
    }

    .points { display: grid; gap: var(--space-12); }
    .point { display: flex; gap: var(--space-8); align-items: flex-start; }
    .point-num {
        font-family: var(--font-serif);
        font-size: 1.875rem;
        line-height: 2.25rem;
        color: var(--primary-dim);
        opacity: 0.4;
    }
    .point h3 { margin-block-end: var(--space-4); }
    .point p { color: var(--on-surface-variant); }

    /* ---- image highlight with overlay ---- */
    .highlight {
        position: relative;
        display: grid;
        max-inline-size: 125rem;   /* 2000px — the artwork's natural width; never upscale past 1:1 */
        margin-inline: auto;
        overflow: hidden;
    }
    .highlight-bg {
        position: relative;
        grid-area: 1 / 1;
    }
    .highlight-bg img { inline-size: 100%; block-size: auto; }
    @media (width < 48rem) {
        /* phones: fill the text-height box (still downscaled from 2000px, so crisp) */
        .highlight-bg img { block-size: 100%; object-fit: cover; }
    }
    .highlight-bg::after {
        content: "";
        position: absolute;
        inset: 0;
        background-color: color-mix(in oklab, var(--surface) 40%, transparent);
        backdrop-filter: blur(2px);
    }
    .highlight-inner {
        position: relative;
        z-index: 1;
        grid-area: 1 / 1;
        align-self: center;
    }
    .highlight h2 {
        font-size: 3.75rem;
        line-height: 1;
        color: var(--blue);
        margin-block-end: var(--space-8);
    }
    @media (width >= 48rem) {
        .highlight h2 { font-size: 6rem; }
    }
    .highlight .lead { margin-block-end: var(--space-12); color: var(--on-primary); font-weight: 500; font-size: 1.4rem; }

    /* ---- quote ---- */
    .quote {
        padding-block: 5rem;
        text-align: center;

        @media (width >= 48rem) { padding-block: 10rem; }
    }
    .quote-icon {
        display: block;
        font-size: 3.75rem;
        color: var(--primary-dim);
        opacity: 0.2;
        font-variation-settings: "FILL" 1;
        margin-inline: auto;
        margin-block-end: var(--space-12);
    }
    .quote blockquote {
        font-family: var(--font-serif);
        font-style: italic;
        font-size: 2.25rem;
        line-height: 1.375;
        max-inline-size: 56rem;
        margin-inline: auto;
        margin-block: 0 var(--space-12);
    }
    @media (width >= 48rem) {
        .quote blockquote { font-size: 3rem; }
    }
    .quote cite {
        font-style: normal;
        font-size: 0.875rem;
        line-height: 1.25rem;
        text-transform: uppercase;
        letter-spacing: 0.4em;
        color: var(--primary);
    }

    /* ---- prose (policy/success pages) ---- */
    .prose {
        font-size: 1.125rem;
        line-height: 1.625;
        color: var(--on-surface-variant);
        max-inline-size: 42rem;
    }
    .page-body .prose,
    .article .prose { max-inline-size: none; }
    .prose > * + * { margin-block-start: var(--space-6); }
    .prose :is(h1, h2, h3) {
        font-family: var(--font-serif);
        font-size: 1.75rem;
        line-height: 1.5;
        color: var(--on-surface);
        margin-block: 2.5rem 1rem;
    }
    .prose a {
        color: var(--primary);
        text-decoration: underline;
        text-underline-offset: 4px;
    }
    .prose blockquote {
        font-family: var(--font-serif);
        font-style: italic;
        font-size: 1.5rem;
        border-inline-start: 3px solid var(--primary-container);
        padding-inline-start: var(--space-6);
    }
    .prose ul, .prose ol { padding-inline-start: 1.25em; }

    /* ---- articles (posts) ---- */
    .post-date {
        font-size: 0.75rem;
        line-height: 1rem;
        text-transform: uppercase;
        letter-spacing: 0.3em;
        color: var(--primary);
    }
    .article .post-date { margin-block-end: var(--space-12); }

    /* ---- post list ---- */
    .post-list { display: grid; }
    .post-item { padding-block: var(--space-8); }
    .post-item + .post-item {
        border-block-start: 1px solid color-mix(in oklab, var(--outline-variant) 30%, transparent);
    }
    .post-item {
        & .post-date { display: block; margin-block-end: var(--space-3); }
    }
    .post-title { font-size: 1.875rem; line-height: 1.25; margin-block-end: var(--space-2); }
    .post-desc { color: var(--on-surface-variant); line-height: 1.625; }

    /* ---- activities feed ---- */
    .feed { display: grid; }
    .feed-entry {
        padding-block: var(--space-12);
        scroll-margin-block-start: 8rem;
    }
    .feed-entry + .feed-entry {
        border-block-start: 1px solid color-mix(in oklab, var(--outline-variant) 30%, transparent);
    }
    .feed-entry:target {
        background-color: color-mix(in oklab, var(--primary) 8%, transparent);
    }
    .feed-date { display: block; margin-block-end: var(--space-4); }
    .feed-title { font-size: 1.5rem; line-height: 1.25; }
    .feed-title a:hover { color: var(--primary); }
    .feed-body { margin-block-start: var(--space-4); color: var(--on-surface-variant); line-height: 1.625; }

    /* ---- gallery (container-queried grid) ---- */
    .gallery-body { container: gallery / inline-size; }
    .artwork-grid { display: grid; gap: var(--space-6); }
    @container gallery (width >= 40rem) {
        .artwork-grid { grid-template-columns: repeat(2, 1fr); }
    }
    @container gallery (width >= 64rem) {
        .artwork-grid { grid-template-columns: repeat(3, 1fr); }
    }
    .artwork { background-color: var(--surface-container-low); }
    .artwork img { inline-size: 100%; block-size: auto; }
    .artwork-meta { display: grid; gap: var(--space-1); padding: var(--space-6); }
    .artwork-title { font-family: var(--font-serif); font-size: 1.125rem; line-height: 1.75rem; }
    .artwork-cat {
        font-size: 0.75rem;
        line-height: 1rem;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        color: var(--primary);
    }
    .artwork-dim { font-size: 0.75rem; line-height: 1rem; color: var(--outline); }

    /* ---- purchase rows (book) ---- */
    .purchase {
        display: grid;
        gap: var(--space-4);
        max-inline-size: 56rem;
        margin-inline: auto;
    }
    .purchase form { display: contents; }
    .pay-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        inline-size: 100%;
        padding: var(--space-6);
        text-align: left;
        background-color: var(--surface-container-lowest);
        transition: all 300ms;

        &:hover { background-color: var(--primary); color: var(--on-primary); }
    }
    .pay-name { display: block; font-weight: 700; }
    .pay-meta {
        display: block;
        font-size: 0.75rem;
        line-height: 1rem;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        opacity: 0.7;
    }
    .pay-note {
        padding-block: var(--space-8) var(--space-2);
        font-size: 0.75rem;
        line-height: 1rem;
        text-transform: uppercase;
        letter-spacing: 0.3em;
        color: var(--outline);
    }
    .shipping-link {
        margin-block-start: var(--space-6);
        font-size: 0.875rem;
        line-height: 1.25rem;
        color: var(--primary);
        text-decoration: underline;
        text-decoration-thickness: 1px;
        text-underline-offset: 4px;
    }

    /* ---- book page ---- */
    .book-hero { display: grid; gap: var(--space-12); }
    @media (width >= 48rem) {
        .book-hero { grid-template-columns: 5fr 7fr; align-items: start; gap: var(--space-16); }
    }
    .book-panorama {
        display: grid;
        grid-template-columns: 172fr 536fr 172fr;   /* the triptych's native proportions */
        max-inline-size: 55rem;                     /* 880px native — the files are low-res */
        margin-inline: auto;
    }
    .book-panorama img { inline-size: 100%; block-size: auto; }

    .book-method { display: grid; gap: var(--space-12); }
    @media (width >= 48rem) {
        .book-method { grid-template-columns: 7fr 5fr; align-items: center; gap: var(--space-16); }
    }
    .book-method img { inline-size: 100%; block-size: auto; }
    .book-method p { color: var(--on-surface-variant); max-inline-size: 32rem; }

    .author { display: grid; gap: var(--space-12); }
    @media (width >= 48rem) {
        .author { grid-template-columns: 5fr 7fr; align-items: center; gap: var(--space-16); }
    }
    .author img { inline-size: 100%; max-inline-size: 25rem; block-size: auto; }
    .author p { color: var(--on-surface-variant); max-inline-size: 32rem; }

    /* ---- prev/next ---- */
    .prevnext {
        display: grid;
        gap: var(--space-4);
        padding-block-end: var(--space-32);
    }
    .prevnext-link {
        display: block;
        color: var(--primary);
        font-size: 0.875rem;
        line-height: 1.25rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.1em;
    }
    .prevnext-link--next { text-align: end; }
}

/* ==========================================================================
   UTILITIES
   ========================================================================== */
@layer utilities {
    @media (prefers-reduced-motion: reduce) {
        :where(*, *::before, *::after) {
            transition-duration: 0.01ms !important;
            animation-duration: 0.01ms !important;
            scroll-behavior: auto !important;
        }
    }
}