/* ============================================================
   Wood & Bone Creations — Design System
   ============================================================ */

/* Fonts are loaded by the <link> in index.html. An @import here would be a
   second, redundant request that also blocks CSS parsing. */

/* ---- Custom Properties ---- */
:root {
    --wood-dark:   #140904;
    --wood-mid:    #7A3218;
    --wood-warm:   #B85C2A;
    --wood-light:  #D4956A;
    --cream:       #FAF2EB;
    --cream-dark:  #F0E0D2;
    --text:        #2A1008;
    --text-muted:  #8B5040;
    --white:       #FFFFFF;

    /* True black gallery wall. The specimen photos are shot on #000, so
       matching it exactly makes their edges vanish and the bones appear
       to float on the page instead of sitting in visible rectangles. */
    --gallery:     #000000;

    /* One family throughout. Montserrat's wide geometric forms are the
       closest free match to the lettering in the logo SVG, so headings
       read as an extension of the mark rather than competing with it.
       Hierarchy comes from weight, size, and tracking — not a second face. */
    --font-display: 'Montserrat', system-ui, sans-serif;
    --font-body:    'Montserrat', system-ui, sans-serif;

    --section-pad: clamp(5rem, 10vw, 9rem);
    --container:   1180px;
    --radius:      4px;

    --transition: 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

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

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

body {
    font-family: var(--font-body);
    background-color: var(--cream);
    color: var(--text);
    overflow-x: hidden;
    line-height: 1.6;
}

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

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

/* ---- Typography ---- */
h1, h2, h3 {
    font-family: var(--font-display);
    line-height: 1.15;
    font-weight: 700;
}

/* Sans reads larger and heavier than the serif it replaced, so the display
   sizes come down and the tracking tightens — geometric caps need negative
   tracking to stop looking loose at these sizes. */
h2 {
    font-size: clamp(1.9rem, 4vw, 2.9rem);
    color: var(--wood-dark);
    letter-spacing: -0.02em;
}

/* Montserrat has no true italic, only a mechanical oblique that looks wrong
   at display size. The accent is carried by weight and colour instead. */
h2 em {
    font-style: normal;
    font-weight: 300;
    color: var(--wood-mid);
}

h3 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--wood-dark);
}

/* ---- Layout Helpers ---- */
.section-inner {
    max-width: var(--container);
    margin: 0 auto;
    padding: var(--section-pad) clamp(1.5rem, 5vw, 3rem);
}

.section-header {
    text-align: center;
    margin-bottom: 4rem;
}

.section-label {
    display: block;
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--wood-warm);
    margin-bottom: 0.75rem;
}

.section-label.light {
    color: var(--wood-light);
}

/* Short hairline under centered section headings */
.section-header h2::after {
    content: '';
    display: block;
    width: 48px;
    height: 2px;
    margin: 1.25rem auto 0;
    background: linear-gradient(90deg, var(--wood-warm), var(--wood-light));
    border-radius: 2px;
}

.section-intro {
    max-width: 520px;
    margin: 1.5rem auto 0;
    color: var(--text-muted);
    font-size: 1rem;
    line-height: 1.75;
    font-weight: 300;
}

/* ---- Paper grain + warm wash, so the light sections aren't flat fills.
   Grain is an inline SVG data URI: no extra request, nothing external. ---- */
.textured {
    position: relative;
}

.textured > * {
    position: relative;
    z-index: 1;
}

.textured::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
        radial-gradient(ellipse at 15% 0%, rgba(184, 92, 42, 0.07) 0%, transparent 55%),
        radial-gradient(ellipse at 85% 100%, rgba(122, 50, 24, 0.06) 0%, transparent 55%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}

/* ---- Section boundaries: a crisp wood-gradient rule reads as intentional
   craft detailing, where a soft fade would just look muddy. ---- */
.edge-rule {
    position: relative;
}

.edge-rule::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        var(--wood-mid) 20%,
        var(--wood-warm) 50%,
        var(--wood-mid) 80%,
        transparent 100%
    );
    z-index: 2;
}

/* ============================================================
   NAVIGATION
   ============================================================ */
#navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    transition: background var(--transition), box-shadow var(--transition);
}

#navbar.scrolled {
    background: rgba(250, 242, 235, 0.96);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 1px 0 rgba(122, 50, 24, 0.12);
}

.nav-inner {
    max-width: var(--container);
    margin: 0 auto;
    padding: 1.1rem clamp(1.5rem, 5vw, 3rem);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.nav-logo {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    text-decoration: none;
}

.nav-icon {
    width: 28px;
    height: auto;
    fill: var(--cream);
    filter: drop-shadow(0 1px 3px rgba(0,0,0,0.5));
    transition: fill var(--transition);
    flex-shrink: 0;
}

#navbar.scrolled .nav-icon {
    fill: var(--wood-dark);
    filter: none;
}

/* Uppercase and tracked to echo the logotype, so the mark and the wordmark
   read as one lockup instead of two different treatments of the same name. */
.nav-brand {
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--cream);
    letter-spacing: 0.08em;
    transition: color var(--transition);
}

#navbar.scrolled .nav-brand {
    color: var(--wood-dark);
}

.nav-links {
    display: flex;
    list-style: none;
    gap: 2.5rem;
}

.nav-links a {
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(250, 242, 235, 0.9);
    transition: color var(--transition);
    position: relative;
    padding-bottom: 2px;
}

.nav-links a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 1px;
    background: var(--wood-warm);
    transition: width var(--transition);
}

.nav-links a:hover::after {
    width: 100%;
}

#navbar.scrolled .nav-links a {
    color: var(--wood-mid);
}

#navbar.scrolled .nav-links a:hover {
    color: var(--wood-dark);
}

.nav-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
}

.nav-toggle span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--cream);
    border-radius: 2px;
    transition: background var(--transition);
}

#navbar.scrolled .nav-toggle span {
    background: var(--wood-dark);
}

/* ============================================================
   HERO
   ============================================================ */
#hero {
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 600px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: var(--gallery);
}

/* Photo lives on its own layer so it can be filtered without touching the
   content. The wood macro is intensely saturated at full bleed, so it gets
   pulled well back: desaturated, darkened, and softened. Scaled up slightly
   to hide the transparent edge the blur would otherwise leave. */
.hero-media {
    position: absolute;
    inset: 0;
    background: url('images/background04.jpg') center center / cover no-repeat;
    filter: saturate(0.62) brightness(0.88) blur(1px);
    transform: scale(1.04);
    z-index: 0;
}

/* Even scrim across the whole frame plus a vignette. The old gradient
   dropped to fully transparent at 60%, leaving the busiest part of the
   image unshaded directly behind the logotype. */
.hero-overlay {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(
            ellipse at 50% 45%,
            rgba(11, 5, 3, 0.28) 0%,
            rgba(11, 5, 3, 0.60) 55%,
            rgba(11, 5, 3, 0.84) 100%
        ),
        linear-gradient(
            to bottom,
            rgba(11, 5, 3, 0.45) 0%,
            rgba(11, 5, 3, 0.18) 35%,
            rgba(11, 5, 3, 0.70) 100%
        );
    z-index: 1;
}

.hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 2rem;
    /* Must be constrained, or wide children (.hero-summary) size this flex
       item past the viewport and the whole hero shifts off-centre. */
    width: 100%;
    max-width: 56rem;
    margin: 0 auto;
    animation: heroFadeIn 1.2s ease-out forwards;
}

@keyframes heroFadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

.hero-logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(1.75rem, 4vw, 3rem);
}

.hero-figure {
    width: clamp(200px, 20vw, 320px);
    height: auto;
    fill: var(--cream);
    filter: drop-shadow(0 4px 20px rgba(0,0,0,0.6));
}

.hero-logotype {
    width: clamp(240px, 60vw, 680px);
    height: auto;
    fill: var(--cream);
    filter: drop-shadow(0 2px 12px rgba(0,0,0,0.5));
}

.hero-tagline {
    margin-top: 1.5rem;
    font-family: var(--font-body);
    font-size: clamp(0.85rem, 1.8vw, 1.05rem);
    font-weight: 300;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: rgba(250, 242, 235, 0.85);
}

/* Plain-language line — the tagline alone never says what we make. */
.hero-summary {
    max-width: min(34rem, 100%);
    margin: 1.25rem auto 0;
    font-size: clamp(0.95rem, 1.6vw, 1.05rem);
    font-weight: 300;
    line-height: 1.7;
    color: rgba(250, 242, 235, 0.72);
}

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

.btn {
    display: inline-block;
    padding: 0.9rem 2.25rem;
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    border-radius: var(--radius);
    border: 1.5px solid transparent;
    transition: background var(--transition), border-color var(--transition),
                color var(--transition), transform var(--transition);
}

.btn:hover {
    transform: translateY(-2px);
}

.btn-solid {
    background: var(--wood-warm);
    border-color: var(--wood-warm);
    color: #1A0B04;
}

.btn-solid:hover {
    background: var(--wood-light);
    border-color: var(--wood-light);
}

.btn-ghost {
    border-color: rgba(250, 242, 235, 0.45);
    color: var(--cream);
}

.btn-ghost:hover {
    border-color: var(--cream);
    background: rgba(250, 242, 235, 0.1);
}

/* Scroll Indicator */
.scroll-indicator {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    animation: bounce 2.2s ease-in-out infinite;
    transition: opacity 0.4s;
}

.scroll-indicator svg {
    width: 28px;
    height: 28px;
    stroke: rgba(250, 242, 235, 0.7);
    fill: none;
    stroke-width: 1.5;
}

@keyframes bounce {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50%       { transform: translateX(-50%) translateY(10px); }
}

/* ============================================================
   ABOUT
   ============================================================ */
#about {
    background: var(--cream);
}

/* Image column runs wider than the text: the mount photos are 16:9, so an
   even split leaves them looking undersized against a tall copy block. */
.about-grid {
    display: grid;
    grid-template-columns: 1fr 1.25fr;
    gap: clamp(2.5rem, 6vw, 5rem);
    align-items: center;
}

.about-text p {
    color: var(--text-muted);
    font-size: 1rem;
    line-height: 1.8;
    margin-bottom: 1.25rem;
}

.about-text p:last-child {
    margin-bottom: 0;
}

/* Framed product shot. 16:9 matches the photo, so `cover` crops nothing —
   a fixed height would slice the ends off the mount. */
.about-visual {
    aspect-ratio: 16 / 9;
}

.wood-panel {
    width: 100%;
    height: 100%;
    border-radius: var(--radius);
    background: #000 url('images/product4.jpg') center center / cover no-repeat;
    position: relative;
    overflow: hidden;
    box-shadow: 0 18px 40px rgba(42, 16, 8, 0.18);
}

/* Only a whisper of a wash — a product shot shouldn't be muddied the way
   a plain texture could take. */
.wood-panel::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        rgba(42, 16, 8, 0.10) 0%,
        transparent 45%,
        rgba(42, 16, 8, 0.18) 100%
    );
}

.wood-panel-accent {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--wood-warm), transparent);
}

/* ============================================================
   PRODUCTS / GALLERY
   ============================================================ */
/* Gallery wall. The specimen photos are shot on black, so a near-black
   section lets their backgrounds dissolve into the page and the bones
   appear to float — instead of each photo sitting in a hard rectangle. */
#products {
    background: var(--gallery);
}

#products h2,
#products .section-header h2 {
    color: var(--cream);
}

#products .section-intro {
    color: rgba(250, 242, 235, 0.6);
}

.product-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(1.75rem, 4vw, 3rem);
}

.product-card {
    background: transparent;
    cursor: pointer;
}

.product-image {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: var(--radius);
}

.product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.product-card:hover .product-image img {
    transform: scale(1.06);
}

/* Warm wash on hover rather than a dark one — the photo is already dark. */
.product-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(184, 92, 42, 0.22) 0%,
        transparent 65%
    );
    opacity: 0;
    transition: opacity var(--transition);
}

.product-card:hover .product-overlay {
    opacity: 1;
}

.product-info {
    position: relative;
    padding: 1.35rem 0 0;
    border-top: 1px solid rgba(184, 92, 42, 0.25);
    margin-top: 1.35rem;
    transition: border-color var(--transition);
}

.product-card:hover .product-info {
    border-color: rgba(184, 92, 42, 0.65);
}

.product-index {
    display: block;
    font-family: var(--font-body);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    color: var(--wood-warm);
    margin-bottom: 0.5rem;
}

.product-info h3 {
    font-size: 1.15rem;
    color: var(--cream);
    margin-bottom: 0.3rem;
    transition: color var(--transition);
}

.product-card:hover .product-info h3 {
    color: var(--wood-light);
}

.product-info p {
    font-size: 0.85rem;
    color: rgba(250, 242, 235, 0.55);
    font-weight: 300;
}

/* ============================================================
   SERVICES
   ============================================================ */
/* Slightly warmer than the gallery black above it, with a hairline at the
   join so the two dark sections read as separate chapters. */
#services {
    background: var(--wood-dark);
    color: var(--cream);
    border-top: 1px solid rgba(184, 92, 42, 0.22);
}

#services h2 {
    color: var(--cream);
}

#services .section-intro {
    color: rgba(250, 242, 235, 0.6);
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.service-card {
    position: relative;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(184, 92, 42, 0.2);
    border-radius: var(--radius);
    padding: 2.5rem 2rem;
    overflow: hidden;
    transition: background var(--transition), border-color var(--transition), transform var(--transition);
}

/* Accent bar that draws across the top edge on hover */
.service-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--wood-warm), var(--wood-light));
    transition: width 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.service-card:hover::before {
    width: 100%;
}

.service-card:hover {
    background: rgba(184, 92, 42, 0.08);
    border-color: rgba(184, 92, 42, 0.5);
    transform: translateY(-4px);
}

.service-icon {
    width: 48px;
    height: 48px;
    color: var(--wood-warm);
    margin-bottom: 1.5rem;
    transition: color var(--transition), transform var(--transition);
}

.service-card:hover .service-icon {
    color: var(--wood-light);
    transform: translateY(-2px);
}

.service-icon svg {
    width: 100%;
    height: 100%;
}

.service-card h3 {
    color: var(--cream);
    font-size: 1.1rem;
    margin-bottom: 0.85rem;
}

.service-card p {
    color: rgba(250, 242, 235, 0.65);
    font-size: 0.9rem;
    line-height: 1.75;
    font-weight: 300;
}

/* ============================================================
   CONTACT
   ============================================================ */
#contact {
    background: var(--cream);
    border-top: 3px solid var(--wood-warm);
}

.contact-inner {
    text-align: center;
}

.contact-intro {
    color: var(--text-muted);
    font-size: 1rem;
    max-width: 480px;
    margin: 1rem auto 0;
    line-height: 1.75;
}

.contact-items {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 2rem 4rem;
    margin-top: 3.5rem;
}

.contact-item {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    color: var(--text-muted);
    font-size: 0.95rem;
    transition: color var(--transition);
    text-decoration: none;
}

a.contact-item:hover {
    color: var(--wood-dark);
}

a.contact-item:hover .contact-icon {
    color: var(--wood-warm);
}

.contact-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1.5px solid var(--wood-light);
    border-radius: 50%;
    color: var(--wood-mid);
    flex-shrink: 0;
    transition: border-color var(--transition), color var(--transition);
}

.contact-icon svg {
    width: 18px;
    height: 18px;
}

/* ============================================================
   FOOTER
   ============================================================ */
footer {
    background: var(--wood-dark);
    padding: 2.5rem 1.5rem;
}

.footer-inner {
    max-width: var(--container);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.footer-icon {
    width: 32px;
    height: auto;
    fill: rgba(250, 242, 235, 0.35);
}

footer p {
    font-size: 0.8rem;
    color: rgba(250, 242, 235, 0.45);
    letter-spacing: 0.04em;
}

/* ============================================================
   SCROLL-REVEAL ANIMATIONS
   ============================================================ */
.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition:
        opacity 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

.reveal-delay-1 {
    transition-delay: 0.15s;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* Tablet */
@media (max-width: 1024px) {
    .product-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .services-grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* Mobile */
@media (max-width: 768px) {
    /* Nav */
    .nav-toggle {
        display: flex;
    }

    /* Uppercase runs wide — pull it in so it clears the toggle on phones */
    .nav-brand {
        font-size: 0.75rem;
        letter-spacing: 0.05em;
    }

    .nav-links {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: rgba(250, 242, 235, 0.98);
        backdrop-filter: blur(10px);
        flex-direction: column;
        gap: 0;
        padding: 0.5rem 0 1rem;
        box-shadow: 0 8px 24px rgba(42, 16, 8, 0.12);
    }

    .nav-links.open {
        display: flex;
    }

    .nav-links li {
        width: 100%;
    }

    .nav-links a {
        display: block;
        padding: 0.85rem clamp(1.5rem, 5vw, 3rem);
        color: var(--wood-mid);
        font-size: 0.9rem;
    }

    .nav-links a::after {
        display: none;
    }

    /* Hero — lighter blur, since large blurred layers are costly on mobile GPUs */
    .hero-media {
        filter: blur(2.5px) saturate(0.9);
    }

    .hero-logotype {
        width: clamp(200px, 85vw, 340px);
    }

    .hero-actions {
        flex-direction: column;
        align-items: stretch;
        max-width: 17rem;
        margin-left: auto;
        margin-right: auto;
    }

    /* About */
    .about-grid {
        grid-template-columns: 1fr;
    }

    .about-visual {
        order: -1;
    }

    /* Products */
    .product-grid {
        grid-template-columns: 1fr;
    }

    /* Services */
    .services-grid {
        grid-template-columns: 1fr;
    }

    /* Contact */
    .contact-items {
        flex-direction: column;
        align-items: center;
        gap: 1.5rem;
    }
}

@media (max-width: 480px) {
    .hero-figure {
        max-width: 60%;
    }
}

/* Short viewports (laptops, landscape phones): the hero gained a summary
   line and a second button, so shrink the mark and tighten the stack to
   keep everything clear of the scroll indicator. */
@media (max-height: 820px) {
    .hero-figure {
        width: clamp(120px, 12vw, 190px);
    }

    .hero-logo {
        gap: 1.25rem;
    }

    .hero-tagline {
        margin-top: 1rem;
    }

    .hero-summary {
        margin-top: 0.9rem;
    }

    .hero-actions {
        margin-top: 1.75rem;
    }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .reveal {
        opacity: 1;
        transform: none;
    }
}