/* =========================================================
   SydStroud.com — Final Visual Layer (CLEAN + TYPO + SOFT MOTION)
   - Warm, intimate, gallery-like
   - No layout fighting, only tone + polish
   - Works with Bootstrap navbar fixed-top + optional topbar
   ========================================================= */

/* =========================================================
   Tokens
   ========================================================= */

:root {
    /* Studio / site */
    --ss-primary: #7fa48a; /* soft green */
    --ss-primary-dark: #6b9177;
    --ss-accent: #d88a72; /* peach/coral */
    --ss-paper: #f7f4ee;
    --ss-paper-2: #efece6;
    --ss-ink: #3f3b36;
    --ss-muted: #7a756f;
    --ss-line: rgba(160, 154, 146, 0.35);
    /* Stacking heights (single source of truth) */
    --ss-topbar-h: 32px;
    --ss-nav-h: 78px;
    --ss-nav-total-h: calc(var(--ss-topbar-h) + var(--ss-nav-h));
    /* Typography */
    --ss-font-body: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --ss-font-heading: "Cormorant Garamond", Georgia, "Times New Roman", serif;
    /* Motion */
    --ss-ease: cubic-bezier(.2, .8, .2, 1);
    --ss-dur-fast: 180ms;
    --ss-dur: 360ms;
    --ss-dur-slow: 720ms;
    /* SydCity palette tokens (used only inside .sydcity-skin) */
    --sc-paper: #f6f1e8;
    --sc-paper-2: #efe8dd;
    --sc-ink: #1f2a3a;
    --sc-muted: #6f6a64;
    --sc-peach: #e6a36c;
    --sc-blush: #e6b0c3;
    --sc-sky: #7c97d6;
    --sc-coral: #d56a5b;
    --sc-line: rgba(31, 42, 58, 0.12);
    --sc-shadow: 0 10px 30px rgba(31, 42, 58, 0.08);
    --sc-radius: 14px;
}


/* =========================================================
   Base Atmosphere + Typography
   ========================================================= */

html {
    background-color: var(--ss-paper-2);
    overflow-y: scroll; /* prevents layout shift when scrollbar appears/disappears */
    -webkit-text-size-adjust: 100%;
}

body {
    background-color: var(--ss-paper);
    color: var(--ss-ink);
    font-family: var(--ss-font-body);
    text-rendering: optimizeLegibility;
    padding-top: 0; /* important: we manage offsets with .ss-page + hero */
}

/* Headings: editorial, calm */
h1, h2, h3, h4, h5, h6 {
    color: #3b3732;
    font-family: var(--ss-font-heading);
    font-weight: 400;
    letter-spacing: 0.02em;
}

h1 {
    font-size: clamp(2rem, 5.8vw, 3.1rem);
    line-height: 1.15;
}

h2 {
    font-size: clamp(1.5rem, 4.2vw, 2.2rem);
    line-height: 1.2;
}

h3 {
    font-size: clamp(1.25rem, 3.4vw, 1.7rem);
    line-height: 1.25;
}

p, li {
    line-height: 1.65;
}

.text-muted {
    color: var(--ss-muted) !important;
}

/* Links */
a {
    color: var(--ss-ink);
    text-decoration-color: rgba(216, 138, 114, 0.35);
    text-underline-offset: 0.16em;
    transition: color var(--ss-dur-fast) var(--ss-ease), text-decoration-color var(--ss-dur-fast) var(--ss-ease);
}

    a:hover {
        color: var(--ss-accent);
        text-decoration-color: rgba(216, 138, 114, 0.75);
    }

    /* Keyboard focus (subtle, but visible) */
    a:focus-visible,
    button:focus-visible,
    .btn:focus-visible,
    .form-control:focus-visible,
    .form-select:focus-visible {
        outline: 2px solid rgba(127, 164, 138, 0.55);
        outline-offset: 2px;
    }

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

/* Sections */
.section {
    padding: 70px 0;
}

.sm-section {
    padding: 40px 0;
}

/* Anchor jumps (fix "hidden under nav") */
[id] {
    scroll-margin-top: var(--ss-nav-total-h);
}

/* Ensure content starts below fixed stack */
.ss-page {
    padding-top: var(--ss-nav-total-h);
}


/* =========================================================
   Soft Motion (opt-in)
   Add class "ss-fade-in" to elements you want to fade/lift.
   Add "is-visible" by default or via IntersectionObserver.
   ========================================================= */

.ss-fade-in {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity var(--ss-dur-slow) var(--ss-ease), transform var(--ss-dur-slow) var(--ss-ease);
    will-change: opacity, transform;
}

    .ss-fade-in.is-visible {
        opacity: 1;
        transform: translateY(0);
    }

@media (prefers-reduced-motion: reduce) {
    .ss-fade-in {
        opacity: 1;
        transform: none;
        transition: none;
    }
}


/* =========================================================
   Buttons
   ========================================================= */

.btn {
    border-radius: 12px;
    box-shadow: none;
    transition: transform var(--ss-dur) var(--ss-ease), background-color var(--ss-dur) var(--ss-ease), border-color var(--ss-dur) var(--ss-ease), color var(--ss-dur) var(--ss-ease);
}

    .btn:active {
        transform: translateY(1px);
    }

.btn-primary {
    background-color: var(--ss-primary) !important;
    border-color: var(--ss-primary) !important;
    color: #ffffff !important;
}

    .btn-primary:hover,
    .btn-primary:focus {
        background-color: var(--ss-primary-dark) !important;
        border-color: var(--ss-primary-dark) !important;
    }

.btn-outline-primary {
    color: var(--ss-primary) !important;
    border-color: var(--ss-primary) !important;
}

    .btn-outline-primary:hover {
        background-color: var(--ss-primary);
        color: #ffffff !important;
    }


/* =========================================================
   Top Account Bar (optional)
   ========================================================= */

.ss-topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--ss-topbar-h);
    z-index: 1040; /* below modal (1050), above nav/content */
    background: rgba(255,255,255,.92);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(0,0,0,.06);
    font-size: .875rem;
}

    .ss-topbar .container {
        height: var(--ss-topbar-h);
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 12px;
    }

    .ss-topbar a, .ss-topbar button {
        color: rgba(0,0,0,.75);
        text-decoration: none;
    }

        .ss-topbar a:hover, .ss-topbar button:hover {
            color: rgba(0,0,0,.95);
            text-decoration: none;
        }

    .ss-topbar .ss-pill {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 4px 10px;
        border-radius: 999px;
        background: rgba(0,0,0,.04);
    }

    .ss-topbar .btn-link {
        border: 0;
        background: transparent;
    }


/* =========================================================
   Navbar (Bootstrap fixed-top)
   Markup:
   <nav class="navbar navbar-expand-lg fixed-top ... " id="navbar">
   ========================================================= */

#navbar {
    top: var(--ss-topbar-h); /* stacks beneath topbar */
    left: 0;
    right: 0;
    width: 100%;
    min-height: var(--ss-nav-h);
    padding-top: 14px;
    padding-bottom: 14px;
    background-color: rgba(247, 244, 238, 0.92);
    border-bottom: 1px solid var(--ss-line);
    backdrop-filter: blur(8px);
    z-index: 1000; /* above content, below topbar */
}

/* Brand block doesn't shift */
.navbar-brand {
    display: flex;
    align-items: center;
    min-height: calc(var(--ss-nav-h) - 28px);
}

    /* Logo switching (safe if theme toggles navbar-dark) */
    .navbar-brand img {
        width: auto;
        height: 42px;
        display: none;
    }

.navbar:not(.navbar-dark) .logo-dark {
    display: inline-block;
}

.navbar.navbar-dark .logo-light {
    display: inline-block;
}

/* Links */
.navbar .nav-link {
    color: #5a554f !important;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: 0.9rem;
    transition: color var(--ss-dur-fast) var(--ss-ease);
}

    .navbar .nav-link:hover,
    .navbar .nav-link.active {
        color: var(--ss-primary) !important;
    }

@media (max-width: 991px) {
    .navbar-brand img {
        height: 34px;
    }
}


/* =========================================================
   Portfolio Grid
   ========================================================= */

.work-container img {
    filter: grayscale(20%) contrast(1.05);
    transition: filter var(--ss-dur) var(--ss-ease);
}

.work-container:hover img {
    filter: grayscale(0%);
}

.work-container .content {
    background-color: rgba(247, 244, 238, 0.96);
    border: 1px solid var(--ss-line);
}

    .work-container .content h2 a {
        color: var(--ss-ink);
    }

    .work-container .content p {
        color: var(--ss-muted);
    }

/* Filters */
.filter-options li a {
    color: #5a554f;
    transition: background-color var(--ss-dur) var(--ss-ease), color var(--ss-dur) var(--ss-ease);
}

.filter-options li:hover a,
.filter-options li.active a {
    background-color: var(--ss-primary);
    color: #ffffff;
}

/* Cards */
.card {
    background-color: #ffffff;
    box-shadow: 0 8px 20px rgba(63, 59, 54, 0.08);
    border-radius: 14px;
}


/* =========================================================
   Forms
   ========================================================= */

.form-control,
.form-select {
    background-color: #ffffff;
    border-color: rgba(160, 154, 146, 0.4);
    color: var(--ss-ink);
    border-radius: 12px;
}

    .form-control:focus,
    .form-select:focus {
        border-color: var(--ss-primary);
        box-shadow: none;
    }


/* =========================================================
   Footer
   ========================================================= */

.footer {
    background-color: #3f3b36;
}

    .footer .text-white-50 {
        color: rgba(247, 244, 238, 0.7) !important;
    }

    .footer .social-circle li a {
        background-color: #4a463f;
        color: rgba(247, 244, 238, 0.7);
        transition: background-color var(--ss-dur) var(--ss-ease), color var(--ss-dur) var(--ss-ease), transform var(--ss-dur) var(--ss-ease);
    }

    .footer .social-circle li:hover a {
        background-color: var(--ss-accent);
        color: #ffffff;
        transform: translateY(-2px);
    }


/* =========================================================
   Home – Hero
   ========================================================= */

.ss-home-hero {
    position: relative;
    min-height: 82vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    /* full-bleed behind fixed stack */
    margin-top: calc(-1 * var(--ss-nav-total-h));
    padding-top: var(--ss-nav-total-h);
}

.ss-home-hero-bg {
    position: absolute;
    inset: 0;
    background-image: linear-gradient( 90deg, rgba(247, 244, 238, 0.94) 0%, rgba(247, 244, 238, 0.82) 45%, rgba(247, 244, 238, 0.30) 70%, rgba(247, 244, 238, 0.05) 100% ), url("/img/syd-stroud-hero.jpg");
    background-size: cover;
    background-position: right center;
    transform: translateZ(0);
}

.ss-home-title {
    font-size: clamp(2.1rem, 5.2vw, 2.9rem);
    font-weight: 400;
    line-height: 1.15;
    margin-bottom: 1rem;
}

.ss-home-intro {
    font-size: 1.05rem;
    color: #6f6a64;
    max-width: 36rem;
    margin-bottom: 2rem;
}

.ss-home-actions .btn {
    margin-top: 0.5rem;
}

.ss-mature-note {
    font-size: 0.85rem;
    color: #8a857f;
    margin-top: 1.5rem;
}

@media (max-width: 991px) {
    .ss-home-hero {
        min-height: 70vh;
    }

    .ss-home-hero-bg {
        background-position: center top;
        background-image: linear-gradient( 180deg, rgba(247, 244, 238, 0.95) 0%, rgba(247, 244, 238, 0.85) 60%, rgba(247, 244, 238, 0.55) 100% ), url("/img/hero.jpg");
    }
}


/* =========================================================
   Home – Compact rows
   ========================================================= */

.ss-home-paths {
    background-color: var(--ss-paper);
}

.ss-path-row {
    padding: 2rem 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

    .ss-path-row:last-child {
        border-bottom: 0;
    }

.ss-path-image {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 10px;
    background-color: #e6e2dc;
    background-size: cover;
    background-position: center;
}

.ss-home-paths h3 {
    margin-bottom: 0.4rem;
}

.ss-home-paths p {
    margin-bottom: 0.6rem;
    color: #6f6a64;
}


/* =========================================================
   SydCity Skin (apply ONLY on SydCity pages)
   Wrap page with: <div class="sydcity-skin"> ... </div>
   ========================================================= */

.sydcity-skin {
    background: var(--sc-paper);
    color: var(--sc-ink);
}

    .sydcity-skin .text-muted {
        color: var(--sc-muted) !important;
    }

    .sydcity-skin #navbar {
        background: rgba(246, 241, 232, 0.92);
        border-bottom: 1px solid var(--sc-line);
    }

    .sydcity-skin .navbar .nav-link {
        color: rgba(31, 42, 58, 0.82) !important;
    }

        .sydcity-skin .navbar .nav-link:hover,
        .sydcity-skin .navbar .nav-link.active {
            color: var(--sc-ink) !important;
        }

    .sydcity-skin h1, .sydcity-skin h2, .sydcity-skin h3,
    .sydcity-skin h4, .sydcity-skin h5, .sydcity-skin h6 {
        color: var(--sc-ink);
    }

    .sydcity-skin .sc-panel {
        background: #fff;
        border: 1px solid var(--sc-line);
        border-radius: var(--sc-radius);
        box-shadow: var(--sc-shadow);
    }

        .sydcity-skin .sc-panel .sc-panel-inner {
            padding: 1.5rem;
        }

/* SydCity images look like panels (transparent-safe) */
.ss-sydcity-heroart img,
.ss-sydcity-strip img {
    border-radius: 10px;
    border: 1px solid rgba(0,0,0,0.10);
    box-shadow: 0 10px 25px rgba(0,0,0,0.08);
    background: transparent;
}

/* Optional: “peek” crop for a teaser area */
.ss-sydcity-landing #latest .ss-sydcity-strip {
    max-height: 520px;
    overflow: hidden;
    border-radius: 10px;
}

/* Archive thumbs */
.ss-archive-hero img {
    border-radius: 14px;
    border: 1px solid rgba(31,42,58,.12);
}

.ss-archive-thumb img {
    border-radius: 10px;
    border: 1px solid rgba(31,42,58,.12);
}

.ss-episode-title {
    font-size: 0.85rem;
    color: #6f6a64;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ss-sticky-details {
    top: calc(var(--ss-nav-total-h) + 12px);
}


/* =========================================================
   About page image block: cannot escape its column
   ========================================================= */

.ss-about-photo {
    width: 100%;
    height: 420px;
    border-radius: 12px;
    border: 1px solid rgba(0,0,0,0.10);
    box-shadow: 0 10px 25px rgba(0,0,0,0.08);
    background-color: transparent;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

@media (max-width: 767px) {
    .ss-about-photo {
        height: 320px;
    }
}

.ss-about-wrap::after {
    content: "";
    display: block;
    clear: both;
}

/* Figure gets the “frame”, image stays transparent */
.ss-about-float {
    float: left;
    width: 380px;
    max-width: 46%;
    margin: 0 22px 14px 0;
    padding: 10px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.35);
    border: 1px solid rgba(0,0,0,0.06);
    box-shadow: 0 10px 22px rgba(63, 59, 54, 0.06);
    backdrop-filter: blur(6px);
}

    .ss-about-float img {
        display: block;
        width: 100%;
        height: auto;
        border-radius: 12px;
        border: 1px solid rgba(0,0,0,0.10);
        box-shadow: 0 10px 25px rgba(0,0,0,0.08);
        background: transparent;
    }

@media (max-width: 767px) {
    .ss-about-float {
        float: none;
        width: 100%;
        max-width: 100%;
        margin: 0 0 14px 0;
    }
}


/* =========================================================
   Work detail image: show full art, no cropping
   ========================================================= */

.ss-art-frame {
    border: 1px solid rgba(0,0,0,0.08);
    padding: 12px;
    border-radius: 14px;
    background: rgba(255,255,255,0.55);
}

.ss-art-img {
    display: block;
    width: 100%;
    max-height: 78vh;
    object-fit: contain;
    background: transparent;
}


/* =========================================================
   Mobile — Portfolio Refinement
   Prevents filter squeeze + grid cramping
   ========================================================= */

@media (max-width: 576px) {

    .section {
        padding: 48px 0;
    }

    .page-title h1 {
        margin-top: 1.25rem !important;
    }

    /* FILTERS — wrap nicely instead of compressing */
    .filter-options {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
        padding-left: 0;
        margin-bottom: 18px;
    }

        .filter-options .list-inline-item {
            display: block;
            margin: 0;
            list-style: none;
        }

        .filter-options li a {
            display: inline-block;
            padding: 8px 12px;
            font-size: 0.9rem;
            border-radius: 999px;
            white-space: nowrap;
            text-decoration: none;
        }

    /* GRID — tighten gutters */
    #grid.row {
        --bs-gutter-x: 0.9rem;
        --bs-gutter-y: 0.9rem;
    }

    /* CARDS — reduce inner padding slightly */
    .work-container .content {
        padding: 12px;
    }

        .work-container .content h2 {
            margin-bottom: 6px;
        }

    .work-container {
        transition: transform var(--ss-dur) var(--ss-ease);
    }

        .work-container:hover {
            transform: translateY(-3px);
        }

        .work-container img {
            width: 100%;
            height: auto;
            display: block;
        }
}


/* =========================================================
   Puzzles — Konva Real Jigsaw (Canvas)
   ========================================================= */

.puzzle-wrapper {
    position: relative;
}

.puzzle-host {
    width: 100%;
    height: min(80vh, 920px);
    min-height: 720px;
    border: 1px solid rgba(0,0,0,.12);
    border-radius: 16px;
    overflow: hidden;
    background: rgba(255,255,255,.60);
    position: relative;
}

    .puzzle-host canvas {
        display: block;
    }

@media (max-width: 768px) {
    .puzzle-host {
        height: 70vh;
        min-height: 520px;
        border-radius: 12px;
    }
}

/* Floating reference preview (draggable) */
.puzzle-preview {
    position: absolute;
    right: 16px;
    bottom: 16px;
    width: 240px;
    max-width: 42vw;
    background: rgba(255,255,255,.94);
    border: 1px solid rgba(0,0,0,.15);
    border-radius: 12px;
    box-shadow: 0 12px 30px rgba(0,0,0,.20);
    padding: 8px;
    z-index: 30;
    cursor: grab;
    touch-action: none;
    user-select: none;
}

    .puzzle-preview.dragging {
        cursor: grabbing;
    }

    .puzzle-preview img {
        width: 100%;
        height: auto;
        display: block;
        border-radius: 8px;
        -webkit-user-drag: none;
        user-select: none;
        pointer-events: none;
    }

    .puzzle-preview.hidden {
        display: none;
    }