:root {
    --ink:#1d211e;
    --muted:#606761;
    --accent:#2b4d39;
    --cream:#f5f3ed;
    --line:#e7e7e1
}

* {
    box-sizing:border-box
}

html {
    scroll-behavior:smooth
}

body {
    margin:0;
    color:var(--ink);
    font:16px/1.65 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    background:#fff
}

a {
    color:inherit
}

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

.container {
    width:min(1140px,calc(100% - 40px));
    margin:auto
}

.site-header {
    background:white;
    border-bottom:1px solid var(--line)
}

.header-inner {
    min-height:86px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:25px
}

.brand {
    font-size:1.35rem;
    font-weight:800;
    letter-spacing:-.06em;
    text-decoration:none
}

.nav-links {
    display:flex;
    gap:28px;
    list-style:none;
    margin:0;
    padding:0
}

.nav-links a,.header-actions a {
    text-decoration:none;
    font-size:.9rem
}

.header-actions {
    display:flex;
    gap:18px
}

.hero {
    background:var(--cream)
}

.hero-grid {
    min-height:540px;
    display:grid;
    grid-template-columns:1.05fr .95fr;
    align-items:center;
    gap:70px
}

.eyebrow {
    color:var(--accent);
    font-size:.72rem;
    font-weight:800;
    letter-spacing:.18em
}

.hero h1 {
    font-size:clamp(3rem,6vw,5.5rem);
    line-height:1.06;
    letter-spacing:-.065em;
    margin:18px 0 22px;
    max-width:620px
}

.hero-copy {
    max-width:480px;
    color:var(--muted);
    font-size:1.1rem
}

.button {
    display:inline-flex;
    gap:26px;
    align-items:center;
    background:var(--accent);
    color:white;
    text-decoration:none;
    padding:15px 24px;
    border-radius:3px;
    font-weight:600;
    margin-top:18px
}

.button:hover {
    background:#183523
}

.hero-art {
    position:relative;
    height:390px;
    overflow:hidden;
    background:#d9ded1;
    display:grid;
    place-items:center
}

.art-circle {
    position:absolute;
    width:290px;
    height:290px;
    background:#b3bfae;
    border-radius:50%;
    top:48px;
    right:38px
}

.art-label {
    position:relative;
    font-weight:900;
    line-height:.88;
    letter-spacing:-.08em;
    font-size:4.6rem;
    color:#2a4332;
    transform:rotate(-9deg)
}

.art-label span {
    font-size:.8rem;
    letter-spacing:0
}

.section {
    padding:85px 0
}

.section-heading {
    display:flex;
    justify-content:space-between;
    align-items:end;
    margin-bottom:35px;
    gap:20px
}

h2 {
    font-size:clamp(2rem,3vw,2.8rem);
    line-height:1.2;
    letter-spacing:-.045em;
    margin:10px 0
}

.text-link {
    color:var(--accent);
    font-weight:700;
    text-underline-offset:5px
}

.about {
    background:#f8f8f5
}

.about-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    align-items:center;
    gap:85px
}

.about-image {
    height:400px;
    background:linear-gradient(135deg,#e3e8dd,#a6b7a3);
    display:grid;
    place-items:center
}

.about-image span {
    font-size:8rem;
    font-weight:900;
    letter-spacing:-.12em;
    color:#42634c
}

.about p {
    color:var(--muted)
}

.site-footer {
    background:#1d2821;
    color:#e6ebe4;
    padding:10px 0
}

.footer-inner {
    display:flex;
    justify-content:space-between;
    gap:20px;
    font-size:.85rem
}

.woocommerce ul.products li.product .button {
    margin-top:10px;
    background:var(--accent);
    padding:10px 17px
}

.woocommerce ul.products li.product .price {
    color:var(--accent);
    font-weight:700
}

.woocommerce ul.products li.product a img {
    background:#f4f4f2;
    aspect-ratio:1/1;
    object-fit:cover
}

.rookit-delivery-note {
    font-size:.9rem;
    color:var(--accent);
    padding:10px 14px;
    background:#eef3ed;
    border-left:3px solid var(--accent)
}

.post-card {
    padding:20px 0;
    border-bottom:1px solid var(--line)
}

.screen-reader-text {
    position:absolute;
    left:-9999px
}

.screen-reader-text:focus {
    left:10px;
    top:10px;
    z-index:999;
    background:white;
    padding:10px
}

@media(max-width:800px) {
    .header-inner {
        flex-wrap:wrap;
        padding:18px 0;
        gap:12px
    }

    .header-inner nav {
        order:3;
        width:100%
    }

    .nav-links {
        gap:20px
    }

    .hero-grid,.about-grid {
        grid-template-columns:1fr;
        gap:25px
    }

    .hero-grid {
        padding:65px 0
    }

    .hero-art {
        height:290px
    }

    .art-label {
        font-size:3.2rem
    }

    .section {
        padding:55px 0
    }

    .about-image {
        height:280px
    }

    .footer-inner {
        flex-direction:column;
        gap:0
    }

}

@media(max-width:480px) {
    .section-heading {
        align-items:start;
        flex-direction:column
    }

    .header-actions {
        gap:10px
    }

    .woocommerce ul.products[class*=columns-] li.product {
        width:100%;
        float:none;
        margin:0 0 30px
    }

}

/* Homepage photography */
.hero-photo,
.about-photo {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.hero-art,
.about-image {
    overflow: hidden;
}

/* Mobile navigation */
.menu-toggle,
.mobile-account-links {
    display: none;
}

.menu-toggle {
    width: 44px;
    height: 44px;
    border: 1px solid var(--line);
    border-radius: 4px;
    background: #fff;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
}

.menu-toggle-line {
    display: block;
    width: 20px;
    height: 2px;
    background: var(--ink);
}

/* White Add to Cart text, including hover and visited states */
.woocommerce ul.products li.product a.button,
.woocommerce ul.products li.product a.button:visited,
.woocommerce ul.products li.product a.button:hover,
.woocommerce ul.products li.product a.button:focus,
.woocommerce ul.products li.product a.added_to_cart {
    color: #fff;
}

.woocommerce ul.products li.product a.button:hover,
.woocommerce ul.products li.product a.button:focus {
    background: #183523;
}

@media (max-width: 800px) {
    .header-inner {
        position: relative;
        flex-wrap: nowrap;
        min-height: 70px;
        padding: 12px 0;
        gap: 12px;
    }

    .brand {
        font-size: 1.15rem;
        line-height: 1.2;
    }

    .menu-toggle {
        display: flex;
        margin-left: auto;
        flex-shrink: 0;
    }

    .header-actions {
        display: none;
    }

    .header-inner .site-navigation {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        z-index: 100;
        padding: 12px 16px 18px;
        background: #fff;
        border: 1px solid var(--line);
        box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
    }

    .header-inner .site-navigation.is-open {
        display: block;
    }

    .site-navigation .nav-links {
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    .site-navigation .nav-links a,
    .mobile-account-links a {
        display: block;
        padding: 11px 0;
        text-decoration: none;
        font-size: 0.95rem;
    }

    .mobile-account-links {
        display: flex;
        flex-direction: column;
        border-top: 1px solid var(--line);
        margin-top: 8px;
        padding-top: 8px;
    }
}