/* ======================= THEME: Murayama Woodworks =======================
   Colours from the shop's wood-sign icon: pale maple, walnut brown, purpleheart accent. */
:root {
  --color-bg:#f7f2ea; --color-surface:#fffcf7; --color-ink:#2b211a; --color-muted:#665a50;
  --color-accent:#6b4226; --color-accent-ink:#ffffff; --color-accent-2:#7a3352;
  --color-soft:#eadfcd; --color-rose:#e8c9a4; --color-deep:#33261d;
  --font-display:"Fraunces",Georgia,"Times New Roman",serif;
  --font-body:"DM Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-script:"Caveat","Segoe Script",cursive; --radius:12px;
}
/* Preview marker (try-before-you-buy) */
.preview-banner {
  background: var(--color-deep); color: #f3ece4; text-align: center;
  font: 500 .88rem/1.4 var(--font-body); padding: .6rem 1rem; letter-spacing: .01em;
}
.preview-banner strong { color: var(--color-rose); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; font-size: .8rem; margin-right: .15rem; }

/* Hero: rich overalls photo, dark sage wash on the text side */
.hero-img { object-position: 60% 40%; }
.hero-overlay { background:
    linear-gradient(90deg, rgba(30,24,20,.86) 0%, rgba(30,24,20,.66) 38%, rgba(30,24,20,.18) 64%, rgba(30,24,20,0) 78%); }
.hero h1 { max-width: 11ch; line-height: 1.02; }
.hero-tagline { color: #f4ede4; max-width: 30ch; }
.hero-tagline em { display: block; font-style: normal; font: 500 1.9rem/1.2 var(--font-script); color: var(--color-rose); margin-top: .45rem; }
.eyebrow--light { color: var(--color-rose); }
@media (max-width: 859px) {
  .hero-img { object-position: 55% 30%; }
  .hero-overlay { background: linear-gradient(180deg, rgba(30,24,20,.05) 0%, rgba(30,24,20,.35) 35%, rgba(30,24,20,.86) 62%, rgba(30,24,20,.94) 100%); }
}

/* tune the template's brown details toward sage + rose */
.maker-badge { background: var(--color-deep); }
.maker-badge span { color: var(--color-rose); }
.story-text p:not(.lead):not(.eyebrow):not(.signature), .steps li, .legal p { color: #3d4845; }
.join { color: #eef2ee; }
.join-copy p:not(.eyebrow) { color: #d6e0db; }
.join .eyebrow--light { color: var(--color-rose); }
.site-footer { background: var(--color-deep); color: #d5dfda; }
.muted-light { color: #a9b8b2; }
.footer-links a { color: #eef3f0; }
.footer-legal { color: #9cada6; }
.footer-legal a { color: #d2ddd8; }
.footer-links .js-shop { color: var(--color-rose); }
.testimonials .t-stars { color: #f6dcb4; }
.shop-modal::backdrop { background: rgba(28, 38, 35, .6); }
.legal a[href^="mailto:"] { overflow-wrap: anywhere; }

/* keep the full shop name visible on phones too */
.brand-name .brand-keep { font-style: italic; font-weight: 400; color: var(--color-muted); }
.site-nav .nav-shop { white-space: nowrap; }
@media (max-width: 420px) {
  .header-inner { gap: .6rem; }
  .brand { gap: .45rem; }
  .brand-logo { width: 38px; height: 38px; }
  .brand-name { font-size: 1rem; }
  .site-nav .nav-shop { padding: .5rem .85rem; font-size: .9rem; }
}
@media (max-width: 360px) { .brand-name .brand-keep { display: none; } }
/* the shop icon is a round badge on a sage square: show it round */
.brand-logo { border-radius: 8px; object-fit: cover; }
.modal-avatar, .closing-avatar { object-position: 50% 0%; }