/* ====== Moxie Color – clean stylesheet ====== */
/* Design tokens */
:root{
  --bg:#ffffff;
  --fg:#111111;
  --muted:#6b7280;
  --accent:#0ea5e9;
  --maxw:1100px;
  --radius:.75rem;
}

/* Base */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--fg);
  background:var(--bg);
  line-height:1.6;
}
h1,h2,h3{line-height:1.2}

/* Layout helper */
.container{max-width:var(--maxw); margin:0 auto; padding:0 1rem}

/* ---------- HEADER ---------- */
.skip-link{
  position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip-link:focus{
  left:1rem; top:1rem; z-index:1001; width:auto; height:auto;
  background:var(--bg); color:var(--fg);
  padding:.5rem .75rem; border-radius:.5rem; box-shadow:0 6px 18px rgba(0,0,0,.12);
}

/* Sticky, light “frosted” header */
.site-header{
  position:sticky; top:0; z-index:1000;
  background:rgba(255,255,255,.75);
  backdrop-filter:saturate(180%) blur(12px);
  -webkit-backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid #eee;
}
.site-header .wrap{
  max-width:var(--maxw);
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:flex-start; /* mobile: logo left */
  gap:1rem;
  padding:.75rem 1rem;
}

/* Brand (works for <img> or <picture> > img) */
.brand{ display:flex; align-items:center; gap:.5rem; text-decoration:none; color:var(--fg); }
.brand-pic{ display:block; line-height:0; }
.brand-mark{ height:44px; width:auto; display:block; } /* mobile size */

/* Primary nav */
.site-header .site-nav .nav-list{
  list-style:none; margin:0; padding:0;
  position:absolute; right:1rem; top:62px;
  display:none; flex-direction:column; gap:.25rem; padding:.5rem;
  background:var(--bg); border:1px solid #eee; border-radius:.75rem;
  box-shadow:0 10px 28px rgba(0,0,0,.12);
}
.site-header .site-nav a{
  position:relative;
  display:inline-block;
  padding:.5rem .8rem;
  font-weight:600;
  letter-spacing:.2px;
  color:var(--fg);
  text-decoration:none;
  border:1px solid transparent;
  border-radius:.55rem;
}
/* underline animation */
.site-header .site-nav a::after{
  content:""; position:absolute; left:.8rem; right:.8rem; bottom:.3rem; height:2px;
  background:var(--accent); border-radius:2px;
  transform:scaleX(.4); opacity:0; transition:transform .16s ease, opacity .16s ease;
}
.site-header .site-nav a:hover,
.site-header .site-nav a:focus-visible{ background:rgba(0,0,0,.04); outline:none; }
.site-header .site-nav a:hover::after,
.site-header .site-nav a:focus-visible::after{ opacity:1; transform:scaleX(1); }
.site-header .site-nav a[aria-current="page"]::after{ opacity:1; transform:scaleX(1); }

/* Burger (checkbox hack) */
.nav-toggle{ display:none; }
.nav-burger{
  margin-left:auto; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  width:40px; height:36px; padding:0; line-height:0;
  border:1px solid rgba(0,0,0,.1); border-radius:.6rem;
}
.nav-burger span{ display:block; width:20px; height:2px; background:currentColor; margin:3px 0; border-radius:2px; }
.nav-toggle:checked ~ .nav-burger{ outline:2px solid var(--accent); outline-offset:2px; }
.nav-toggle:checked ~ nav .nav-list{ display:flex; }

/* ---------- DESKTOP/TABLET HEADER ---------- */
@media (min-width:781px){
  /* Stack and center: logo then nav */
  .site-header .wrap{
    flex-direction:column; align-items:center; justify-content:center;
    gap:.25rem; padding-top:.6rem; padding-bottom:.4rem;
  }
  .brand-mark{ height:clamp(56px, 9vw, 96px); }  /* responsive wordmark size */

  /* Nav becomes a normal row centered under the logo */
  .site-header .site-nav .nav-list{
    position:static; display:flex; flex-direction:row; justify-content:center;
    gap:1rem; padding:0; margin:0; background:transparent; border:0; box-shadow:none;
  }
  .site-header .site-nav a{ background:transparent; border-color:transparent; padding:.4rem .6rem; }
  .site-header .site-nav a:hover,
  .site-header .site-nav a:focus-visible{ background:transparent; }
  .site-header .site-nav a::after{ left:.6rem; right:.6rem; bottom:.2rem; }
  .nav-burger, .nav-toggle{ display:none; }
}

/* ---------- HERO ---------- */
.hero{ display:block; margin-top:1rem; }
.hero h2{ font-size:2rem; margin:0 0 .5rem; }
.hero p{ margin:0 0 1rem; }
.hero-image img{ width:100%; height:auto; border-radius:12px; box-shadow:0 8px 24px rgba(0,0,0,.08); }

/* 2-column hero on wider screens */
@media (min-width:900px){
  .hero{ display:grid; grid-template-columns:1.1fr .9fr; gap:1.5rem; align-items:center; }
}

/* === Sitewide Buttons === */
:root{
  --btn-bg:#111;           /* primary background */
  --btn-fg:#fff;           /* primary text       */
  --btn-border:#111;
  --btn-bg-hover:#000;
  --btn-border-hover:#000;
  --btn-radius:.6rem;

  /* ghost variant */
  --btn-ghost-bg:#fff; --btn-ghost-fg:#111; --btn-ghost-border:#ccc;
  --btn-ghost-bg-hover:#f6f6f6; --btn-ghost-border-hover:#bbb;

  /* shadows + focus */
  --shadow-1: 0 2px 6px rgba(0,0,0,.08);
  --shadow-2: 0 6px 18px rgba(0,0,0,.18);
  --focus-ring:#4c9ffe;
}

/* Works for <a>, <button>, and <input type=submit> when they have .btn */
/* Lifted buttons */
.btn, button.btn, input[type="submit"].btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:.45rem; padding:.6rem .95rem;
  border-radius:.6rem; border:1px solid var(--btn-border, #111);
  background:var(--btn-bg, #111); color:var(--btn-fg, #fff);
  text-decoration:none; font-weight:600; line-height:1; cursor:pointer;
  box-shadow:0 2px 6px rgba(0,0,0,.08);
  transform: translateY(0);                 /* base */
  transition: transform .12s ease-out, box-shadow .12s ease-out,
              background .15s, border-color .15s, color .15s;
  will-change: transform, box-shadow;
  -webkit-appearance: none; appearance: none; /* for <input> */
}

.btn:hover,
button.btn:hover,
input[type="submit"].btn:hover{
  transform: translateY(-2px);              /* the lift */
  box-shadow:0 6px 18px rgba(0,0,0,.18);
}

.btn:active,
button.btn:active,
input[type="submit"].btn:active{
  transform: translateY(0);                 /* press back down */
  box-shadow:0 2px 6px rgba(0,0,0,.08);
}

/* Ghost/secondary style (for lighter CTAs) */
.btn-ghost, button.btn-ghost, input[type="submit"].btn-ghost{
  background:#fff; color:#111; border-color:#ddd;
}
.btn-ghost:hover{ background:#f6f6f6; border-color:#bbb; }

/* Optional sizes */
.btn-sm{ padding:.45rem .75rem; font-size:.95rem; }
.btn-lg{ padding:.75rem 1.1rem; font-size:1.05rem; }

@media (prefers-reduced-motion: reduce){
  .btn, button.btn, input[type="submit"].btn{
    transition: background .15s, border-color .15s, color .15s;
  }
  .btn:hover, .btn:active,
  button.btn:hover, button.btn:active,
  input[type="submit"].btn:hover, input[type="submit"].btn:active{
    transform:none; box-shadow:0 2px 6px rgba(0,0,0,.08);
  }
}
/* Dark theme overrides — works with either a class toggle OR system dark mode */
.dark, [data-theme="dark"],
@media (prefers-color-scheme: dark){
  :root{
    /* Primary flips to light-on-dark background for contrast on dark pages */
    --btn-bg:#fff; --btn-fg:#111; --btn-border:#fff;
    --btn-bg-hover:#eaeaea; --btn-border-hover:#eaeaea;

    /* Ghost becomes transparent with light text + subtle border */
    --btn-ghost-bg: transparent; --btn-ghost-fg:#f3f3f3; --btn-ghost-border:#444;
    --btn-ghost-bg-hover:#1b1b21; --btn-ghost-border-hover:#666;

    --shadow-1: 0 2px 6px rgba(0,0,0,.6);
    --shadow-2: 0 12px 24px rgba(0,0,0,.7);
    --focus-ring:#7db3ff;
  }
}

/* Make the components use those vars */
.btn, button.btn, input[type="submit"].btn{
  box-shadow: var(--shadow-1);
  outline-color: var(--focus-ring);
}
.btn:hover{ box-shadow: var(--shadow-2); }

.btn-ghost, button.btn-ghost, input[type="submit"].btn-ghost{
  background: var(--btn-ghost-bg);
  color: var(--btn-ghost-fg);
  border-color: var(--btn-ghost-border);
}
.btn-ghost:hover{
  background: var(--btn-ghost-bg-hover);
  border-color: var(--btn-ghost-border-hover);
}

/* Helps native controls pick the right palette */
html{ color-scheme: light dark; }
/* ---------- FOOTER (clean) ---------- */
.site-footer{
  border-top:1px solid #eee;
  margin-top:2rem;
  padding:1rem 0;
  color:var(--muted);
  font-size:.9rem;
}

/* wrapper centers the row */
.site-footer .social{ text-align:center; }

/* icon list: side-by-side, centered */
.footer-links{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:.9rem;
  flex-wrap:wrap;
  list-style:none;
  margin:0;
  padding:0;
}
.footer-links li{ display:inline-flex; }
.footer-links a.link{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  text-decoration:none;
  color:inherit;
}

/* icon sizing in footer */
.site-footer .footer-links .icon{
  width:1.25rem;
  height:1.25rem;
  fill:currentColor;
}

/* hide any visible labels in the footer (icons only) */
.site-footer .footer-links .label{ display:none !important; }

/* screen-reader-only utility (safe if already defined elsewhere) */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

 /* === DARK MODE: hard switch === */
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0f0f10;
    --fg:#f5f5f5;
    --muted:#a6adb5;
    /* --accent:#3bb7ff;  // optional brighter accent on dark */
  }

  /* force the page to flip even if earlier rules were more specific */
  html, body{
    background: var(--bg) !important;
    color: var(--fg) !important;
  }

  /* header + menu */
  .site-header{ background: rgba(16,16,16,.75) !important; border-bottom-color:#2a2a2a !important; }
  .site-header .site-nav a:hover,
  .site-header .site-nav a:focus-visible{ background:rgba(255,255,255,.08); }
  .site-header .site-nav .nav-list{ background:#121212; border-color:#333; }
  .nav-burger{ border-color:#333; }

  /* cards/buttons/footer */
  .hero-image img{ box-shadow:0 10px 28px rgba(0,0,0,.55); }
  .button.outline{ color:var(--accent); border-color:var(--accent); }
  .site-footer{ border-top-color:#2a2a2a; color:var(--muted); }
  .site-footer .footer-links{ color:var(--fg); }
}
                
/* --- Mobile header alignment --- */
@media (max-width: 780px){
  .site-header .wrap{ justify-content:flex-start; padding-top:.5rem; padding-bottom:.5rem; }
  .brand-mark{ height:40px; }
  .nav-burger{
    margin-left:auto; display:flex; align-items:center; justify-content:center;
    width:40px; height:36px; padding:0; line-height:0; border-radius:.6rem;
  }
  .nav-burger span{ width:20px; height:2px; margin:3px 0; background:currentColor; border-radius:2px; }
  .site-header .site-nav .nav-list{ right:.75rem; top:56px; z-index:1001; }
}

/* === Robust hamburger: always 3 bars === */
@media (max-width: 780px){
  /* use only the first span; hide any extra spans safely */
  .nav-burger span { position: relative; display:block; width:22px; height:2px; background: currentColor; border-radius:2px; }
  .nav-burger span + span,
  .nav-burger span + span + span { display: none !important; }

  .nav-burger span::before,
  .nav-burger span::after{
    content: "";
    position: absolute; left: 0; width: 100%; height: 2px;
    background: currentColor; border-radius: 2px;
  }
  .nav-burger span::before{ top: -6px; }
  .nav-burger span::after { top:  6px; }

  /* ensure the dropdown is vertical + positioned correctly */
  .site-header .site-nav .nav-list{
    display: none;                 /* hidden until checked */
    flex-direction: column !important;
    right: .75rem; top: 56px;
    min-width: 12rem;
  }
  .site-header .site-nav .nav-list li { margin: 0; }
  .site-header .site-nav .nav-list a{ display:block; padding:.6rem .8rem; }
  .nav-toggle:checked ~ nav .nav-list{ display:flex; }
}

/* Burger → X animation */
@media (max-width: 780px){
  .nav-burger span,
  .nav-burger span::before,
  .nav-burger span::after{
    transition: transform .18s ease, opacity .18s ease, background .18s ease;
  }
  /* hide middle line when open */
  .nav-toggle:checked ~ .nav-burger span{ background: transparent; }
  .nav-toggle:checked ~ .nav-burger span::before{
    transform: translateY(6px) rotate(45deg);
  }
  .nav-toggle:checked ~ .nav-burger span::after{
    transform: translateY(-6px) rotate(-45deg);
  }
}
/* --- Footer social: brand tints on hover/focus --- */
.footer-links a.link{
  transition: color .15s ease, transform .15s ease;
}
.footer-links a.link:hover,
.footer-links a.link:focus-visible{
  transform: translateY(-1px);
}

/* use the link's class (etsy/instagram/mail/linktree) to color the icon */
.footer-links a.etsy:hover,
.footer-links a.etsy:focus-visible{       color:#F1641E; } /* Etsy orange */
.footer-links a.instagram:hover,
.footer-links a.instagram:focus-visible{  color:#E4405F; } /* IG pink */
.footer-links a.mail:hover,
.footer-links a.mail:focus-visible{       color:var(--accent); } /* your accent */
.footer-links a.linktree:hover,
.footer-links a.linktree:focus-visible{   color:#39E09B; } /* Linktree green */
.footer-links a.gumroad:hover,
.footer-links a.gumroad:focus-visible{   color:#FF90E8; } /* Gumroad pink */
.footer-links a.amazon:hover,
.footer-links a.amazon:focus-visible{   color:var(--accent); } /* Amazon Orange */
.footer-links a.facebook:hover,
.footer-links a.facebook:focus-visible{   color:#0866FF; } /* Facebook blue */
.footer-links a.spoonflower:hover,
.footer-links a.spoonflower:focus-visible{   color:var(--accent); } /* Spoonflower green */

/* the SVGs use currentColor, so make sure this is set (you already have this) */
.site-footer .footer-links .icon{ fill: currentColor; }

.nl-hero { text-align:center; max-width:720px; margin:0 auto 2rem; }
.nl-hero .lead { font-size:1.05rem; }
.nl-cta{
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 18px; border-radius:9999px; background:#111; color:#fff;
  font-weight:700; text-decoration:none; box-shadow:0 6px 16px rgba(0,0,0,.15);
  transition:transform .15s ease, box-shadow .15s ease;
}
.nl-cta:hover,.nl-cta:focus{ transform:translateY(-2px); box-shadow:0 10px 20px rgba(0,0,0,.22); }

.nl-benefits{ list-style:none; padding:0; margin:1rem 0 0; display:grid; gap:.25rem; }
.nl-benefits li::before{ content:"• "; }

.nl-issues{
  max-width: 1100px;      /* same as .nl-hero */
  margin: 2.5rem auto;
  padding: 0 1rem;        /* same side padding as hero */
}
.issues-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1rem; }
.issue-card{ background:#fff; border:1px solid #eee; border-radius:12px; padding:16px; }
.issue-card h3{ margin:.25rem 0 .25rem; font-size:1.05rem; }
.issue-card .meta{ font-size:.85rem; color:#667; margin:0 0 .35rem; }
.all-issues{ text-align:left; margin-top:1rem; }
.small{ font-size:.93rem; color:#444; }

@media (prefers-reduced-motion: reduce){
  .nl-cta{ transition:none; transform:none; }
}

/* Layout container */
.nl-hero{ max-width:1100px; margin:0 auto; padding:1rem 1rem 2rem; }
.nl-hero-grid{
  display:grid;
  grid-template-columns: 360px 1fr; /* image left, copy right */
  gap:1.5rem;
  align-items:start;
}

/* Sample card */
.sample-card{ position:relative; display:block; border-radius:14px; overflow:hidden;
  box-shadow:0 6px 16px rgba(0,0,0,.12); transition:transform .15s ease, box-shadow .15s ease; }
.sample-card img{ display:block; width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; }
.sample-card:hover{ transform:translateY(-2px); box-shadow:0 12px 22px rgba(0,0,0,.18); }
.sample-badge{
  position:absolute; left:12px; bottom:12px; padding:8px 12px; border-radius:9999px;
  background:rgba(17,17,17,.86); color:#fff; font-weight:700; text-decoration:none;
  box-shadow:0 6px 14px rgba(0,0,0,.25); transition:transform .15s ease, box-shadow .15s ease;
}
.sample-card:hover .sample-badge{ transform:translateY(-1px); box-shadow:0 10px 20px rgba(0,0,0,.28); }

/* Copy/CTA */
.hero-copy h1{ margin:0 0 .25rem; }
.hero-copy .lead{ margin:.25rem 0 1rem; max-width:60ch; }
.nl-cta{
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 18px; border-radius:9999px; background:#111; color:#fff; font-weight:700; text-decoration:none;
  box-shadow:0 6px 16px rgba(0,0,0,.15); transition:transform .15s ease, box-shadow .15s ease;
}
.nl-cta:hover,.nl-cta:focus{ transform:translateY(-2px); box-shadow:0 10px 20px rgba(0,0,0,.22); }
.nl-benefits{ list-style:none; padding:0; margin:1rem 0 0; }
.nl-benefits li{ margin: .2rem 0; }
.nl-benefits li::before{ content:"• "; }

/* Responsive: stack on narrow screens */
@media (max-width: 860px){
  .nl-hero-grid{ grid-template-columns: 1fr; }
  .sample-card{ order:2; }   /* sample below the CTA on mobile */
  .hero-copy{ order:1; }
}

/* Respect motion prefs */
@media (prefers-reduced-motion: reduce){
  .sample-card, .sample-badge, .nl-cta{ transition:none !important; transform:none !important; }
}

/* Left-align the right column contents in the hero */
.nl-hero { text-align: left; }            /* kill any inherited centering */
.hero-copy { text-align: left; }
.hero-copy h1,
.hero-copy .lead,
.nl-benefits { text-align: left; }

/* Optional: tighten the bullets a hair */
.nl-benefits { margin-left: 0; }

/* Two-column year | details layout */
.cv-section{ --cv-year-col: 15ch; --cv-year-gap: 1rem; }      /* try 10–12ch if you’ll use “present” */
.cv-row{
  display:grid;
  grid-template-columns: var(--cv-year-col) 1fr;
  column-gap:1rem;
  align-items:start;
}
.cv-year{
  text-align:right;
  font-weight:600;
  opacity:.8;
  font-variant-numeric: tabular-nums;     /* keeps digits from “wiggling” */
  white-space: nowrap;                     /* don’t wrap 2023–2024 */
}

/* extra breathing room between year rows */
.cv-row + .cv-row{ margin-top: var(--cv-year-gap); }

/* Within a year: small spacing between entries */
.cv-item + .cv-item{ margin-top:.35rem; }

.cv-details{ min-width:0; }        /* allows long lines to wrap cleanly */

.cv-item{
  margin:0;
  line-height:1.5;
  padding-left: 1.2rem;   /* same value as below, tweak to taste */
  text-indent: -1.2rem;   /* makes a hanging indent */
}
.cv-item + .cv-item{ margin-top:.35rem; }

/* Mobile stack */
@media (max-width:480px){
  .cv-row{ grid-template-columns: 1fr; }
  .cv-year{ text-align:left; margin-bottom:.25rem; }
}

.cv-item a{ color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.cv-item a:hover{ text-decoration-thickness: 2px; }

/* === About page split layout === */
.about-grid{
  display: grid;
  grid-template-columns: 1fr min(320px, 36%);
  column-gap: 2rem;
  row-gap: 1.25rem;
  align-items: start;
}

.about-photo img{
  display:block;
  width: 100%;
  height: auto;
  border-radius: .5rem;
}

.about-actions{ margin-top: 1rem; }

/* Mobile: stack with photo first and centered */
@media (max-width: 760px){
  .about-grid{ grid-template-columns: 1fr; }
  .about-photo{ order:-1; justify-self:center; max-width: 320px; }
}
/* ===== Button theming (light + dark) ===== */

/* Light defaults */
:root{
  /* primary */
  --btn-bg:#111;
  --btn-fg:#fff;
  --btn-border:#111;
  --btn-bg-hover:#000;
  --btn-border-hover:#000;

  /* ghost */
  --btn-ghost-bg:#fff;
  --btn-ghost-fg:#111;
  --btn-ghost-border:#d4d4d8;
  --btn-ghost-bg-hover:#f4f4f5;
  --btn-ghost-border-hover:#bdbdc2;

  /* motion + shadows */
  --shadow-1: 0 2px 6px rgba(0,0,0,.08);
  --shadow-2: 0 10px 24px rgba(0,0,0,.18);

  --focus-ring:#4c9ffe;
}

/* Dark overrides (works with system dark OR a manual .dark / [data-theme=dark]) */
@media (prefers-color-scheme: dark){
  :root{
    /* flip primary so it’s visible on dark surfaces */
    --btn-bg:#fff;
    --btn-fg:#111;
    --btn-border:#fff;
    --btn-bg-hover:#eaeaea;
    --btn-border-hover:#eaeaea;

    /* ghost: subtle outline on dark */
    --btn-ghost-bg:transparent;
    --btn-ghost-fg:#f3f3f3;
    --btn-ghost-border:#3b3b3f;
    --btn-ghost-bg-hover:#1f1f23;
    --btn-ghost-border-hover:#5a5a60;

    --shadow-1: 0 2px 6px rgba(0,0,0,.55);
    --shadow-2: 0 12px 28px rgba(0,0,0,.7);
    --focus-ring:#7db3ff;
  }
}
.dark, [data-theme="dark"]{
  /* allow a manual theme toggle if you add one later */
  --btn-bg:#fff;
  --btn-fg:#111;
  --btn-border:#fff;
  --btn-bg-hover:#eaeaea;
  --btn-border-hover:#eaeaea;

  --btn-ghost-bg:transparent;
  --btn-ghost-fg:#f3f3f3;
  --btn-ghost-border:#3b3b3f;
  --btn-ghost-bg-hover:#1f1f23;
  --btn-ghost-border-hover:#5a5a60;

  --shadow-1: 0 2px 6px rgba(0,0,0,.55);
  --shadow-2: 0 12px 28px rgba(0,0,0,.7);
  --focus-ring:#7db3ff;
}

/* Universal button (uses the vars above) */
.btn, button.btn, input[type="submit"].btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.45rem;
  padding:.6rem .95rem; border-radius:.6rem;
  border:1px solid var(--btn-border);
  background:var(--btn-bg); color:var(--btn-fg);
  text-decoration:none; font-weight:600; line-height:1; cursor:pointer;
  box-shadow:var(--shadow-1);
  transform: translateY(0);
  transition: transform .12s ease-out, box-shadow .12s ease-out,
              background .15s, border-color .15s, color .15s;
  -webkit-appearance: none; appearance: none;
  outline-color: var(--focus-ring);
}
.btn:hover{ transform: translateY(-2px); box-shadow:var(--shadow-2); background:var(--btn-bg-hover); border-color:var(--btn-border-hover); }
.btn:active{ transform: translateY(0); box-shadow:var(--shadow-1); }

/* Ghost/secondary */
.btn-ghost, button.btn-ghost, input[type="submit"].btn-ghost{
  background: var(--btn-ghost-bg);
  color: var(--btn-ghost-fg);
  border-color: var(--btn-ghost-border);
}
.btn-ghost:hover{
  background: var(--btn-ghost-bg-hover);
  border-color: var(--btn-ghost-border-hover);
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .btn, button.btn, input[type="submit"].btn{
    transition: background .15s, border-color .15s, color .15s;
  }
  .btn:hover, .btn:active{ transform:none; box-shadow:var(--shadow-1); }
}

/* Make text overlays follow theme (your “Read a sample →”/link-ctas) */
.link-cta, .sample-link{ color: inherit; font-weight:700; text-decoration:none; }
.link-cta:hover, .sample-link:hover{ text-decoration:underline; text-underline-offset:2px; }

/* Help the overlay text stay legible on images */
.sample-link{ text-shadow: 0 1px 2px rgba(255,255,255,.65); }
@media (prefers-color-scheme: dark){
  .sample-link{ text-shadow: 0 1px 2px rgba(0,0,0,.7); }
}

.shop-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.25rem;margin-top:1rem}
.shop-card{padding:1rem;border:1px solid var(--border,#e5e5e5);border-radius:14px}
.shop-card img{width:100%;height:auto;border-radius:10px}
.badge{display:inline-block;font-size:.75rem;padding:.2rem .55rem;border:1px solid currentColor;border-radius:999px;margin:.25rem 0 .5rem}
.btn{display:inline-block;margin-top:.5rem;padding:.6rem .9rem;border-radius:10px;border:1px solid currentColor;text-decoration:none}
.featured{margin:.75rem 0 0;padding-left:1rem}
.featured li{margin:.25rem 0}
.shop-card{display:flex;flex-direction:column}
.shop-card .btn{margin-top:.25rem}
.shop-card .featured{margin-top:.5rem}

/* Make the image area a positioning context */
.shop-card .img-link{ position:relative; display:block; }

/* Overlay chip */
.badge--overlay{
  position:absolute; top:.5rem; left:.5rem;
  background:rgba(255,255,255,.78);
  border:1px solid rgba(0,0,0,.15);
  padding:.22rem .6rem; border-radius:999px;
  line-height:1.1; font-size:.8rem;
  backdrop-filter: blur(4px);
}

/* Dark mode tweak */
@media (prefers-color-scheme: dark){
  .badge--overlay{
    background:rgba(0,0,0,.45);
    border-color:rgba(255,255,255,.25);
  }
}

/* If your generic .badge was full-width anywhere, un-stretch it */
.badge{ display:inline-flex; width:auto; max-width:max-content; }

.img-wrap{ position: relative; }
.img-wrap .badge--overlay{
  position:absolute; top:.5rem; left:.5rem;
  background:rgba(255,255,255,.78);
  border:1px solid rgba(0,0,0,.15);
  border-radius:999px; padding:.22rem .6rem; line-height:1.1;
  font-size:.8rem; backdrop-filter:blur(4px);
}
@media (prefers-color-scheme: dark){
  .img-wrap .badge--overlay{
    background:rgba(0,0,0,.45);
    border-color:rgba(255,255,255,.25);
    color:#fff;
  }
}

.content table{display:block; overflow-x:auto; -webkit-overflow-scrolling:touch}
.content table th, .content table td{white-space:nowrap}

details{border:1px solid var(--border,#e5e5e5);border-radius:.75rem;padding:.6rem .8rem;margin:.5rem 0}
details>summary{cursor:pointer;font-weight:600;list-style:none}
details>summary::-webkit-details-marker{display:none}

/* Photo gallery */
.photo-gallery{ display: flex; gap: 20px; align-items: flex-start; }
.column{ display: flex; flex-direction: column; gap: 20px; flex: 1; }
.photo{ overflow: hidden; border-radius: 5px; }
.photo img{ display: block; width: 100%; height: auto; border-radius: 5px; }

@media (max-width:768px){
  .photo-gallery{ flex-direction: column; }
}