:root{
  color-scheme: dark;
  --bg: #0c0a12; --bg2:#141019; --gold:#d6a854; --gold-light:#f1e2bf;
  --text:#e7ddc9; --text-dim:#a99a78; --line:rgba(214,168,84,.18);
}
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{ margin:0; background:var(--bg); color:var(--text); font-family:'Segoe UI',system-ui,sans-serif;
      line-height:1.55; padding-block: env(safe-area-inset-top,0px) env(safe-area-inset-bottom,0px); }
img{ max-width:100%; }
[hidden]{ display:none !important; }
a{ color:var(--gold); }
.wrap{ max-width:1180px; margin:0 auto; padding:0 1.25rem; }

header.site{ position:sticky; top:env(safe-area-inset-top,0px); z-index:20; backdrop-filter:blur(10px);
    background:rgba(12,10,18,.75); border-bottom:1px solid var(--line); }
header.site .wrap{ display:flex; align-items:center; justify-content:space-between; padding-block:.9rem; gap:1rem; flex-wrap:wrap; }
.brandmark{ font-weight:300; letter-spacing:.24em; text-transform:uppercase; font-size:1.05rem; color:var(--gold-light); text-decoration:none;
    display:inline-flex; align-items:center; }
.brandmark img{ height:36px; width:auto; max-width:none; display:block; }
nav.site a{ color:var(--text-dim); text-decoration:none; font-size:.8rem; letter-spacing:.12em; text-transform:uppercase; margin-left:1.4rem; }
nav.site a:hover, nav.site a[aria-current]{ color:var(--gold); }
nav.site{ display:flex; flex-wrap:wrap; }

.hero{ padding:4.5rem 0 3rem; text-align:center; position:relative; overflow:hidden;
    background: radial-gradient(ellipse at 50% -10%, rgba(214,168,84,.12), transparent 60%); }
/* .has-photo's actual background-image (including the url()) is set inline
   on the element itself, not here — url() inside a custom property resolves
   relative to the stylesheet that *consumes* the var, not the page that
   declares it, so building it from a --hero-img custom property here would
   resolve the path against assets/style.css's own location instead of the
   page's, producing a wrong (assets/assets/...) URL. */
.hero.has-photo{ background-size:cover; background-position:center 30%; }

.figure-photo{ border-radius:6px; overflow:hidden; border:1px solid var(--line); margin-bottom:1.4rem; }
.figure-photo img{ display:block; width:100%; height:auto; cursor:zoom-in; }
.figure-photo figcaption{ padding:.6rem .9rem; font-size:.76rem; color:var(--text-dim); background:var(--bg2); }
/* Standalone figures (not paired with side-by-side text) — centred, capped
   to a sensible reading width instead of stretching the full section width
   with nothing beside it. */
.figure-photo--centered{ max-width:480px; margin-left:auto; margin-right:auto; }

/* Click-to-enlarge lightbox — shared across every page via footer.php.
   Works on any <img> inside .figure-photo, site-wide. */
#lightbox{ position:fixed; inset:0; background:rgba(4,3,8,.92); z-index:100; display:none;
    align-items:center; justify-content:center; padding:2rem; cursor:zoom-out; }
#lightbox.open{ display:flex; }
#lightbox img{ max-width:100%; max-height:100%; border-radius:4px; box-shadow:0 10px 60px rgba(0,0,0,.6); }
#lightbox .lightbox-close{ position:fixed; top:calc(1rem + env(safe-area-inset-top,0px)); right:1rem;
    background:none; border:1px solid var(--line); color:var(--gold-light); width:2.4rem; height:2.4rem;
    border-radius:50%; font-size:1.3rem; line-height:1; cursor:pointer; }
.card .card-photo{ margin:-1.2rem -1.2rem .2rem; border-radius:6px 6px 0 0; overflow:hidden; }
.card .card-photo img{ display:block; width:100%; height:170px; object-fit:cover; }
.hero h1{ font-weight:300; letter-spacing:.06em; font-size:clamp(1.8rem,4.5vw,3rem); margin:0 0 .6rem; color:var(--gold-light); }
.hero p.lead{ max-width:680px; margin:0 auto; color:var(--text-dim); font-size:1.02rem; }
.badge-row{ display:flex; flex-wrap:wrap; gap:.6rem; justify-content:center; margin-top:1.6rem; }
.badge{ border:1px solid var(--line); border-radius:999px; padding:.4rem 1rem; font-size:.72rem; letter-spacing:.08em;
    text-transform:uppercase; color:var(--text-dim); }

section{ padding:3.2rem 0; border-top:1px solid var(--line); }
section h2{ font-weight:300; letter-spacing:.05em; font-size:clamp(1.3rem,3vw,1.8rem); color:var(--gold-light); margin:0 0 .4rem; }
section .section-intro{ color:var(--text-dim); max-width:680px; margin:0 0 1.8rem; }

.grid{ display:grid; gap:1.1rem; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); }
.card{ background:var(--bg2); border:1px solid var(--line); border-radius:6px; padding:1.2rem; display:flex; flex-direction:column; gap:.5rem; }
.card h3{ margin:0; font-size:1rem; font-weight:600; color:var(--gold-light); }
.card .price{ color:var(--gold); font-size:1.15rem; font-weight:600; }
.card .meta{ color:var(--text-dim); font-size:.78rem; text-transform:uppercase; letter-spacing:.06em; }
.card p{ margin:.2rem 0 0; color:var(--text); font-size:.9rem; flex:1; }
.card .cta{ margin-top:.6rem; display:inline-block; border:1px solid var(--line); border-radius:3px; padding:.5rem 1rem;
    text-decoration:none; color:var(--gold-light); font-size:.8rem; letter-spacing:.06em; text-transform:uppercase; text-align:center; }
.card .cta:hover{ background:rgba(214,168,84,.12); }
/* "Order on Etsy" is a real, immediate purchase action — styled red to stand
   out from "Enquire to Order" (gold/outline, same as every other CTA). */
.card .cta.cta--etsy{ border-color:#c23b3b; background:#c23b3b; color:#fff5f0; font-weight:600; }
.card .cta.cta--etsy:hover{ background:#a92f2f; border-color:#a92f2f; }
.card a.card-link{ color:inherit; text-decoration:none; display:flex; flex-direction:column; gap:.5rem; flex:1; }
.card a.card-link:hover h3{ color:var(--gold); }

.testi-grid{ display:grid; gap:1rem; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); }
blockquote.testi{ margin:0; background:var(--bg2); border-left:3px solid var(--gold); padding:1rem 1.2rem; border-radius:0 6px 6px 0; }
blockquote.testi p{ margin:0 0 .6rem; font-style:italic; color:var(--text); }
blockquote.testi cite{ color:var(--text-dim); font-size:.78rem; font-style:normal; }

.faq details{ border-bottom:1px solid var(--line); padding:.9rem 0; }
.faq summary{ cursor:pointer; color:var(--gold-light); font-weight:600; list-style:none; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary:before{ content:"+ "; color:var(--gold); }
.faq details[open] summary:before{ content:"\2013 "; }
.faq p{ margin:.6rem 0 0; color:var(--text-dim); }

.legal{ font-size:.82rem; color:var(--text-dim); }
.legal strong{ color:var(--text); }

.contact-form{ max-width:520px; display:flex; flex-direction:column; gap:1rem; margin-top:1.2rem; }
.contact-form .field{ display:flex; flex-direction:column; gap:.35rem; }
.contact-form label{ font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; color:var(--text-dim); }
.contact-form label .opt{ text-transform:none; letter-spacing:0; }
.contact-form input, .contact-form textarea{
    background:var(--bg2); border:1px solid var(--line); border-radius:4px; color:var(--text);
    padding:.65rem .8rem; font:inherit; resize:vertical; }
.contact-form input:focus, .contact-form textarea:focus{ outline:1px solid var(--gold); border-color:var(--gold); }
.contact-form button.cta{ align-self:flex-start; background:none; font:inherit; cursor:pointer; }
.contact-form button.cta:hover{ background:rgba(214,168,84,.12); }
.contact-form .hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.form-status{ padding:.8rem 1rem; border-radius:4px; font-size:.9rem; margin:1rem 0 0; }
.form-status--ok{ background:rgba(94,163,94,.12); border:1px solid rgba(94,163,94,.4); color:#bfe6bf; }
.form-status--err{ background:rgba(200,90,90,.12); border:1px solid rgba(200,90,90,.4); color:#f0bcbc; }

footer.site{ border-top:1px solid var(--line); padding:2.2rem 0; color:var(--text-dim); font-size:.8rem; }
footer.site a{ color:var(--gold-light); }
footer.site .foot-links{ display:flex; flex-wrap:wrap; gap:.4rem 1.2rem; margin-bottom:1rem; }
footer.site .foot-bottom{ border-top:1px solid var(--line); padding-top:1rem; text-align:center; }

/* Breadcrumb, used on blog/faq/areas sub-pages */
.breadcrumb{ font-size:.78rem; color:var(--text-dim); margin-bottom:1.4rem; }
.breadcrumb a{ color:var(--text-dim); text-decoration:underline; }
.breadcrumb a:hover{ color:var(--gold); }

/* Article/blog prose */
.article-meta{ color:var(--text-dim); font-size:.8rem; text-transform:uppercase; letter-spacing:.08em; margin-bottom:.6rem; }
article.prose{ max-width:760px; }
article.prose p{ margin:0 0 1.1rem; }
.related-posts{ margin-top:2.4rem; padding-top:1.6rem; border-top:1px solid var(--line); }

@media (max-width:600px){ nav.site a{ margin-left:.9rem; } }