/*
Theme Name: BlankSlate
Theme URI: https://opencollective.com/blankslate
Author: Web Guy
Author URI: https://opencollective.com/blankslate#section-contributors
Description: Donate: https://opencollective.com/blankslate. Learn: https://blankslate.me/. BlankSlate is the definitive WordPress boilerplate starter theme. I've carefully constructed the most clean and minimalist theme possible for designers and developers to use as a base to build websites for clients or to build completely custom themes from scratch. Clean, simple, unstyled, semi-minified, unformatted, and valid code, SEO-friendly, jQuery-enabled, no programmer comments, standardized and as white label as possible, and most importantly, the CSS is reset for cross-browser-compatability, with no intrusive visual CSS styles added whatsoever. A perfect skeleton theme. For support and suggestions, go to: https://github.com/webguyio/blankslate/issues. Thank you.
Tags: accessibility-ready, one-column, two-columns, custom-menu, featured-images, microformats, sticky-post, threaded-comments, translation-ready
Version: 2026
Requires at least: 5.2
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v3 or Later
License URI: https://www.gnu.org/licenses/gpl.html
Text Domain: blankslate

BlankSlate WordPress Theme 2011-2026
BlankSlate is distributed under the terms of the GNU GPL
*/

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}html{scroll-behavior:smooth}body{line-height:1}a{text-decoration-skip-ink:auto}a[href^="tel"]{color:inherit;text-decoration:none}button{outline:0}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}q{display:inline;font-style:italic}q:before{content:'"';font-style:normal}q:after{content:'"';font-style:normal}textarea,input[type="text"],input[type="button"],input[type="submit"],input[type="reset"],input[type="search"],input[type="password"]{appearance:none;border-radius:0}input[type="search"]{appearance:textfield}table{border-collapse:collapse;border-spacing:0}th,td{padding:2px}big{font-size:120%}small,sup,sub{font-size:80%}sup{vertical-align:super}sub{vertical-align:sub}dd{margin-left:20px}kbd,tt{font-family:courier;font-size:12px}ins{text-decoration:underline}del,strike,s{text-decoration:line-through}dt{font-weight:bold}address,cite,var{font-style:italic}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
.sticky{}.bypostauthor{}.wp-caption{}.wp-caption-text{}.gallery-caption{}.alignright{}.alignleft{}.aligncenter{}
.screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute!important;width:1px;word-wrap:normal!important;word-break:normal}
.screen-reader-text:focus{background-color:#f7f7f7;border-radius:3px;box-shadow:0 0 2px 2px rgba(0,0,0,.6);clip:auto!important;clip-path:none;color:#007acc;display:block;font-size:14px;font-size:.875rem;font-weight:700;height:auto;right:5px;line-height:normal;padding:15px 23px 14px;text-decoration:none;top:5px;width:auto;z-index:100000}
.skip-link{left:-9999rem;top:2.5rem;z-index:999999999;text-decoration:underline}
.skip-link:focus{display:block;left:6px;top:7px;font-size:14px;font-weight:600;text-decoration:none;line-height:normal;padding:15px 23px 14px;z-index:100000;right:auto}
.visually-hidden:not(:focus):not(:active), .form-allowed-tags:not(:focus):not(:active){position:absolute !important;height:1px;width:1px;overflow:hidden;clip:rect(1px 1px 1px 1px);clip:rect(1px, 1px, 1px, 1px);white-space:nowrap}


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

        :root {
            --yellow:  #FDCA5F;
            --cream:   #FFFDF9;
            --ink:     #0d0b08;
            --rust:    #bf4f2a;
            --gold:    #c9a84c;
            --sage:    #5a7a5c;
            --green:   #458434;
            --dust:    #b8a898;
            --purple:  #c95ffd;
        }

        html { overflow-x: hidden; scroll-behavior: auto; }
        body {
            background: var(--yellow);
            color: var(--ink);
            font-family: 'Quicksand', sans-serif;
            overflow-x: hidden;
        }
        
        body.home {
    cursor: none;
}

    body.home a,
    body.home button {
        cursor: none;
    }
    
    /* INNER PAGES = NORMAL CURSOR */
    body:not(.home) {
        cursor: auto !important;
    }
    
    body:not(.home) a,
    body:not(.home) button {
        cursor: pointer !important;
    }

        /* ── CUSTOM CURSOR ── */
        #cur {
            position: fixed; width: 8px; height: 8px;
            background: #000; border-radius: 50%;
            pointer-events: none; z-index: 9999;
            transform: translate(-50%, -50%);
            mix-blend-mode: multiply;
        }
        #cur-r {
            position: fixed; width: 32px; height: 32px;
            border: 1.5px solid rgba(0,0,0,0.3); border-radius: 50%;
            pointer-events: none; z-index: 9998;
            transform: translate(-50%, -50%);
            transition: width .3s, height .3s, opacity .3s;
        }

        /* ── PROGRESS BAR ── */
        #prog {
            position: fixed; top: 0; left: 0; height: 2px;
            background: linear-gradient(90deg, var(--rust), var(--gold));
            z-index: 9990; width: 0;
        }

        /* ── NAV DOTS ── */
        .nav-dots {
            position: fixed; right: 2rem; top: 50%;
            transform: translateY(-50%);
            display: flex; flex-direction: column; gap: 12px;
            z-index: 500;
        }
        .nd {
            width: 8px; height: 8px; border-radius: 50%;
            background: rgba(0,0,0,0.18);
            border: 1.5px solid rgba(0,0,0,0.28);
            transition: all .35s; cursor: pointer;
        }
        .nd.active {
            background: #000;
            border-color: #000;
            transform: scale(1.4);
        }
        body.on-cream .nd { border-color: rgba(0,0,0,0.35); }
        body.on-cream .nd.active { background: #000; border-color: #000; }

        /* ── GLOBAL DESKTOP HEADER ── */
        #main-header {
            position: fixed; top: 0; left: 0; width: 100%; height: 60px;
            display: flex; align-items: center; justify-content: space-between;
            padding: 0 2.5rem; z-index: 1000;
            font-family: 'Acme', sans-serif;
            font-size: 0.75rem;
            font-weight: 700;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            opacity: 0; pointer-events: none;
            border-bottom: 1px solid rgba(0,0,0,0.07);

        }


        #main-header .header-bg {
            position: absolute;
            inset: 0;
            background: var(--yellow);
            z-index: 0;
            transition: background .5s;

        }

        #main-header .header-content {
            position: relative;
            z-index: 1;

            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }



        #main-header.cream-header  .header-bg{ background: var(--cream); }
        #main-header.contact-header  .header-bg { background: var(--cream); }
        #main-header a {
            text-decoration: none; color: #000; font-size: .72rem;
            margin-left: 1.5rem; text-transform: uppercase;
            letter-spacing: .12em; opacity: .65; transition: opacity .2s;
        }
        #main-header a:hover { opacity: 1; }
        #main-header .hdr-left {
            font-size: .9rem !important; font-weight: 500 !important; color: #000 !important; font-family: 'Acme', serif !important;
        }
        
        .hdr-left a {
            text-transform: lowercase;
        }

        #main-header .hdr-right {
            display: flex;
            align-items: center;
            gap: 1.5rem;
        }

        #main-header .hdr-right a {
            display: flex;
            align-items: center;
            text-decoration: none;
            color: #000;
            font-family: 'Acme', sans-serif !important;
            font-size: 0.75rem !important;
            font-weight: 700 !important;
            letter-spacing: 0.12em !important;
            text-transform: uppercase;
            transition: transform 0.25s ease, color 0.25s ease, opacity 0.25s ease;
        }

        #main-header .hdr-right a:hover {
            color: var(--rust) !important;
        }

        #main-header .hdr-right a.active {
            color: var(--rust) !important;
        }

        /* ── MOBILE / TABLET HAMBURGER HEADER ── */
        #mobile-header {
            display: none;
            position: fixed; top: 0; left: 0; width: 100%; height: 56px;
            z-index: 1001;
            align-items: center; justify-content: space-between;
            padding: 0 1.4rem;
            background: var(--yellow);
            border-bottom: 1px solid rgba(0,0,0,0.07);
            opacity: 0; pointer-events: none; transform: translateY(-20px);
            transition: background .4s, opacity .4s, transform .4s;
        }
        #mobile-header.visible { opacity: 1; pointer-events: auto; transform: translateY(0); }
        #mobile-header.on-cream { background: var(--cream); }
        #mobile-header.on-purple { background: #c95ffd; }
        #mobile-header.on-s5 { background: var(--cream); }
        #mobile-header .mob-logo {
            font-family: 'Acme', serif; font-size: .95rem; color: #000;
        }
        #hamburger {
            width: 32px; height: 32px;
            display: flex; flex-direction: column; justify-content: center; align-items: center;
            gap: 5px; cursor: pointer; background: none; border: none; padding: 4px;
        }
        #hamburger span {
            display: block; width: 22px; height: 1.5px;
            background: #000; border-radius: 2px;
            transition: transform .35s ease, opacity .25s ease;
        }


        /* Mobile nav overlay */
        #mobile-nav {
            position: fixed; width:50%; z-index: 1000; height: 100vh;
            background: var(--yellow);
            display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start;
            gap: 1.4rem; padding-left: 2rem; 
            pointer-events: none; opacity: 0;
            transition: opacity .35s ease;     padding: 90px 2rem 2rem; /* 👈 key fix */
            box-shadow: 12px 0 30px rgba(0, 0, 0, 0.12);
        }
        #mobile-nav.on-cream {
            background: var(--cream);
        }

        #mobile-nav.on-yellow {
            background: var(--yellow);
        }

        #mobile-nav.on-purple {
            background: #c95ffd;
        }

        #mobile-nav.on-s5 {
            background: var(--cream);
        }
        #mobile-nav.open { opacity: 1; pointer-events: auto; }

        #mobile-nav a {
            font-family: 'Acme', sans-serif !important;
            font-size: clamp(0.85rem, 2.5vw, 1.1rem) !important; /* responsive small */
            font-weight: 700 !important;
            letter-spacing: 0.12em !important;
            text-transform: uppercase;

            color: #000;
            text-decoration: none;

            opacity: 0;
            transform: translateY(24px);

            transition: transform 0.25s ease,  color 0.25s ease, opacity 0.25s ease;
            position: relative;
        }

        #mobile-nav.open a {
            opacity: 1 !important;
            transform: translateY(0) !important;
        }

        #mobile-nav a:hover {
            color: var(--rust);
        }

        #mobile-nav a.active {
            color: var(--rust);
        }
        #mobile-nav.open a:nth-child(1) { transition-delay: .08s; }
        #mobile-nav.open a:nth-child(2) { transition-delay: .14s; }
        #mobile-nav.open a:nth-child(3) { transition-delay: .20s; }
        #mobile-nav.open a:nth-child(4) { transition-delay: .26s; }
        #mobile-nav.open a:nth-child(5) { transition-delay: .32s; }

        /* ══════════════════════════════
           SECTION 1 — HERO
        ══════════════════════════════ */
        #s1 {
            position: relative; height: 100vh;
            display: flex; flex-direction: column;
            align-items: center; justify-content: center;
            overflow: hidden; background: var(--purple);
        }

        .lbox { position: absolute; left: 0; right: 0; height: 10vh; background: var(--ink); z-index: 3; }
        .lbox-t { top: 0; transform-origin: top; }
        .lbox-b { bottom: 0; transform-origin: bottom; }

        .bg-layer { position: absolute; inset: -20%; pointer-events: none; }
        .bg-l1 { background: radial-gradient(ellipse 60% 50% at 30% 60%, rgba(255,200,100,.22) 0%, transparent 70%); }
        .bg-l2 { background: radial-gradient(ellipse 50% 40% at 75% 35%, rgba(255,255,255,.10) 0%, transparent 70%); }
        .bg-l3 { background: radial-gradient(ellipse 40% 60% at 50% 80%, rgba(90,10,160,.22) 0%, transparent 70%); }

        #scramble-overlay {
            position: absolute; top: 50%; left: 50%;
            transform: translate(-50%, -50%);
            font-family: 'Acme', serif;
            font-size: clamp(3rem, 11vw, 8rem);
            line-height: 1.15; color: #000;
            z-index: 5; text-align: center; white-space: nowrap;
        }

        .s-cue {
            position: absolute; bottom: 12%; left: 50%; transform: translateX(-50%);
            display: flex; flex-direction: column; align-items: center; gap: .4rem;
            opacity: 0; z-index: 4;
        }
        .s-cue span { font-family: 'Acme', serif; font-size: .6rem; letter-spacing: .3em; text-transform: uppercase; color: #ffffff; }
        .s-line { width: 1px; height: 48px; background: rgba(172,158,158,0.15); overflow: hidden; position: relative; }
        .s-line::after {
            content: ''; position: absolute; top: -100%; left: 0; width: 100%; height: 100%;
            background: linear-gradient(to bottom, transparent, #ffffff, transparent);
            animation: sline 1.8s ease-in-out infinite;
        }
        @keyframes sline { 0% { top: -100%; } 100% { top: 200%; } }

        /* ══════════════════════════════
           SECTION 2 — TAGLINE + VIDEO
        ══════════════════════════════ */
        #s2 {
            position: relative;
            min-height: 100vh;
            background: #FDCA5FFF;
            display: flex; flex-direction: column;
            align-items: center; justify-content: center;
            padding: 80px 2rem 5rem;
            overflow: hidden;
            z-index: 1;
        }

        .s2-blob { position: absolute; pointer-events: none; z-index: 0; }
        .s2-b1 { background: radial-gradient(ellipse 55% 45% at 18% 68%, rgba(191,79,42,.14) 0%, transparent 65%); }
        .s2-b2 { background: radial-gradient(ellipse 40% 50% at 82% 28%, rgba(90,122,92,.11) 0%, transparent 60%); }
        .s2-b3 { background: radial-gradient(ellipse 50% 40% at 55% 55%, rgba(201,168,76,.13) 0%, transparent 55%); }

        .s2-inner {
            position: relative; z-index: 2;
            display: flex; flex-direction: column; align-items: center; width: 100%;
        }

        .tagline {
            text-align: center; margin-bottom: 2.5rem;
            font-size: clamp(.78rem, 1.8vw, 1.05rem);
            font-family: 'Quicksand', sans-serif;
            color: #000; line-height: 1.8; letter-spacing: .04em;
            min-height: 1.8em;
        }
        #taglineText { opacity: 0; transform: translateY(20px); display: inline-block }

        .video-wrap {
            width: 62vw; max-width: 720px;
            aspect-ratio: 16 / 9;
            margin-bottom: 2.5rem;
            background: #FDCA5F;
        }
        .video-wrap video { width: 100%; height: 100%; object-fit: cover; background: #FDCA5F; }

        .s2-scroll-hint {
            font-family: 'Acme', sans-serif;
            font-size: 0.85rem; letter-spacing: .4em;
            color: #ffffff; text-transform: uppercase;
        }

        /* ══════════════════════════════
           SECTION 3 — MARQUEE + ABOUT
        ══════════════════════════════ */
        #s3 {
            position: relative;
            background: var(--cream);
            min-height: 100vh;
            z-index: 2;
            clip-path: inset(80px 0 0 0 round 44px 44px 0 0);
            will-change: clip-path;
        }



        #s3-arch {
            position: absolute; top: -1px; left: 0; right: 0;
            height: 100px; background: var(--cream);
            border-radius: 200px 200px 0 0;
            z-index: 3; pointer-events: none;
        }

        .keyword-section {
            position: sticky; top: 60px; z-index: 50;
            background: var(--cream);
            border-top: 100px solid var(--cream);
            border-bottom: 14px solid var(--cream);
            padding: .4rem 0;
        }
        .ticker {
            width: 100%; overflow: hidden; white-space: nowrap;
            mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
            -webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
        }
        .ticker-track {
            display: inline-flex;
            animation: tickscroll 22s linear infinite;
            will-change: transform;
        }
        .ticker-track span {
            display: inline-flex; margin-right: 54px;
            font-family: 'Acme', sans-serif; font-size: 22px;
            letter-spacing: 1px; color: var(--green);
            position: relative; width: max-content;
        }
        .ticker-track span::before {
            content: ''; position: absolute;
            left: -6px; right: -6px; bottom: 4px; height: 12px;
            background: #F3D174; z-index: -1;
            transform: rotate(-1deg); border-radius: 4px;
        }
        @keyframes tickscroll {
            0%   { transform: translate3d(0, 0, 0); }
            100% { transform: translate3d(-50%, 0, 0); }
        }

        .hero-b {
            position: relative; min-height: 80vh;
            padding: 70px 5vw 80px; overflow: hidden;
        }
        .hero-bg {
            position: absolute; inset: 0;
            width: 100%; height: 100%;
            object-fit: contain; object-position: center;
            opacity: 0.35; z-index: 0; pointer-events: none;
        }
        .hero-inner {
            position: relative; z-index: 2;
            display: flex; gap: 30px;
            max-width: 1100px; margin: 0 auto; align-items: flex-start;
        }
        .hero-left {
            flex: 0 0 38%;
            display: flex; flex-direction: column;
            align-items: center; justify-content: flex-start;
            gap: 10px;
        }
        .hero-right { flex: 0 0 60%; display: flex; flex-direction: column; gap: 10px; }

        .polaroid-square {
            width: min(100%, 518px); aspect-ratio: 1 / 1;
            transform: scale(0.8);
            object-position: inline-start;
        }
        .polaroid-square img { width: 100%; height: 100%; object-fit: cover; display: block; animation: floatZoom 4s ease-in-out infinite; }

        @keyframes floatZoom {
            0%   { transform: translateY(0px) rotate(-2deg) scale(1); }
            50%  { transform: translateY(-8px) rotate(-1deg) scale(1.02); }
            100% { transform: translateY(0px) rotate(-2deg) scale(1); }
        }
        .hello-img { width: min(70%, 500px); }
        .hero-text  { max-width: 400px; font-size: clamp(0.95rem, 1.15vw, 1rem); line-height: 1.5; color: #000000; }

        .site-btn, .hero-btn {
            width: min(100%, 250px);
            padding: 10px 10px;
            font-size: 0.95rem;
            margin-top: -30px !important;
            border-radius: 66px;
            font-family: 'Acme', sans-serif;
            border: none;
            background: rgba(196, 100, 235, 0.9);
            color: #111;
            cursor: pointer;
            text-align: center;
            transition: all 0.25s ease;
            position: relative;
            box-shadow: 0 6px 18px rgba(196,100,235,0.25), 0 2px 0 rgba(0,0,0,0.15);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
        }
        .site-btn:hover, .hero-btn:hover {
            background: rgba(181,82,214,0.95);
            color: #fff;
            transform: translateY(-2px);
            box-shadow: 0 10px 25px rgba(196,100,235,0.35), 0 4px 0 rgba(0,0,0,0.12);
        }
        .site-btn:active, .hero-btn:active {
            background: #C464EB; color: #fff;
            transform: translateY(-4px);
            box-shadow: 0 0 0 rgba(0,0,0,0);
        }

        .site-btn, .more-btn {
            width: min(100%, 250px);
            padding: 10px 10px;
            font-size: 0.95rem;
            margin-top:10%;
            border-radius: 66px;
            font-family: 'Acme', sans-serif;
            border: none;
            background: rgba(196, 100, 235, 0.9);
            color: #111;
            cursor: pointer;
            text-align: center;
            transition: all 0.25s ease;
            position: relative;
            box-shadow: 0 6px 18px rgba(196,100,235,0.25), 0 2px 0 rgba(0,0,0,0.15);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
        }
        .site-btn:hover, .more-btn:hover {
            background: rgba(181,82,214,0.95);
            color: #fff;
            transform: translateY(-2px);
            box-shadow: 0 10px 25px rgba(196,100,235,0.35), 0 4px 0 rgba(0,0,0,0.12);
        }
        .site-btn:active, .more-btn:active {
            background: #C464EB; color: #fff;
            transform: translateY(-4px);
            box-shadow: 0 0 0 rgba(0,0,0,0);
        }


        /* ══════════════════════════════
           S3 → S4 TRANSITION
        ══════════════════════════════ */
        /* "Selected Works" large title that morphs from s3 into s4 */
        
        #s3b {
            position: relative;
            background: var(--cream);
            z-index: 2;

        }

        #sw-transition-wrap {
            position: relative;
            z-index: 1; 
            padding: 100px 5vw 0;
            overflow: hidden;
            top: 0;
            left: 0;
            width: 100%;
            background-color: transparent;
            pointer-events: none; /* avoids blocking clicks */
            isolation: isolate;
        }
        #sw-big-title {
            font-family: 'Acme', serif;
            font-size: clamp(4rem, 12vw, 10rem) !important;
            line-height: 0.9;
            color: #000;
            text-align: left;
        
            display: inline-block;      /* IMPORTANT */
            overflow: hidden;           /* IMPORTANT */
            white-space: nowrap;        /* IMPORTANT */
        
            width: 0;                   /* start hidden */
            will-change: width;
        }

        #sw-title-underline {
            height: 4px;
            background: linear-gradient(90deg, var(--purple), transparent);
            width: 0%;
            margin-top: 1rem;
            border-radius: 2px;
            will-change: width;
        }
        
        #sw-transition-wrap.animate #sw-big-title {
            animation: typing 2s steps(14, end) forwards;
        }
        
        #sw-transition-wrap.animate #sw-title-underline {
            animation: underlineGrow 0.8s ease forwards;
            animation-delay: 1.6s;
        }
        
        @keyframes typing {
            from { width: 0 }
            to { width: 100% }
        }
        
        @keyframes underlineGrow {
            from { width: 0% }
            to { width: 65% }
        }

        /* ══════════════════════════════
           SECTION 4 — DESKTOP (≥768px)
        ══════════════════════════════ */
        #s4 {
            position: relative;
            width: 100%;
            overflow: hidden;
        }

        /* ── Desktop scroll container ── */
        #s4 .scroll-container {
            padding-top: 60px;
            height: calc(100vh * 4);
            background-color: #FFFDF9;
        }

        #s4 .sticky-container {
            position: sticky;
            display: flex;
            height: 100vh;
            width: 100%;
            overflow: hidden;
        }

        #s4 .left-side-col,
        #s4 .right-side-col {
            flex: 1;
            position: relative;
            height: 100%;
        }

        #s4 .section-1-l,
        #s4 .section-4-l { position: relative; overflow: hidden; width: 100%; height: 100vh; }

        #s4 .section-2-l, #s4 .section-3-l {
            position: relative; display: flex; overflow: hidden;
            width: 100%; height: 100vh;
            justify-content: center; align-items: center; cursor: pointer;
        }

        #s4 .section-4-r {
            position: relative; display: flex; overflow: hidden;
            width: 100%; height: 100vh;
            justify-content: center; align-items: center;
            background-color: #FED85D; cursor: pointer; padding: 40px;
        }
        #s4 .section-3-r {
            position: relative; overflow: hidden;
            width: 100%; height: 100vh;
            background-color: #E184D5;
            display: flex; justify-content: center; align-items: center; padding: 40px;
        }
        #s4 .section-2-r {
            position: relative; overflow: hidden;
            width: 100%; height: 100vh;
            background-color: #d85dfe;
            display: flex; justify-content: center; align-items: center; padding: 40px;
        }
        #s4 .section-1-r {
            position: relative; display: flex; overflow: hidden;
            width: 100%; height: 100vh;
            justify-content: center; align-items: center;
            background-color: #FFFDF9; cursor: pointer; padding: 40px;
            box-sizing: border-box;
        }

        #s4 .bg-section-1-l,
        #s4 .bg-section-2-l,
        #s4 .bg-section-3-l,
        #s4 .bg-section-4-l { width: 100%; height: 100%; background-color: #FFFDF9; }

        #s4 .panel-inner {
            height: 100vh; width: 100%;
            display: flex; align-items: center; justify-content: center;
            flex-shrink: 0; box-sizing: border-box;
        }

        #s4 .sw-header {
            padding: 80px 40px 44px;
            text-align: center;
            background: #FFFDF9;
        }
        #s4 .sw-title {
            font-family: 'Acme', serif;
            font-size: clamp(3rem, 7vw, 4rem);
            color: #000; line-height: 1;
            text-align: center;
        }
        #s4 .cat-block-title {
            font-family: 'Acme', serif; font-size: 1.2rem; color: #000;
            display: flex; gap: 10px; margin-bottom: 2px;
            flex-wrap: wrap; align-items: baseline;
        }
        #s4 .cat-block-num { font-family: 'Acme', serif; font-size: 0.8rem; color: var(--dust); }

        #s4 .content-parent {
            position: absolute; left: 0; top: 40%; width: 100%;
            padding: 100px; display: flex; flex-direction: column; gap: 10px;
        }
        #s4 .text-ani {
            width: min(520px, 90%);
            font-family: "Quicksand", sans-serif;
            color: #000; font-size: 1rem; line-height: 1.6;
        }

        #s4 .proj-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 14px;
            width: min(800px, 80%);
            margin: 0 auto;
            padding: 24px;
            background-color: #FFFDF9;
            border-radius: 20px;
            align-items: stretch;
        }
        #s4 .proj-grid.style-2 { background-color: #FED85D; }
        #s4 .proj-grid.style-3 { background-color: #E184D5; }
        #s4 .proj-grid.style-4 { background-color: #d85dfe; }

        #s4 .proj-card {
            aspect-ratio: 1 / 1; width: 100%;
            perspective: 1200px; min-width: 0;
        }
        #s4 .card-inner {
            width: 100%; height: 100%; position: relative;
            transform-style: preserve-3d;
            transition: transform 0.8s cubic-bezier(.2,.8,.2,1);
        }
        #s4 .proj-card:hover .card-inner { transform: rotateY(180deg); }

        #s4 .card-front, #s4 .card-back {
            position: absolute; inset: 0; backface-visibility: hidden; border-radius: 16px;
        }
        #s4 .card-front { display: flex; align-items: center; justify-content: center; background: #fff; }
        #s4 .card-back {
            transform: rotateY(180deg);
            background: #fbf2ff; padding: 14px;
            display: flex; flex-direction: column; justify-content: space-between;
                }
        #s4 .proj-img-placeholder {
            width: 100%;
            aspect-ratio: 1 / 1;
            overflow: hidden;
            display: flex;
        }
        
        /* the actual image */
        #s4 .proj-img-placeholder img {
            width: 100%;
            height: 100%;
            object-fit: contain !important;
            display: block;
        }
        #s4 .proj-tag {
            display: inline-block; font-family: 'Quicksand', sans-serif; font-weight: 500;
            font-size: 0.58rem; letter-spacing: 0.15em; text-transform: uppercase;
            padding: 3px 10px; border-radius: 40px; margin-bottom: 9px;
        }
        #s4 .proj-name { font-family: 'Acme', serif; font-size: 0.8rem; line-height: 1.2; margin-bottom: 6px; }
        #s4 .proj-desc {
            font-size: clamp(0.4rem, 2vw, 0.8rem); line-height: 1.45;
            color: rgba(13,11,8,0.55);
            display: -webkit-box; -webkit-line-clamp: 3;
            -webkit-box-orient: vertical; overflow: hidden;
        }
        #s4 .proj-btn {
            font-family: 'Acme', serif; font-size: 0.8rem; padding: 8px 20px;
            border-radius: 66px; border: none;
            background: rgba(201,95,253,0.88); color: #111; cursor: pointer;
            transition: all 0.22s ease;
            box-shadow: 0 4px 14px rgba(201,95,253,0.22), 0 2px 0 rgba(0,0,0,0.1);
            display: inline-block;
        }
        #s4 .proj-btn:hover {
            background: rgba(181,72,220,0.95); color: #fff; transform: translateY(-2px);
            box-shadow: 0 8px 22px rgba(196,100,235,0.32), 0 3px 0 rgba(0,0,0,0.1);
        }
        #s4 .proj-btn:active { background: #C464EB; color: #fff; transform: translateY(0); }

        #s4 .proj-face {
            position: absolute; inset: 0; backface-visibility: hidden;
            border-radius: 18px; overflow: hidden;
            box-shadow: 0 10px 25px rgba(0,0,0,0.12), 0 2px 0 rgba(0,0,0,0.08);
            border: 1px solid rgba(0,0,0,0.08);
        }

        /* ══════════════════════════════
           S4 → S5 TRANSITION
        ══════════════════════════════ */
        #s4-s5-bridge {
            background: #FFFDF9;
            height: 200px;
            position: relative;
            z-index: 3;
        }

        /* ══════════════════════════════
           SECTION 5 — CONTACT
        ══════════════════════════════ */
        #s5 {
            position: relative;
            background: var(--cream);
            min-height: 100vh;
            overflow: hidden;
            display: flex;
            align-items: center;
            z-index: 3;
        }


        .s5-inner {
            position: relative;
            z-index: 2;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            min-height: 100vh;
            padding: 100px 5vw;
        }

        .s5-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 60px;
            max-width: 1100px;
            width: 100%;
            align-items: center;
        }

        /* Left: envelope */
        .s5-envelope-col {
            position: relative;
            min-height: 420px;
            display: flex;
            align-items: center;
            justify-content: center;
        }



        /* Right: content column */
        .s5-content-col {
            display: flex;
            flex-direction: column;
            gap: 1.6rem;
        }

        .s5-heading {
            font-family: 'Acme', serif;
            font-size: clamp(2.4rem, 5vw, 4.2rem);
            line-height: 1.08;
            color: #6f3e83;
        }


        .s5-body {
            font-family: 'Quicksand', sans-serif;
            font-size: clamp(0.85rem, 1.2vw, 1rem);
            line-height: 1.75;
            color: rgba(13,11,8,0.7);
            max-width: 380px
            z-index:9998;

        }

        .s5-socials {
            display: flex;
            gap: 1rem;
            flex-wrap: wrap;
            margin-top: 0.2rem;
            z-index:9999;
        }

        .social-link {
            display: inline-flex;
            align-items: center;
            gap: 0.55rem;
            padding: 10px 22px;
            border-radius: 60px;
            font-family: 'Acme', sans-serif;
            font-size: 0.85rem;
            letter-spacing: 0.06em;
            text-decoration: none;
            color: #111;
            border: 1.5px solid rgba(0,0,0,0.14);
            background: rgba(255,255,255,0.7);
            backdrop-filter: blur(6px);
            transition: all 0.25s ease;
            cursor: none;
            z-index:9999;
            opacity: 1;

        }
        .social-link:hover {
            background: var(--purple);
            border-color: var(--purple);
            color: #fff;
            transform: translateY(-3px);
            box-shadow: 0 8px 24px rgba(201,95,253,0.28);
        }
        .social-link svg {
            width: 16px; height: 16px;
            fill: currentColor;
            flex-shrink: 0;
        }

        /* WRAPPER */
        .env-wrap {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 420px;
            gap: 14px;
        }

        /* ENVELOPE CONTAINER */
        .contact {
            position: relative;
            width: 320px;
            height: 260px;
            cursor: pointer;
            transform: scale(1.4);
        }

        /* ENVELOPE BASE */
        .envelope {
            position: absolute;
            height: 140px;
            width: 240px;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }

        /* HOVER LIFT */
        .contact:hover .envelope {
            transform: translate(-50%, -30%);
        }

        /* TOP FLAP */
        .top {
            position: absolute;
            top: -4px;
            left: 0;
            width: 100%;
            height: 100px;
            z-index: 30;
            overflow: visible;
            transform-origin: top;
            transition: transform 0.4s ease, z-index 0s linear 0.2s;
        }

        .contact:hover .top {
            transform: rotateX(180deg);
            z-index: 0; /* 👈 goes BEHIND after opening */
            transition: transform 0.4s ease, z-index 0s;
        }

        /* FLAP COLORS (BEIGE/BROWN) */
        .outer {
            position: absolute;
            bottom: 0;
            left: 0;
            border-left: 120px solid transparent;
            border-right: 120px solid transparent;
            border-top: 100px solid #d8b98c;
        }

        .outer .inner {
            position: absolute;
            left: -118px;
            top: -98px;
            border-left: 118px solid transparent;
            border-right: 118px solid transparent;
            border-top: 95px solid #f1e3c9;
        }

        /* SIDE FLAPS */
        .left {
            position: absolute;
            top: 0;
            left: 0;
            z-index: 20;
            border-left: 120px solid #caa472;
            border-top: 70px solid transparent;
            border-bottom: 70px solid transparent;
        }

        .right {
            position: absolute;
            top: 0;
            right: 0;
            z-index: 20;
            border-right: 120px solid #caa472;
            border-top: 70px solid transparent;
            border-bottom: 70px solid transparent;
        }

        /* BOTTOM */
        .bottom {
            position: absolute;
            bottom: 0;
            left: 0;
            z-index: 20;
            border-left: 120px solid transparent;
            border-right: 120px solid transparent;
            border-bottom: 75px solid #caa472;
        }

        /* COVER */
        .cover {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 60%;
            background: #e6cfa7;
            z-index: 15;
        }

        /* PAPER */
        .paper {
            position: absolute;
            left: 5%;
            top: 0;
            width: 95%;
            height: 100px;
            background: #fffef8;
            z-index: 5;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 4px;
            transition: transform 0.4s ease;
            box-shadow:
                    0 10px 25px rgba(0, 0, 0, 0.18),
                    0 2px 6px rgba(0, 0, 0, 0.08);        }

        /* PAPER SLIDE */
        .contact:hover .paper {
            transform: translateY(-80px);
            z-index: 25; /* ABOVE everything */
            transition: transform 0.45s ease, z-index 0s;
        }

        /* BUTTON */
        .contact-btn {
            padding: 10px 20px;
            border: none;
            background: #c95ffd;
            color: white;
            border-radius: 20px;
            font-weight: 600;
            cursor: pointer;
            transform: scale(0.8);
            opacity: 0;
            transition: all 0.3s ease;
        }

        /* BUTTON APPEAR */
        .contact:hover .contact-btn {
            transform: scale(1);
            opacity: 1;
        }

        /* HINT TEXT */
        .env-hint {
            font-size: 12px;
            font-style: italic;
            color: #a68b63;
            opacity: 0.8;
            transition: opacity 0.3s ease;
        }

        .contact:hover + .env-hint {
            opacity: 0.3;
        }

        /* ══════════════════════════════
           FOOTER
        ══════════════════════════════ */
        #site-footer {
            background: var(--cream);
            padding: 28px 5vw;
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 0.8rem;
            border-top: 1px solid rgba(0,0,0,0.06);
            position: relative;
            z-index: 3;
        }
        #site-footer .ft-name {
            font-family: 'Acme', serif;
            font-size: 0.9rem;
            color: #000;
        }
        #site-footer .ft-copy {
            font-family: 'Quicksand', sans-serif;
            font-size: 0.72rem;
            color: rgba(13,11,8,0.45);
            letter-spacing: 0.05em;
            object-position: center;
        }
        #site-footer .ft-links {
            display: flex; gap: 1.2rem;
        }
        #site-footer .ft-links a {
            font-family: 'Quicksand', sans-serif;
            font-size:clamp(0.2rem,4vw,0.8rem);
            color: rgba(13,11,8,0.45);
            text-decoration: none;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            transition: color .2s;
        }
        #site-footer .ft-links a:hover { color: #000; }
        
        /* ── HEADER VISIBILITY ── */

        @media (max-width: 1023px) {
            #main-header {
                display: none !important;
            }
        
            #mobile-header {
                display: flex !important;
            }
        }

        /* ── Tablet tweaks ── */
        @media screen and (min-width: 768px) and (max-width: 1024px) {
            .nav-dots { right: 1.2rem; }
            .contact {
                transform: scale(1.2);
            }
            #s4 .sw-title { font-size: clamp(2rem, 5vw, 3.2rem); }
            #s4 .cat-block-title { font-size: clamp(0.7rem, 2vw, 0.9rem); }
            #s4 .cat-block-num { font-size: clamp(0.6rem, 2vw, 0.8rem); }
            #s4 .text-ani { font-size: clamp(0.7rem, 2vw, 0.9rem); line-height: 1.5; width: 90%; }
            #s4 .section-1-r,
            #s4 .section-2-r,
            #s4 .section-3-r,
            #s4 .section-4-r { padding: 18px; }
            #s4 .proj-grid,
            #s4 .proj-grid.style-2,
            #s4 .proj-grid.style-3,
            #s4 .proj-grid.style-4 { width: 95%; padding: 14px; gap: 12px; border-radius: 18px; }
            #s4 .proj-tag { font-size: 0.4rem; }
            #s4 .proj-name { font-size: 0.6rem; line-height: 1.3; }
            #s4 .proj-desc { font-size: 0.4rem; }
            #s4 .proj-btn { font-size: 0.5rem; padding: 5px 5px; border-radius: 20px; width: min(70%, 250px); }
        }

        /* ══════════════════════════════
           MOBILE (< 768px) OVERRIDES
        ══════════════════════════════ */
        @media (max-width: 767px) {
            .nav-dots { right: 1.2rem; }
            .social-link {
                padding: 6px 12px;
                font-size: 0.68rem;
                letter-spacing: 0.04em;
            }
            .contact {
                transform: scale(1.2);
            }
            /* S4 mobile */
            #s4 .scroll-container {
                height: auto !important;
                padding-top: 0;
            }
            #s4 .sticky-container {
                position: static !important;
                display: block !important;
                height: auto !important;
                overflow: visible !important;
            }
            #s4 .left-side-col,
            #s4 .right-side-col {
                display: block !important;
                position: static !important;
                width: 100% !important;
                height: auto !important;
                transform: none !important;
            }
            #s4 .section-1-l,
            #s4 .section-2-l,
            #s4 .section-3-l,
            #s4 .section-4-l {
                display: block;
                width: 100%;
                height: auto !important;
                min-height: 0;
                overflow: visible;
            }
            #s4 .sw-header { padding: 48px 24px 28px; }
            #s4 .sw-title { font-size: 2.4rem; }
            #s4 .content-parent {
                position: static !important;
                padding: 20px 24px 32px;
                gap: 8px;
            }
            #s4 .cat-block-title { font-size: 0.9rem; }
            #s4 .cat-block-num   { font-size: 0.7rem; }
            #s4 .text-ani        { font-size: 0.82rem; line-height: 1.55; width: 100%; }
            #s4 .section-1-r,
            #s4 .section-2-r,
            #s4 .section-3-r,
            #s4 .section-4-r {
                display: block;
                width: 100%;
                height: auto !important;
                min-height: 0;
                padding: 24px 16px 32px;
                position: static !important;
            }
            #s4 .panel-inner { height: auto !important; display: block; }
            #s4 .proj-grid,
            #s4 .proj-grid.style-2,
            #s4 .proj-grid.style-3,
            #s4 .proj-grid.style-4 { width: 100%; padding: 12px; gap: 10px; border-radius: 14px; }
            #s4 .proj-card:active .card-inner { transform: rotateY(180deg); }
            #s4 .proj-tag   { font-size: 0.42rem; }
            #s4 .proj-name  { font-size: 0.72rem; line-height: 1.3; }
            #s4 .proj-desc  { font-size: 0.42rem; -webkit-line-clamp: 4; }
            #s4 .proj-btn   { font-size: 0.52rem; padding: 6px 10px; border-radius: 20px; }
            #s4 .card-back  { padding: 10px; }

            /* S3→S4 transition title mobile */
            #sw-big-title { font-size: clamp(2.8rem, 10vw, 5rem); }

            /* S5 mobile */
            .s5-grid {
                grid-template-columns: 1fr;
                gap: 0;
            }
            .s5-envelope-col {
                min-height: 280px;
                order: -1;
            }
            .s5-content-col {
                padding: 0 1rem 3rem;
            }
            .s5-heading { font-size: clamp(2rem, 8vw, 2.8rem); }
            .s5-body { max-width: 100%; }

            /* footer mobile */
            #site-footer { flex-direction: column; align-items: flex-start; padding: 24px 5vw; }
        }

        #main-header {
            display: flex;
        }
        
        #mobile-header {
            display: none;
        }
        @media (max-width: 720px) { .video-wrap { width: 88vw; } }
        
        @media (max-width: 1023px) {
            .nav-dots { right: 1.2rem; }
        }


        @media (max-width: 900px) {
            .hero-b { transform: translateY(-6vh); }
            .hero-bg { transform: scale(0.8) translateY(-10vh); }
            .hero-inner { flex-direction: column; gap: 40px; text-align: center; }
            .hero-left, .hero-right { flex: 0 0 100%; }
            .polaroid-square { transform: scale(0.7) !important; }
            .hello-img { width: min(100%, 320px); align-self: center; }
            .hero-text { font-size: 0.85rem; max-width: 90%; margin: 0 auto; text-align: left; }
        }

        @media (max-width: 600px) {
            .hero-b { transform: translateY(-6vh); }
            .hero-bg { transform: scale(0.9) translateY(-10vh); }
            .hero-inner { gap: 28px; }
            .polaroid-square { transform: scale(0.7) !important; }
            .hello-img { width: min(100%, 240px); align-self: center; }
            .hero-text { font-size: 0.75rem; line-height: 1.6; max-width: 100%; }
        }
        
/* ───────── INNER PAGES (About, Contact, etc.) ───────── */

        
        /* mobile header stays controlled by media query, BUT ensure it is usable */
        body:not(.home) #mobile-header {
            opacity: 1 !important;
            pointer-events: auto !important;
            transform: translateY(0) !important;
        }
        
        /* Inner page body needs top padding so content clears the fixed header */
        body:not(.home) {
            background: var(--cream);
            padding-top: 60px;
        }
        
        /* Inner page general content styling */
        .inner-page-content {
            max-width: 1100px;
            margin: 0 auto;
            padding: 0 5vw;
        }
        
        .inner-page-content :is(
            h1, h2, h3, h4, h5,
            .wp-block-heading
        ) {
            font-family: 'Acme', sans-serif !important;
            color: #6F3E83;
        }
        
        .inner-page-content :is(
            h6,
            .wp-block-heading
        ) {
            font-family: 'Nothing You Could DO', cursive !important;
            font-size:clamp(0.5rem,8vw,0.7rem);
        }
        
        .inner-page-content .hero-text {
        max-width: clamp(65ch, 80vw, 110ch);
        width: 100%;}
        
        body.page-id-1030 {background-color: #FCF5E5;}
        
        body:not(.home) ::selection {
            background:  #8B4FB1;
            color: #fff;
        }
        
        body.page-id-960 .hero-text {
          text-align: justify;
          text-justify: inter-word;
          hyphens: auto;
        }
        body.page-id-960 {
          background-color: #FCF5E5;
        }
        body.page-id-960 .wp-block-columns {
          gap: clamp(40px, 6vw, 120px);
          align-items: flex-start;
        }
        
        body.page-id-960 .wp-block-column p {
          text-align: justify;
        }
        
        body.page-id-960 h5 {
          font-size: 18px;
          font-weight: 400;
          letter-spacing: 0.5px;
        }
        body.page-id-960 h2 {
          font-size: clamp(32px, 3vw, 48px);
          font-weight: 500;
        }
        body.page-id-960 .wp-block-columns {
          gap: clamp(40px, 6vw, 120px);
          align-items: flex-start;
        }
        
        body.page-id-960  .hero-text {
          max-width: 100ch;
          width: 100%;
          line-height: 1.8;
          letter-spacing: 1.2px;
          margin-bottom: 24px;
          margin-left: auto;
        }
        
        .wp-block-social-links li a {
          display: inline-flex;
          box-shadow: 0 6px 18px rgba(0,0,0,0.15);
          border-radius: 50%;
          transition: transform 0.2s ease, box-shadow 0.2s ease;
        }
        
        body.page-id-960 .wp-site-blocks,
        body.page-id-960 main {
          padding-top: 120px;
          padding-bottom: 120px;
        }
        
        body.page-id-1209 .wp-site-blocks,
        body.page-id-1209 main {
          padding-top: 120px;
          padding-bottom: 120px;
        }
        
        /* ══════════════════════════════
           WORK ARCHIVE PAGE
        ══════════════════════════════ */
        
        .archive-page {
            background: var(--cream);
            min-height: 100vh;
            padding-top: 60px;
            font-family: 'Quicksand', sans-serif;
        }
        
        /* ── Hero header ── */
        .arc-hero {
            text-align: center;
            padding: 80px 5vw 50px;
            border-bottom: 1px solid rgba(0,0,0,0.06);
            background: var(--cream);
        }
        
        .arc-eyebrow {
            font-family: 'Quicksand', sans-serif;
            font-size: 0.72rem;
            letter-spacing: 0.25em;
            text-transform: uppercase;
            color: var(--dust);
            margin-bottom: 1rem;
        }
        
        .arc-title {
            font-family: 'Acme', serif;
            font-size: clamp(3rem, 8vw, 6rem);
            line-height: 1;
            color: #000;
            margin-bottom: 1.2rem;
        }
        
        .arc-sub {
            font-size: clamp(0.7rem, 1.4vw, 0.9rem);
            line-height: 1.75;
            color: rgba(13,11,8,0.55);
            max-width: 560px;
            margin: 0 auto;
        }
        
        /* ── Filter bar ── */
        .arc-filter-bar {
            display: flex;
            flex-wrap: wrap;
            gap: 0.6rem;
            justify-content: center;
            padding: 32px 5vw;
            background: var(--cream);
            position: sticky;
            top: 60px;
            z-index: 100;
            border-bottom: 1px solid rgba(0,0,0,0.05);
            backdrop-filter: blur(8px);
        }
        
        .arc-filter-btn {
            font-family: 'Acme', sans-serif;
            font-size: 0.72rem;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            padding: 7px 18px;
            border-radius: 40px;
            border: 1.5px solid rgba(0,0,0,0.15);
            background: transparent;
            color: rgba(0,0,0,0.55);
            cursor: pointer;
            transition: all 0.22s ease;
        }
        
        .arc-filter-btn:hover {
            border-color: var(--purple);
            color: var(--purple);
        }
        
        .arc-filter-btn.active {
            background: var(--purple);
            border-color: var(--purple);
            color: #fff;
        }
        
        /* ── Posts grid ── */
        .arc-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
            gap: 2px;
            padding: 2px;
            max-width: 1400px;
            margin: 0 auto;
        }
        
        /* ── Card ── */
        .arc-card {
            display: flex;
            flex-direction: column;
            background: #fff;
            opacity: 1;
            transition: opacity 0.3s ease, transform 0.3s ease;
            border: 1px solid rgba(0,0,0,0.05);
        }
        
        .arc-card:hover {
            z-index: 2;
            box-shadow: 0 20px 60px rgba(0,0,0,0.1);
            transform: translateY(-4px);
        }
        
        /* Thumbnail */
        .arc-card-img-wrap {
            display: block;
            overflow: hidden;
            aspect-ratio: 3 / 2;
            background: var(--yellow);
        }
        
        .arc-card-img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
            transition: transform 0.5s ease;
        }
        
        .arc-card:hover .arc-card-img {
            transform: scale(1.04);
        }
        
        .arc-card-img-placeholder {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, var(--yellow), var(--purple));
        }
        
        .arc-card-img-placeholder span {
            font-family: 'Acme', serif;
            font-size: 4rem;
            color: rgba(255,255,255,0.6);
            text-transform: uppercase;
        }
        
        /* Card body */
        .arc-card-body {
            padding: 1.6rem;
            display: flex;
            flex-direction: column;
            gap: 0.75rem;
            flex: 1;
        }
        
        /* Tags */
        .arc-card-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 0.4rem;
        }
        
        .arc-tag {
            font-family: 'Quicksand', sans-serif;
            font-size: 0.62rem;
            font-weight: 500;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            padding: 3px 10px;
            border-radius: 40px;
            background: rgba(201,95,253,0.08);
            color: var(--purple);
            border: 1px solid rgba(201,95,253,0.2);
            text-decoration: none;
            transition: all 0.2s;
        }
        
        .arc-tag:hover {
            background: var(--purple);
            color: #fff;
            border-color: var(--purple);
        }
        
        /* Title */
        .arc-card-title {
            font-family: 'Acme', serif;
            font-size: clamp(1rem, 2vw, 1.25rem);
            line-height: 1.25;
            color: #000;
        }
        
        .arc-card-title a {
            text-decoration: none;
            color: inherit;
            transition: color 0.2s;
        }
        
        .arc-card-title a:hover {
            color: var(--rust);
        }
        
        /* Excerpt */
        .arc-card-excerpt {
            font-size: 0.85rem;
            line-height: 1.65;
            color: rgba(13,11,8,0.55);
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
            flex: 1;
        }
        
        /* Card footer */
        .arc-card-footer {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding-top: 0.8rem;
            border-top: 1px solid rgba(0,0,0,0.06);
            margin-top: auto;
        }
        
        .arc-card-date {
            font-size: 0.68rem;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: var(--dust);
        }
        
        .arc-read-more {
            font-family: 'Acme', sans-serif;
            font-size: 0.78rem;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: #000;
            text-decoration: none;
            display: flex;
            align-items: center;
            gap: 0.3rem;
            transition: gap 0.2s, color 0.2s;
        }
        
        .arc-read-more:hover {
            color: var(--purple);
            gap: 0.6rem;
        }
        
        .arc-arrow {
            transition: transform 0.2s;
        }
        
        .arc-read-more:hover .arc-arrow {
            transform: translateX(3px);
        }
        
        /* ── Pagination ── */
        .arc-pagination {
            display: flex;
            justify-content: center;
            padding: 60px 5vw;
        }
        
        .arc-pagination .nav-links {
            display: flex;
            gap: 0.5rem;
            align-items: center;
        }
        
        .arc-pagination .page-numbers {
            font-family: 'Acme', serif;
            font-size: 0.85rem;
            padding: 8px 18px;
            border-radius: 40px;
            border: 1.5px solid rgba(0,0,0,0.12);
            text-decoration: none;
            color: #000;
            transition: all 0.2s;
        }
        
        .arc-pagination .page-numbers:hover,
        .arc-pagination .page-numbers.current {
            background: var(--purple);
            border-color: var(--purple);
            color: #fff;
        }
        
        /* ── Mobile ── */
        @media (max-width: 767px) {
            .arc-hero { padding: 60px 5vw 36px; }
            .arc-grid { grid-template-columns: 1fr; gap: 1px; }
            .arc-filter-bar { top: 56px; gap: 0.4rem; padding: 20px 5vw; }
            .arc-filter-btn { font-size: 0.65rem; padding: 5px 12px; }
        }
        /* ══════════════════════════════
           SINGLE POST
        ══════════════════════════════ */
        
        .single-post {
            background: var(--cream);
            min-height: 100vh;
            padding-top: 60px;
        }
        
        /* ── Hero ── */
        .single-hero {
            max-width: 780px;
            margin: 0 auto;
            padding: 60px 5vw 40px;
            text-align: center;
        }
        
        .single-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 0.4rem;
            justify-content: center;
            margin-bottom: 1.4rem;
        }
        
        .single-title {
            font-family: 'Acme', serif;
            font-size: clamp(2rem, 6vw, 4rem);
            line-height: 1.1;
            color: #000;
            margin-bottom: 1.2rem;
        }
        
        .single-meta {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.6rem;
            font-family: 'Quicksand', sans-serif;
            font-size: 0.78rem;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: var(--dust);
            margin-bottom: 2.5rem;
        }
        
        .single-sep { opacity: 0.4; }
        
        .single-featured-img {
            width: 100vw;
            margin-left: calc(-50vw + 50%);
            aspect-ratio: 21 / 9;
            overflow: hidden;
            margin-top: 2rem;
        }
        
        .single-img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }
        
        /* ── Content ── */
        .single-content {
            max-width: 680px;
            margin: 0 auto;
            padding: 60px 5vw 80px;
            font-family: 'Cormorant Garamond', serif;
            font-size: clamp(1.1rem, 2vw, 1.25rem);
            line-height: 1.85;
            color: rgba(13,11,8,0.85);
        }
        
        .single-content p { margin-bottom: 1.6em; }
        
        .single-content h2 {
            font-family: 'Acme', serif;
            font-size: clamp(1.4rem, 3vw, 1.9rem);
            color: #000;
            margin: 2.4em 0 0.8em;
            line-height: 1.2;
        }
        
        .single-content h3 {
            font-family: 'Acme', serif;
            font-size: clamp(1.1rem, 2.5vw, 1.4rem);
            color: #000;
            margin: 2em 0 0.6em;
        }
        
        .single-content blockquote {
            border-left: 3px solid var(--purple);
            margin: 2em 0;
            padding: 0.8em 1.6em;
            font-style: italic;
            color: rgba(13,11,8,0.6);
            background: rgba(201,95,253,0.04);
        }
        
        .single-content a {
            color: var(--purple);
            text-decoration: underline;
            text-decoration-color: rgba(201,95,253,0.3);
            text-underline-offset: 3px;
            transition: text-decoration-color 0.2s;
        }
        
        .single-content a:hover {
            text-decoration-color: var(--purple);
        }
        
        .single-content img {
            width: 100%;
            height: auto;
            border-radius: 8px;
            margin: 1.6em 0;
        }
        
        .single-content ul,
        .single-content ol {
            padding-left: 1.4em;
            margin-bottom: 1.6em;
        }
        
        .single-content ul { list-style: disc; }
        .single-content ol { list-style: decimal; }
        
        .single-content li { margin-bottom: 0.5em; }
        
        .single-content code {
            font-family: 'Courier New', monospace;
            font-size: 0.85em;
            background: rgba(0,0,0,0.05);
            padding: 2px 6px;
            border-radius: 4px;
        }
        
        /* ── Footer ── */
        .single-footer {
            max-width: 680px;
            margin: 0 auto;
            padding: 0 5vw 80px;
            display: flex;
            flex-direction: column;
            gap: 2rem;
            border-top: 1px solid rgba(0,0,0,0.08);
            padding-top: 2rem;
        }
        
        .single-post-tags {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 0.4rem;
        }
        
        .single-tags-label {
            font-family: 'Quicksand', sans-serif;
            font-size: 0.72rem;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            color: var(--dust);
            margin-right: 0.4rem;
        }
        
        .single-back {
            font-family: 'Acme', sans-serif;
            font-size: 0.8rem;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            color: rgba(0,0,0,0.4);
            text-decoration: none;
            transition: color 0.2s;
        }
        
        .single-back:hover { color: var(--purple); }
        
        /* Prev / Next */
        .single-prevnext {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 1rem;
        }
        
        .single-nav-link {
            display: flex;
            flex-direction: column;
            gap: 0.3rem;
            text-decoration: none;
            padding: 1rem 1.2rem;
            border: 1.5px solid rgba(0,0,0,0.08);
            border-radius: 12px;
            transition: all 0.22s ease;
        }
        
        .single-nav-link:hover {
            border-color: var(--purple);
            background: rgba(201,95,253,0.03);
        }
        
        .single-nav-next { text-align: right; }
        
        .single-nav-label {
            font-family: 'Quicksand', sans-serif;
            font-size: 0.65rem;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            color: var(--dust);
        }
        
        .single-nav-title {
            font-family: 'Acme', serif;
            font-size: 0.95rem;
            color: #000;
            line-height: 1.3;
        }
        
        /* ── Mobile ── */
        @media (max-width: 767px) {
            .single-hero { padding: 40px 5vw 30px; }
            .single-featured-img { aspect-ratio: 16 / 9; }
            .single-content { font-size: 1rem; padding: 40px 5vw 60px; }
            .single-prevnext { grid-template-columns: 1fr; }
            .single-nav-next { text-align: left; }
        }