/* Cauldron & Cozy - real flat-lay background + amethyst crystal palette */

:root {
  --bg-wood-1: #3a2a1e;
  --bg-wood-2: #241a12;
  --bg-panel: #241a12;
  --parchment: #ecdfc4;
  --parchment-edge: #d9c69f;
  --ink: #2b2015;
  --ink-muted: #6e5c44;
  --cream-text: #ecdfc3;
  --cream-muted: #b9a888;
  --amethyst: #9b6bc9;
  --amethyst-light: #c9a4e8;
  --amethyst-deep: #6b3f8f;
  --amethyst-ink: #452a5c;
  --sage: #8fa084;
  --plum: #7a4a63;
  --gold: #c9a568;
  --gold-bright: #e0c58a;
  --glow: rgba(155, 107, 201, 0.2);
}

* { box-sizing: border-box; }

html { position: relative; }

body {
  margin: 0;
  font-family: 'EB Garamond', Georgia, 'Times New Roman', serif;
  background: linear-gradient(160deg, var(--bg-wood-1), var(--bg-wood-2) 65%);
  color: var(--cream-text);
  line-height: 1.7;
  position: relative;
}

.bg-texture {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(ellipse 900px 460px at 50% 0%, var(--glow), transparent 70%),
    linear-gradient(180deg, rgba(20,14,9,0.55), rgba(20,14,9,0.88) 55%, rgba(20,14,9,0.96)),
    url('/images/hero-banner.jpg');
  background-repeat: no-repeat;
  background-size: cover, cover, cover;
  background-position: center, center top, center top;
  background-attachment: fixed;
}

.site-header {
  position: relative;
  z-index: 30;
}

.site-main, .site-footer {
  position: relative;
  z-index: 1;
}

h1, h2, h3, .site-logo, .post-title, .page-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
}

a { color: var(--amethyst-light); text-decoration: none; }
a:hover { color: var(--gold-bright); }

.wrap {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
}

.wrap--narrow { max-width: 720px; }

.site-header {
  background: rgba(36, 26, 18, 0.55);
  color: var(--gold-bright);
}

.site-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 20px;
  padding-bottom: 20px;
}

.site-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--gold-bright);
  letter-spacing: 0.02em;
}

.logo-mark-img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 2px rgba(201,165,104,0.4);
}

.site-header-actions {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
}

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: 1px solid rgba(201, 165, 104, 0.4);
  border-radius: 6px;
  width: 44px;
  height: 40px;
  padding: 0;
  cursor: pointer;
}

.nav-toggle-bar {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--gold-bright);
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) {
  opacity: 0;
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.nav-toggle-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.site-nav a {
  color: var(--cream-text);
  margin-left: 26px;
  font-family: 'EB Garamond', serif;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.site-nav a:first-child { margin-left: 0; }

.site-nav a:hover { color: var(--gold-bright); }

.site-search {
  position: relative;
}

.site-search-input {
  background: rgba(236, 223, 196, 0.08);
  border: 1px solid rgba(201, 165, 104, 0.4);
  border-radius: 999px;
  padding: 7px 16px;
  color: var(--cream-text);
  font-family: 'EB Garamond', serif;
  font-size: 0.85rem;
  width: 160px;
  transition: width 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.site-search-input::placeholder { color: var(--cream-muted); }

.site-search-input:focus {
  outline: none;
  width: 220px;
  background: rgba(236, 223, 196, 0.14);
  border-color: var(--amethyst);
}

.search-results {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 320px;
  max-width: 80vw;
  background: var(--parchment);
  border: 1px solid var(--parchment-edge);
  border-radius: 6px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.5);
  padding: 8px;
  z-index: 20;
  max-height: 380px;
  overflow-y: auto;
}

.search-result {
  display: block;
  padding: 10px 12px;
  border-radius: 4px;
  color: var(--ink);
}

.search-result:hover { background: rgba(155,107,201,0.12); }

.search-result-title {
  display: block;
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--amethyst-ink);
}

.search-result-summary {
  display: block;
  font-size: 0.82rem;
  color: var(--ink-muted);
  margin-top: 2px;
}

.search-empty {
  padding: 10px 12px;
  color: var(--ink-muted);
  font-size: 0.85rem;
  margin: 0;
}

.header-divider {
  height: 1px;
  background: linear-gradient(to right, transparent, var(--amethyst) 20%, var(--gold) 80%, transparent);
  opacity: 0.4;
}

.hero {
  position: relative;
  text-align: center;
  padding: 56px 24px 72px;
  overflow: hidden;
}

.hero-glow {
  position: absolute;
  top: -60px;
  left: 50%;
  transform: translateX(-50%);
  width: 420px;
  height: 220px;
  background: radial-gradient(ellipse at center, var(--glow), transparent 70%);
  pointer-events: none;
}

.hero-tagline {
  position: relative;
  font-style: italic;
  font-family: 'Cormorant Garamond', serif;
  color: var(--amethyst-light);
  font-size: 1.5rem;
  letter-spacing: 0.03em;
}

.category-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin: 36px 0;
}

.category-nav--large { margin-top: 24px; }

.category-chip {
  background: var(--parchment);
  color: var(--ink);
  border: 1px solid var(--parchment-edge);
  padding: 9px 18px;
  border-radius: 999px;
  font-family: 'EB Garamond', serif;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  box-shadow: 0 2px 6px rgba(0,0,0,0.35);
}

.category-chip:hover { background: #ddc7ee; border-color: var(--amethyst); color: var(--ink); }
.category-chip .count { color: var(--amethyst-ink); font-size: 0.8rem; }

.pagination {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 70px;
  padding: 0;
}

.pagination .page-item .page-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  background: var(--parchment);
  color: var(--ink);
  border: 1px solid var(--parchment-edge);
  border-radius: 999px;
  font-family: 'EB Garamond', serif;
  font-size: 0.95rem;
  text-decoration: none;
  box-shadow: 0 2px 6px rgba(0,0,0,0.35);
  cursor: pointer;
}

.pagination .page-item .page-link:hover { background: #ddc7ee; border-color: var(--amethyst); color: var(--ink); }

.pagination .page-item.active .page-link {
  background: var(--amethyst);
  border-color: var(--amethyst-deep);
  color: var(--cream-text);
}

.pagination .page-item.disabled .page-link {
  opacity: 0.35;
  cursor: default;
  box-shadow: none;
}

.pagination .page-item.disabled .page-link:hover { background: var(--parchment); border-color: var(--parchment-edge); color: var(--ink); }

.post-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 32px;
  margin: 36px 0 70px;
  align-items: start;
}

.post-card {
  background: var(--parchment);
  border: 1px solid var(--parchment-edge);
  border-radius: 4px;
  overflow: hidden;
  padding-bottom: 18px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.45);
  position: relative;
}

.post-card::after {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(43, 32, 21, 0.12);
  pointer-events: none;
  border-radius: 3px;
}

.post-thumb-wrap {
  position: relative;
}

.post-thumb {
  width: 100%;
  height: 260px;
  object-fit: cover;
  display: block;
}

.thumb-shop-btn {
  position: absolute;
  right: 10px;
  bottom: 10px;
  background: rgba(36, 26, 18, 0.82);
  color: var(--gold-bright) !important;
  font-family: 'EB Garamond', serif;
  font-size: 0.78rem;
  letter-spacing: 0.03em;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid rgba(201, 165, 104, 0.5);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.2s ease, transform 0.2s ease, background 0.2s ease;
}

.post-card:hover .thumb-shop-btn,
.thumb-shop-btn:focus {
  opacity: 1;
  transform: translateY(0);
}

.thumb-shop-btn:hover {
  background: var(--amethyst-deep);
}

@media (hover: none) {
  .thumb-shop-btn {
    opacity: 1;
    transform: none;
  }
}

.post-thumb-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 50% 45%, rgba(155,107,201,0.35), transparent 55%), linear-gradient(160deg, #332740, #1e1626 70%);
}

.post-thumb-placeholder--tall { height: 320px; border-radius: 6px; margin: 20px 0; }

.placeholder-glyph {
  font-family: 'Cormorant Garamond', serif;
  font-size: 2.6rem;
  color: var(--amethyst-light);
  opacity: 0.9;
}

.post-title {
  font-size: 1.3rem;
  font-weight: 600;
  margin: 16px 18px 4px;
  color: var(--ink);
}

.post-meta {
  font-size: 0.78rem;
  color: var(--amethyst-ink);
  margin: 0 18px 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.post-meta a { color: var(--amethyst-ink); }
.post-meta a:hover { color: var(--plum); }

.post-excerpt {
  margin: 0 18px 4px;
  font-size: 1rem;
  color: var(--ink-muted);
}

.post-excerpt p {
  margin: 0;
  color: inherit;
}

.empty-state {
  text-align: center;
  color: var(--cream-muted);
  padding: 40px 0;
}

.post-card-hidden { display: none; }

.scroll-sentinel {
  height: 1px;
  margin-top: -40px;
  margin-bottom: 40px;
}

.scroll-sentinel-active::after {
  content: "Loading more…";
  display: block;
  text-align: center;
  padding: 12px 0 40px;
  font-style: italic;
  color: var(--cream-muted);
}

.post-single-title {
  font-size: 2.6rem;
  font-weight: 600;
  color: var(--gold-bright);
  margin-bottom: 8px;
}

.post-single .post-meta { color: var(--sage); }
.post-single .post-meta a { color: var(--amethyst-light); }

.inline-disclosure {
  font-family: 'EB Garamond', serif;
  font-size: 0.9rem;
  color: var(--ink-muted);
  background: var(--parchment);
  border: 1px solid var(--parchment-edge);
  border-left: 3px solid var(--gold);
  border-radius: 3px;
  padding: 12px 16px;
  margin: 20px 0;
}

.post-hero-wrap {
  position: relative;
  margin: 20px 0;
}

.post-hero-image {
  width: 100%;
  border-radius: 6px;
  margin: 0;
  display: block;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

.pin-it-btn {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #E60023;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  color: #fff;
  box-shadow: 0 4px 14px rgba(0,0,0,0.45);
  transition: background 0.2s ease, transform 0.15s ease;
}

.pin-it-btn:hover {
  background: #ad001b;
  color: #fff;
  transform: translateY(-1px);
}

.pin-it-icon {
  width: 22px;
  height: 22px;
}

.pin-it-btn--thumb {
  top: 10px;
  right: 10px;
  bottom: auto;
  width: 28px;
  height: 28px;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.2s ease, transform 0.2s ease, background 0.2s ease;
}

.pin-it-btn--thumb .pin-it-icon {
  width: 13px;
  height: 13px;
}

.post-card:hover .pin-it-btn--thumb,
.pin-it-btn--thumb:focus {
  opacity: 1;
  transform: translateY(0);
}

@media (hover: none) {
  .pin-it-btn--thumb {
    opacity: 1;
    transform: none;
  }
}

.product-box {
  background: var(--parchment);
  color: var(--ink);
  border: 1px solid var(--parchment-edge);
  border-left: 3px solid var(--amethyst);
  border-radius: 4px;
  padding: 20px 24px;
  margin: 20px 0 28px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.45);
  text-align: center;
}

.product-box-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--amethyst-ink);
  margin: 0 0 4px;
}

.product-box-meta {
  font-size: 0.85rem;
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 14px;
}

.affiliate-cta-button {
  display: inline-block;
  margin: 24px 0;
  background: var(--amethyst-deep);
  color: var(--gold-bright) !important;
  font-family: 'EB Garamond', serif;
  font-size: 0.95rem;
  letter-spacing: 0.03em;
  padding: 12px 28px;
  border-radius: 999px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.4);
  transition: background 0.2s ease, transform 0.15s ease;
}

.affiliate-cta-button:hover {
  background: var(--amethyst);
  transform: translateY(-1px);
}

.affiliate-cta-retailer {
  font-size: 0.78rem;
  opacity: 0.85;
}

/* Lasso product displays (.lasso-embed) render their own flexbox layout via
   the sitewide Lasso loader script (see baseof.html) — we don't own that
   markup, but we can still override it from our own stylesheet. This moves
   the product image to the front of the flex layout regardless of which
   Lasso theme (cutter, cactus, etc.) rendered it, since the image element's
   class always contains "lasso-image" across themes. Static-site version of
   Lasso's own "&css=true" trick, which is WordPress-only. */
.lasso-embed [class*="lasso-image"] {
  order: -1 !important;
}

/* Re-stack Lasso's box-1 (image + title + price) vertically instead of its
   default image-right/text-left float layout: image on top, title under
   it, price under that. Box-2 (button) and box-3 (disclosure) already
   render below box-1 as separate stacked blocks, so no change needed
   there — this only touches the internal layout of box-1. Confirmed these
   are the real classes by inspecting a live rendered embed's DOM directly
   (Lasso's generic docs describe a different class scheme than what this
   account's script actually outputs). */
.lasso-embed .embed-lasso-box-1 {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  width: 100% !important;
  height: auto !important;
}

/* Lasso hardcodes the image link, the <img>, AND the <img>'s own
   "-no-lazy" swap-in class to width: 350px / height: 350px, regardless of
   container size — noticeably narrower than the site's regular in-post
   images, which stretch to fill .post-body via
   `.post-body img { max-width: 100% }`. The first pass here only
   overrode `.embed-lasso-image img` (a tag-selector match), which won on
   width but lost the height tug-of-war to Lasso's own same-specificity
   rule targeting `.embed-lasso-image-no-lazy` directly by class — classes
   beat tag selectors, and Lasso's own stylesheet loads after ours (its
   loader script sits near </body>), so it won ties. Targeting that exact
   class directly here.

   Important: object-fit is set to `contain`, not `cover`. Amazon's
   Associates Program IP License (Participation Requirements §6(a))
   permits resizing Program Content images only "in a manner that
   maintains the original proportions of the image" — `cover` crops
   whichever dimension doesn't match the box to fill it, which can cut
   off part of the actual product photo and alter its proportions/
   composition. `contain` only ever scales the full image down to fit,
   never crops, so the original photo is always shown intact regardless
   of what height ends up being computed elsewhere in this file.

   Second pass: measured the live DOM and found `.embed-lasso-image` (the
   <a>) rendering 20px wider than its own container and shifted 20px right
   — Lasso still had a `margin-left: 20px !important` left over from its
   default float-the-image-right-of-text layout, which our old `margin: 0
   auto` shorthand tied with on specificity and lost (auto margins also
   compute to 0 anyway once width is a true 100%, so they were doing
   nothing). That 20px pushed the image 20px past the container's right
   edge, exposing the page's dark background through the gap — which is
   the "off center" / stray dark sliver in the corners. Prefixing
   `.post-body` adds a third class of specificity so this unambiguously
   outranks Lasso's rule regardless of stylesheet load order, and
   `margin-left`/`margin-right` are declared as their own longhands so
   they can't lose to a same-property longhand rule the way the `margin`
   shorthand did.

   Third pass: after switching to object-fit: contain, the image started
   rendering small and centered with empty space on both sides instead of
   full width — box-1 is a column-direction flex container sized for
   Lasso's original ~350px-square layout, and with a long wrapped title
   plus a much bigger image, the box ran out of room and flex-shrink
   (which defaults to 1, i.e. "allowed to shrink") silently compressed
   the image flex item to make everything fit, rather than growing the
   container. Set box-1's own height to auto below and flex-shrink: 0
   here so the image is never treated as flexible/compressible — it
   always renders at its full intrinsic size and the container grows to
   match, instead of the reverse. */
.post-body .lasso-embed .embed-lasso-image,
.post-body .lasso-embed .embed-lasso-image img,
.post-body .lasso-embed .embed-lasso-image-no-lazy {
  float: none !important;
  margin: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: none !important;
  flex-shrink: 0 !important;
  object-fit: contain !important;
  object-position: center !important;
}

.lasso-embed .embed-lasso-title,
.lasso-embed .embed-lasso-price {
  float: none !important;
  width: 100% !important;
  text-align: center !important;
}

/* box-2 (button) and box-3 (disclosure) default to text-align: start and,
   as flex children of .embed-lasso-display, need an explicit width to
   actually span the row rather than shrink to fit their content. Both are
   needed together — width alone won't center a start-aligned inline-block
   button, and text-align alone has nothing to center within a shrunk box. */
.lasso-embed .embed-lasso-box-2,
.lasso-embed .embed-lasso-box-3 {
  width: 100% !important;
  text-align: center !important;
}

/* Match the site's own pill-shaped CTA buttons (.affiliate-cta-button uses
   border-radius: 999px) instead of Lasso's default square-ish corners. */
.lasso-embed .embed-lasso-button-1 {
  border-radius: 999px !important;
}

/* Brand colors, hardcoded here instead of trusting Lasso's own Display
   Settings dashboard to apply them. The dashboard is set to these same
   values (Background #ecdfc4 / Title #452a5c / Primary Button #6b3f8f /
   Button+Badge Text #e0c58a — same hexes as --parchment, --amethyst-ink,
   --amethyst-deep, and --gold-bright below), but that dashboard styling
   has shown up inconsistently on the live site — some embeds render with
   it, some don't, with no obvious pattern. Setting it directly here means
   it's correct every time regardless of whether Lasso's own styling makes
   it through on any given embed/render. If the dashboard colors ever
   change, update both places (or just stop relying on the dashboard for
   color and treat this block as the single source of truth). */
.lasso-embed .embed-lasso-display,
.lasso-embed .embed-lasso-container {
  background-color: var(--parchment) !important;
}

.lasso-embed .embed-lasso-title {
  color: var(--amethyst-ink) !important;
}

.lasso-embed .embed-lasso-button-1 {
  background-color: var(--amethyst-deep) !important;
  color: var(--gold-bright) !important;
}

.related-post-card {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--parchment);
  border: 1px solid var(--parchment-edge);
  border-left: 3px solid var(--gold);
  border-radius: 4px;
  padding: 12px;
  margin: 12px 0 24px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.3);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.related-post-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.4);
}

.related-post-thumb {
  width: 76px;
  height: 76px;
  object-fit: cover;
  border-radius: 4px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.related-post-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.related-post-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--amethyst-ink);
}

.related-post-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--ink);
}

.post-body {
  background: var(--parchment);
  color: var(--ink);
  border: 1px solid var(--parchment-edge);
  border-radius: 4px;
  padding: 8px 32px 32px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.45);
}

.post-body h2 {
  color: var(--amethyst-ink);
  border-bottom: 1px solid var(--parchment-edge);
  padding-bottom: 8px;
  margin-top: 44px;
  font-size: 1.6rem;
}

.post-body img { max-width: 100%; border-radius: 6px; }
.post-body p { color: var(--ink); }

.page-title {
  font-size: 2.3rem;
  color: var(--gold-bright);
  margin-top: 44px;
}

.page-intro {
  background: var(--parchment);
  color: var(--ink);
  border: 1px solid var(--parchment-edge);
  border-radius: 4px;
  padding: 24px 28px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.45);
}

.page-intro h2 { color: var(--amethyst-ink); }

.site-footer {
  position: relative;
  background: rgba(36, 26, 18, 0.55);
  color: var(--cream-text);
  margin-top: 60px;
  padding: 40px 0 32px;
  font-size: 0.9rem;
  border-top: 1px solid rgba(201, 165, 104, 0.3);
}

.footer-mark {
  position: absolute;
  top: -18px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg-wood-2);
  color: var(--gold);
  font-size: 1.4rem;
  padding: 0 14px;
}

.site-footer .wrap { text-align: center; }

.site-footer .disclosure {
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
  color: var(--cream-muted);
  font-family: 'EB Garamond', serif;
}

.site-footer a { color: var(--amethyst-light); }
.site-footer a:hover { color: var(--gold-bright); }

.social-links { margin: 16px 0; display: flex; gap: 16px; align-items: center; justify-content: center; }
.social-links a { display: inline-flex; align-items: center; justify-content: center; color: var(--amethyst-light); }
.social-links a:hover { color: var(--gold-bright); }
.social-icon { width: 22px; height: 22px; }
.social-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.copyright { color: #a08f74; font-size: 0.8rem; }

@media (max-width: 700px) {
  .site-header-row { flex-wrap: wrap; }
  .nav-toggle { display: flex; }

  .site-header-actions {
    display: none;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: 4px;
    order: 3;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid rgba(201, 165, 104, 0.25);
  }

  .site-header-actions-open { display: flex; }

  .site-nav {
    display: flex;
    flex-direction: column;
  }

  .site-nav a {
    margin: 0;
    padding: 12px 4px;
    border-bottom: 1px solid rgba(201, 165, 104, 0.15);
  }

  .site-nav a:first-child { margin: 0; }

  .site-search { width: 100%; margin-top: 8px; }
  .site-search-input, .site-search-input:focus { width: 100%; }
  .search-results { left: 0; right: 0; width: auto; }
  .post-single-title { font-size: 2rem; }
  .bg-texture { background-attachment: scroll; }
}