/* ============================================================
   Subtle Sway — editorial stylesheet
   Dark quiet-luxury theme: espresso, bone, brass.
   Type: Fraunces (display) + Inter (body).

   Note on token names: --bone is the page background (deep
   espresso) and --ink is the text colour (warm bone). The names
   are kept stable so every component reads the same pair.
   ============================================================ */

:root {
  /* Color tokens */
  --bone: #1B1713;      /* page background — deep espresso */
  --panel: #241F19;     /* slightly lifted panel tone */
  --ink: #EDE6D9;       /* primary text — warm bone */
  --muted: #A69B89;     /* secondary text */
  --moss: #8A9479;      /* sage — focus rings, quiet success */
  --brass: #C6A15B;     /* prices, primary accent, hovers */
  --clay: #C08768;      /* warm secondary accent — dates, small details */
  --hairline: #383129;  /* precise 1px borders */

  /* Type */
  --serif: "Fraunces", Georgia, serif;
  --sans: "Inter", -apple-system, "Segoe UI", sans-serif;

  /* Scale */
  --text-caption: 0.75rem;   /* 12px */
  --text-body: 0.9375rem;    /* 15px */
  --text-section: 1.375rem;  /* 22px */
  --text-display: clamp(2.5rem, 5.5vw, 3.5rem); /* 40–56px */

  --max-width: 1100px;
  --ease-slow: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ---------- Reset & base ---------- */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
}

/* The hidden attribute must always win, even over components that set an
   explicit display (e.g. .btn { display: inline-block }). Without this,
   a hidden .btn would still show. */
[hidden] {
  display: none !important;
}

body {
  background: var(--bone);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--text-body);
  line-height: 1.65;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Ambient light washes behind every page — fixed layer, so nothing is
   clipped and the page can never scroll sideways because of it. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(56rem 32rem at 12% -12%, rgba(198, 161, 91, 0.10), transparent 65%),
    radial-gradient(46rem 28rem at 90% -6%, rgba(138, 148, 121, 0.08), transparent 65%),
    radial-gradient(44rem 30rem at 50% 115%, rgba(192, 135, 104, 0.05), transparent 70%);
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
}

::selection {
  background: var(--brass);
  color: var(--bone);
}

/* Gentle page entrance */
main {
  animation: page-in 0.4s var(--ease-slow) both;
}

@keyframes page-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* Keyboard focus — thin brass outline everywhere */
:focus-visible {
  outline: 1.5px solid var(--brass);
  outline-offset: 3px;
}

/* ---------- Shared layout ---------- */

.wrap {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 1.5rem;
}

main.wrap {
  flex: 1;
  padding-top: 3.5rem;
  padding-bottom: 5.5rem;
}

/* Eyebrow: small uppercase label above headings */
.eyebrow {
  display: block;
  font-size: 0.6875rem; /* 11px */
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.9rem;
}

/* Page-level eyebrows carry a short brass dash — an editorial mark */
main > .eyebrow::before,
.hero-home .eyebrow::before,
.section-head .eyebrow::before {
  content: "";
  display: inline-block;
  width: 1.5rem;
  height: 1px;
  background: linear-gradient(90deg, var(--brass), var(--clay));
  margin-right: 0.65rem;
  vertical-align: middle;
}

/* Reading progress — a thin brass line at the very top of articles */
.read-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 10;
  background: linear-gradient(90deg, var(--brass), var(--clay));
  transform: scaleX(0);
  transform-origin: left;
}

/* ---------- Header ---------- */

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

.site-header .wrap {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-top: 1.35rem;
  padding-bottom: 1.35rem;
}

.site-name {
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-weight: 500;
  font-size: 1.35rem;
  letter-spacing: -0.01em;
  text-decoration: none;
}

/* A single brass full stop after the wordmark — quiet signature */
.site-name::after {
  content: ".";
  color: var(--brass);
}

.site-nav {
  display: flex;
  gap: 2rem;
}

.site-nav a {
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--muted);
  padding-bottom: 4px;
  /* Gradient underline grows in from the left on hover */
  background-image: linear-gradient(90deg, var(--brass), var(--clay));
  background-size: 0% 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: color 0.25s ease, background-size 0.4s var(--ease-slow);
}

.site-nav a:hover,
.site-nav a[aria-current="page"] {
  color: var(--ink);
  background-size: 100% 1px;
}

/* ---------- Home (landing) ---------- */

.hero-home {
  padding: 4.5rem 0 3.5rem;
}

/* Accented phrase in the headline — a wide, unhurried brass–clay–sage
   gradient across the italic type */
.hero-home h1 em {
  font-style: italic;
  background: linear-gradient(90deg, var(--brass), var(--clay) 40%, var(--moss) 70%, var(--brass));
  background-size: 220% 100%;
  background-position: 0% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-home h1 {
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-weight: 500;
  font-size: var(--text-display);
  letter-spacing: -0.02em;
  line-height: 1.08;
  max-width: 14em;
}

.hero-home p {
  margin-top: 1.25rem;
  color: var(--muted);
  max-width: 36em;
}

.hero-actions {
  margin-top: 2.25rem;
  display: flex;
  align-items: center;
  gap: 1.75rem;
}

/* Scroll cue — a thin light line pouring downward */
.scroll-cue {
  margin-top: 3.25rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.6rem;
}

.scroll-cue span {
  font-size: 0.625rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}

.scroll-cue i {
  display: block;
  width: 1px;
  height: 3.2rem;
  background: linear-gradient(180deg, var(--brass), transparent);
}

.hero-image {
  position: relative;
  aspect-ratio: 5 / 2;
  overflow: hidden;
  border: 1px solid var(--hairline);
  background: var(--panel);
}

/* Fine framing marks in opposite corners of the photo — always visible
   thanks to difference blending, like quiet camera grid marks */
.hero-image::before,
.hero-image::after {
  content: "+";
  position: absolute;
  z-index: 1;
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 300;
  line-height: 1;
  color: #fff;
  mix-blend-mode: difference;
  opacity: 0.85;
}

.hero-image::before {
  top: 0.8rem;
  left: 0.9rem;
}

.hero-image::after {
  bottom: 0.8rem;
  right: 0.9rem;
}

.hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Slow editorial ticker under the hero image */
.marquee {
  margin-top: 3.5rem;
  padding: 0.95rem 0;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  overflow: hidden;
}

.marquee-track {
  display: flex;
  width: max-content;
}

.marquee-group {
  display: flex;
  align-items: center;
  gap: 2.25rem;
  padding-right: 2.25rem;
  white-space: nowrap;
}

.marquee-group span {
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}

.marquee-group .dot {
  color: var(--clay);
}

/* The ticker rests politely under the cursor */
.marquee:hover .marquee-track {
  animation-play-state: paused;
}

.home-section {
  margin-top: 5rem;
}

.section-head {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 2rem;
  padding-bottom: 1.1rem;
}

/* A hairline that draws itself in when the section scrolls into view */
.section-head::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--brass) 0%, var(--hairline) 45%, var(--hairline) 100%);
  transform-origin: left;
}

.section-head .eyebrow {
  margin-bottom: 0.5rem;
}

.section-head h2 {
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-weight: 500;
  font-size: 1.6rem;
  letter-spacing: -0.015em;
  line-height: 1.2;
}

/* Shop-by-category cards */
.category-grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.category-card a {
  display: block;
  text-decoration: none;
}

.category-card .num {
  display: block;
  font-family: var(--serif);
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  color: var(--brass);
  margin-bottom: 0.6rem;
}

.category-card figure {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid var(--hairline);
  background: var(--panel);
  transition: border-color 0.3s ease;
}

.category-card a:hover figure {
  border-color: rgba(198, 161, 91, 0.45);
}

.category-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease-slow);
}

.category-card a:hover img {
  transform: scale(1.02);
}

.category-card h3 {
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-weight: 500;
  font-size: 1.2rem;
  letter-spacing: -0.01em;
  margin-top: 1.1rem;
  display: inline-block;
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s ease;
}

.category-card a:hover h3 {
  border-bottom-color: var(--brass);
}

.category-card .count {
  display: block;
  margin-top: 0.25rem;
  font-size: var(--text-caption);
  letter-spacing: 0.06em;
  color: var(--muted);
}

/* Centered brand statement */
.home-statement {
  margin: 5.5rem auto;
  max-width: 34em;
  padding: 3rem 2rem;
  text-align: center;
  /* A whisper of a dot grid behind the statement */
  background-image: radial-gradient(rgba(237, 230, 217, 0.05) 1px, transparent 1.4px);
  background-size: 22px 22px;
}

/* Line · dot · line ornament above the statement */
.statement-rule {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 1.5rem;
}

.statement-rule::before,
.statement-rule::after {
  content: "";
  width: 2.2rem;
  height: 1px;
}

.statement-rule::before {
  background: linear-gradient(90deg, transparent, var(--brass));
}

.statement-rule::after {
  background: linear-gradient(90deg, var(--clay), transparent);
}

.statement-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--brass);
}

.home-statement p {
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-weight: 400;
  font-size: 1.45rem;
  letter-spacing: -0.01em;
  line-height: 1.5;
}

.home-journal {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem 2rem;
}

/* Related-content strips (shop ↔ journal cross-suggestions) */
.related-section {
  margin-top: 5rem;
}

.related-journal {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem 2rem;
}

.related-journal .post-card h2,
.home-journal .post-card h2 {
  font-size: 1.25rem;
}

/* Gentle entrance animations — motion only when the visitor allows it */
@media (prefers-reduced-motion: no-preference) {
  /* Smooth in-page scrolling for jump-menu anchors */
  html {
    scroll-behavior: smooth;
  }

  .hero-home > * {
    animation: page-in 0.7s var(--ease-slow) both;
  }
  .hero-home > *:nth-child(2) { animation-delay: 0.1s; }
  .hero-home > *:nth-child(3) { animation-delay: 0.2s; }
  .hero-home > *:nth-child(4) { animation-delay: 0.3s; }
  .hero-home > *:nth-child(5) { animation-delay: 0.45s; }

  /* The scroll line pours downward, pauses, and fades — endlessly calm */
  .scroll-cue i {
    transform-origin: top;
    animation: cue-pour 2.6s var(--ease-slow) infinite;
  }

  @keyframes cue-pour {
    0%   { transform: scaleY(0); opacity: 0; }
    30%  { opacity: 1; }
    65%  { transform: scaleY(1); opacity: 1; }
    100% { transform: scaleY(1); opacity: 0; }
  }

  /* Ambient washes drift almost imperceptibly */
  body::before {
    animation: ambient-drift 26s ease-in-out infinite alternate;
  }

  @keyframes ambient-drift {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to   { transform: translate3d(-32px, 22px, 0) scale(1.05); }
  }

  /* Headline gradient breathes slowly — a gentle back-and-forth,
     never a hard jump */
  .hero-home h1 em {
    animation: shimmer 14s ease-in-out infinite;
  }

  @keyframes shimmer {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
  }

  /* Ticker loops seamlessly (two identical groups, -50% shift) */
  .marquee-track {
    animation: marquee 38s linear infinite;
  }

  @keyframes marquee {
    to { transform: translateX(-50%); }
  }

  /* Section hairlines draw themselves in as sections scroll into view */
  .section-head::after {
    transform: scaleX(0);
    transition: transform 1.1s var(--ease-slow) 0.15s;
  }

  .reveal.visible .section-head::after {
    transform: scaleX(1);
  }

  /* Product list gently unfolds when opened */
  .shoplist[open] .shoplist-items {
    animation: shoplist-open 0.35s var(--ease-slow);
  }

  @keyframes shoplist-open {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: none; }
  }

  /* The statement dot breathes, slowly */
  .statement-dot {
    animation: dot-breathe 4.5s ease-in-out infinite;
  }

  @keyframes dot-breathe {
    0%, 100% { opacity: 0.45; transform: scale(1); }
    50%      { opacity: 1; transform: scale(1.35); }
  }

  /* Page titles underline themselves on load */
  .page-title::after {
    content: "";
    display: block;
    width: 4.5rem;
    height: 1px;
    margin-top: 1.4rem;
    background: linear-gradient(90deg, var(--brass), var(--clay));
    animation: draw-in 1.1s var(--ease-slow) 0.2s both;
  }

  @keyframes draw-in {
    from { transform: scaleX(0); transform-origin: left; }
    to   { transform: scaleX(1); transform-origin: left; }
  }

  .hero-image img {
    animation: image-in 1.6s var(--ease-slow) both;
    animation-delay: 0.25s;
  }

  @keyframes image-in {
    from { opacity: 0; transform: scale(1.04); }
    to   { opacity: 1; transform: none; }
  }

  /* Sections fade up as they scroll into view (class added by main.js) */
  .reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.7s var(--ease-slow), transform 0.7s var(--ease-slow);
  }

  .reveal.visible {
    opacity: 1;
    transform: none;
  }
}

/* ---------- Search ---------- */

.search-row {
  margin-bottom: 1.5rem;
}

.search-row input {
  width: min(24rem, 100%);
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--hairline);
  border-radius: 0;
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--text-body);
  padding: 0.55rem 0.1rem;
  transition: border-color 0.3s ease;
}

.search-row input::placeholder {
  color: var(--muted);
  letter-spacing: 0.04em;
}

.search-row input:focus {
  outline: none;
  border-bottom-color: var(--brass);
}

.search-row input::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

/* ---------- Home live search ---------- */

.home-search {
  position: relative;
  margin-top: 2.25rem;
  max-width: 30rem;
}

.home-search > input {
  width: 100%;
  background: var(--panel);
  border: 1px solid var(--hairline);
  border-radius: 2px;
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--text-body);
  padding: 0.85rem 1rem;
  transition: border-color 0.3s ease;
}

.home-search > input::placeholder {
  color: var(--muted);
  letter-spacing: 0.02em;
}

.home-search > input:focus {
  outline: none;
  border-color: var(--brass);
}

.home-search > input::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

.home-search-results {
  position: absolute;
  z-index: 20;
  top: calc(100% + 0.5rem);
  left: 0;
  right: 0;
  background: var(--panel);
  border: 1px solid var(--hairline);
  border-radius: 2px;
  padding: 0.5rem;
  max-height: 24rem;
  overflow-y: auto;
  box-shadow: 0 18px 40px -24px rgba(0, 0, 0, 0.7);
}

.search-group {
  display: block;
  font-size: 0.625rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brass);
  padding: 0.7rem 0.6rem 0.35rem;
}

.search-result {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.5rem 0.6rem;
  border-radius: 2px;
  text-decoration: none;
  color: var(--ink);
  transition: background-color 0.2s ease;
}

.search-result:hover,
.search-result:focus-visible {
  background: rgba(198, 161, 91, 0.1);
  outline: none;
}

.search-result img,
.search-thumb-empty {
  width: 40px;
  height: 48px;
  object-fit: cover;
  border: 1px solid var(--hairline);
  flex-shrink: 0;
  background: var(--bone);
}

.search-result-title {
  flex: 1;
  min-width: 0;
  font-size: 0.9rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.search-result-tag {
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  flex-shrink: 0;
}

.search-empty {
  padding: 1rem 0.6rem;
  color: var(--muted);
  font-size: var(--text-body);
}

/* ---------- Affiliate interstitial (go.html) ---------- */

.go-page {
  max-width: 34rem;
  margin: 2.5rem auto 0;
}

.go-message {
  color: var(--muted);
  line-height: 1.75;
  margin-bottom: 2.25rem;
}

.go-actions {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  flex-wrap: wrap;
}

/* ---------- Contact page ---------- */

.contact-page {
  max-width: 34rem;
}

.contact-intro {
  color: var(--muted);
  line-height: 1.7;
  margin-bottom: 2rem;
}

.contact-line {
  padding: 1.5rem 0;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  margin-bottom: 2rem;
}

.contact-email {
  font-family: var(--serif);
  font-size: 1.35rem;
  letter-spacing: -0.01em;
  color: var(--ink);
  user-select: all;
}

/* ---------- Category filters (shop) ---------- */

.filter-bar {
  margin-bottom: 2.75rem;
}

.filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.filter-row + .filter-row {
  margin-top: 0.9rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--hairline);
}

.chip {
  background: none;
  border: 1px solid var(--hairline);
  border-radius: 2px;
  cursor: pointer;
  font-family: var(--sans);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0.55rem 1.1rem;
  transition: color 0.25s ease, border-color 0.25s ease, background-color 0.25s ease;
}

.chip:hover {
  color: var(--ink);
  border-color: var(--muted);
}

.chip[aria-pressed="true"] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--bone);
}

.filter-row.sub .chip {
  font-size: 0.65rem;
  padding: 0.45rem 0.9rem;
}

/* ---------- Product grid ---------- */

.product-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem 2rem;
  list-style: none;
}

.product-card a {
  display: block;
  text-decoration: none;
}

.product-card figure {
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border: 1px solid var(--hairline);
  background: var(--panel);
  transition: border-color 0.3s ease;
}

.product-card a:hover figure {
  border-color: rgba(198, 161, 91, 0.45);
}

/* Clean placeholder for a card that has no photo yet — a quiet panel with
   a small centred mark, never a broken-image icon */
.figure-empty {
  position: relative;
}

.figure-empty::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 7px;
  height: 7px;
  margin: -3.5px 0 0 -3.5px;
  border-radius: 50%;
  background: var(--hairline);
}

.product-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease-slow);
}

.product-card a:hover img {
  transform: scale(1.02);
}

.product-card .eyebrow {
  margin: 1.1rem 0 0.3rem;
}

.product-card h2 {
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-weight: 500;
  font-size: 1.15rem;
  letter-spacing: -0.01em;
  line-height: 1.3;
  display: inline;
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s ease;
}

.product-card a:hover h2 {
  border-bottom-color: var(--brass);
}

.product-card .price {
  display: block;
  margin-top: 0.4rem;
  font-size: var(--text-caption);
  letter-spacing: 0.06em;
  color: var(--brass);
}

/* ---------- Buttons ---------- */

.btn {
  position: relative;
  z-index: 0;
  overflow: hidden;
  display: inline-block;
  background: var(--ink);
  color: var(--bone);
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  border: none;
  border-radius: 2px;
  padding: 1rem 2.4rem;
  cursor: pointer;
}

/* Hover crossfades to a brass–clay gradient (opacity animates smoothly
   where a background swap would jump) */
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(110deg, var(--brass), var(--clay));
  opacity: 0;
  transition: opacity 0.3s ease;
}

.btn:hover::before {
  opacity: 1;
}

/* Quiet affiliate disclosure next to Buy Now buttons */
.affiliate-note {
  margin-top: 0.85rem;
  font-size: var(--text-caption);
  line-height: 1.55;
  color: var(--muted);
  max-width: 30em;
}

/* Type tag on product pages: shown only when a type is set.
   Digital reads in brass; physical stays quiet. */
.badge-type {
  display: inline-block;
  margin-top: 1.2rem;
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--hairline);
  border-radius: 2px;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.badge-type.digital {
  border-color: var(--brass);
  color: var(--brass);
}

/* Quiet text link: a faint hairline underline that a brass–clay
   gradient sweeps over from the left on hover */
.text-link {
  color: var(--ink);
  text-decoration: none;
  padding-bottom: 2px;
  background-image:
    linear-gradient(90deg, var(--brass), var(--clay)),
    linear-gradient(90deg, var(--hairline), var(--hairline));
  background-size: 0% 1px, 100% 1px;
  background-repeat: no-repeat;
  background-position: 0 100%, 0 100%;
  transition: background-size 0.4s var(--ease-slow);
}

.text-link:hover {
  background-size: 100% 1px, 100% 1px;
}

/* ---------- Product detail page ---------- */

.product-detail {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 4rem;
  align-items: start;
}

/* When a product has no photo yet, collapse to a single readable column */
.product-detail.no-media {
  grid-template-columns: 1fr;
  max-width: 40rem;
}

.product-detail.no-media .info {
  padding-left: 0;
  border-left: none;
}

/* Main photo plus optional extra photos, stacked in a quiet column */
.product-detail .media {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* Framing marks on the main product photo, like the hero */
.product-detail .media figure:first-child {
  position: relative;
}

.product-detail .media figure:first-child::before,
.product-detail .media figure:first-child::after {
  content: "+";
  position: absolute;
  z-index: 1;
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 300;
  line-height: 1;
  color: #fff;
  mix-blend-mode: difference;
  opacity: 0.85;
}

.product-detail .media figure:first-child::before {
  top: 0.75rem;
  left: 0.85rem;
}

.product-detail .media figure:first-child::after {
  bottom: 0.75rem;
  right: 0.85rem;
}

/* A fine vertical hairline between the photos and the details */
@media (min-width: 861px) {
  .product-detail {
    gap: 2.75rem;
  }

  .product-detail .info {
    padding-left: 2.75rem;
    border-left: 1px solid var(--hairline);
  }
}

.product-detail figure {
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border: 1px solid var(--hairline);
  background: var(--panel);
}

.product-detail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-detail .info {
  padding-top: 0.5rem;
}

.product-detail h1 {
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-weight: 500;
  font-size: 2.1rem;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.product-detail .price {
  display: block;
  margin-top: 0.9rem;
  font-size: 1rem;
  letter-spacing: 0.06em;
  color: var(--brass);
}

.product-detail .description {
  margin-top: 1.5rem;
  color: var(--muted);
  line-height: 1.7;
}

/* Color swatches */
.swatches {
  margin-top: 1.9rem;
}

.swatch-row {
  display: flex;
  gap: 0.6rem;
  margin-top: 0.1rem;
}

.swatch {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid rgba(237, 230, 217, 0.25);
}

/* Actions column: variant buttons above, Buy Now below */
.product-actions {
  margin-top: 2.4rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.9rem;
}

.product-actions .btn {
  margin-top: 0;
}

.variant-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

/* Secondary button — lighter than Buy Now, warms to brass on hover */
.btn-secondary {
  display: inline-block;
  padding: 1rem 1.6rem;
  border: 1px solid var(--hairline);
  border-radius: 2px;
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--muted);
  background: none;
  transition: color 0.25s ease, border-color 0.25s ease;
}

.btn-secondary:hover {
  color: var(--ink);
  border-color: var(--brass);
}

/* ---------- Blog list ---------- */

.blog-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4.5rem;
  max-width: 760px;
}

.post-card a {
  display: block;
  text-decoration: none;
}

.post-card figure {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border: 1px solid var(--hairline);
  background: var(--panel);
  transition: border-color 0.3s ease;
}

.post-card a:hover figure {
  border-color: rgba(198, 161, 91, 0.45);
}

/* Cards for articles without a cover photo — clean and typographic,
   set apart by a fine gradient rule instead of an image */
.post-card.no-cover a {
  border-top: 1px solid var(--hairline);
  padding-top: 1.6rem;
  position: relative;
}

.post-card.no-cover a::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 3.5rem;
  height: 1px;
  background: linear-gradient(90deg, var(--brass), var(--clay));
  transition: width 0.5s var(--ease-slow);
}

.post-card.no-cover a:hover::before {
  width: 6rem;
}

.post-card.no-cover .eyebrow {
  margin-top: 0;
}

.post-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease-slow);
}

.post-card a:hover img {
  transform: scale(1.02);
}

.post-card .eyebrow {
  margin: 1.4rem 0 0.5rem;
  color: var(--clay);
}

.post-card h2 {
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-weight: 500;
  font-size: 1.6rem;
  letter-spacing: -0.015em;
  line-height: 1.25;
  display: inline;
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s ease;
}

.post-card a:hover h2 {
  border-bottom-color: var(--brass);
}

.post-card .excerpt {
  margin-top: 0.7rem;
  color: var(--muted);
  max-width: 40em;
}

/* Page title (shop, blog index) */
.page-title {
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-weight: 500;
  font-size: var(--text-display);
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin-bottom: 3rem;
}

/* ---------- Article (single post) ---------- */

.article {
  max-width: 680px;
  margin: 0 auto;
}

.article-header {
  margin-bottom: 2.5rem;
}

.article-header h1 {
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-weight: 500;
  font-size: clamp(2rem, 4.5vw, 2.75rem);
  letter-spacing: -0.02em;
  line-height: 1.12;
}

.article-cover {
  margin-bottom: 2.75rem;
  border: 1px solid var(--hairline);
  background: var(--panel);
}

.article-cover img {
  width: 100%;
}

.article-body p {
  margin-bottom: 1.4rem;
  line-height: 1.7;
}

/* Slightly larger opening paragraph — editorial drop-in */
.article-body > p:first-of-type {
  font-size: 1.125rem;
  line-height: 1.65;
  color: var(--ink);
}

/* Classic editorial drop cap on the opening paragraph */
.article-body > p:first-of-type::first-letter {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 3.3em;
  line-height: 0.8;
  float: left;
  padding: 0.09em 0.14em 0 0;
  color: var(--brass);
}

.article-body h2 {
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-weight: 500;
  font-size: var(--text-section);
  letter-spacing: -0.015em;
  line-height: 1.3;
  margin: 3rem 0 1rem;
}

/* A short brass rule above each section heading — editorial rhythm */
.article-body h2::before {
  content: "";
  display: block;
  width: 2rem;
  height: 1px;
  margin-bottom: 0.85rem;
  background: linear-gradient(90deg, var(--brass), transparent);
}

.article-body figure {
  margin: 2.5rem 0;
  border: 1px solid var(--hairline);
  background: var(--panel);
}

.article-body figure img {
  width: 100%;
}

/* Jump menu — auto-built "Label ↓" links that scroll down to each list */
.jump-menu {
  margin: 2.25rem 0;
  border-top: 1px solid var(--hairline);
}

.jump-link {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 0.2rem;
  border-bottom: 1px solid var(--hairline);
  text-decoration: none;
  color: var(--ink);
}

.jump-label {
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-weight: 500;
  font-size: 1.35rem;
  letter-spacing: -0.015em;
  position: relative;
}

/* A brass rule grows out from the label on hover */
.jump-label::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -3px;
  width: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--brass), var(--clay));
  transition: width 0.4s var(--ease-slow);
}

.jump-link:hover .jump-label::after,
.jump-link:focus-visible .jump-label::after {
  width: 100%;
}

.jump-arrow {
  flex-shrink: 0;
  color: var(--brass);
  font-size: 1.1rem;
  transition: transform 0.3s var(--ease-slow);
}

.jump-link:hover .jump-arrow,
.jump-link:focus-visible .jump-arrow {
  transform: translateY(3px);
}

/* Shopping-list block — a collapsible "Label" panel that opens to a list */
.shoplist {
  margin: 2.25rem 0;
  background: var(--panel);
  border: 1px solid var(--hairline);
  border-radius: 2px;
  overflow: hidden;
  scroll-margin-top: 1.5rem;
}

.shoplist-summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 1.15rem 1.5rem;
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brass);
  transition: background-color 0.25s ease;
}

/* Hide the native disclosure triangle */
.shoplist-summary::-webkit-details-marker { display: none; }
.shoplist-summary::marker { content: ""; }

.shoplist-summary:hover {
  background: rgba(198, 161, 91, 0.06);
}

.shoplist-summary-label {
  flex: 1;
}

.shoplist-summary-meta {
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  color: var(--muted);
}

/* Chevron: points down when closed, flips up when open */
.shoplist-chevron {
  width: 0.5rem;
  height: 0.5rem;
  border-right: 1.5px solid var(--brass);
  border-bottom: 1.5px solid var(--brass);
  transform: rotate(45deg);
  margin-top: -3px;
  flex-shrink: 0;
  transition: transform 0.3s var(--ease-slow);
}

.shoplist[open] .shoplist-chevron {
  transform: rotate(-135deg);
  margin-top: 2px;
}

.shoplist-intro {
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--muted);
  font-style: italic;
  margin: 1.75rem 0 0.9rem;
  letter-spacing: 0.01em;
}

.shoplist-items {
  list-style: none;
  padding: 0 1.5rem 0.4rem;
}

.shoplist-items li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.25rem;
  padding: 0.95rem 0;
  border-top: 1px solid var(--hairline);
}

.shoplist-items li:first-child {
  border-top: none;
}

.shoplist-name {
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-weight: 500;
  font-size: 1.1rem;
  letter-spacing: -0.01em;
  line-height: 1.35;
  color: var(--ink);
}

.shoplist-link {
  flex-shrink: 0;
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.25s ease;
}

.shoplist-link::after {
  content: " →";
}

.shoplist-link:hover {
  color: var(--brass);
}

/* Photo gallery block — several photos side by side */
.article-body .gallery {
  display: grid;
  gap: 1rem;
  margin: 2.5rem 0;
}

.article-body .gallery.cols-1 { grid-template-columns: 1fr; }
.article-body .gallery.cols-2 { grid-template-columns: 1fr 1fr; }
.article-body .gallery.cols-3 { grid-template-columns: 1fr 1fr 1fr; }

.article-body .gallery figure {
  margin: 0;
  aspect-ratio: 3 / 4;
  overflow: hidden;
}

.article-body .gallery figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Embedded product card inside an article */
.embed-product {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 1.75rem;
  align-items: center;
  background: var(--panel);
  border: 1px solid var(--hairline);
  border-radius: 2px;
  padding: 1.75rem;
  margin: 2.75rem 0;
}

.embed-product figure {
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border: 1px solid var(--hairline);
  margin: 0;
}

.embed-product img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.embed-product .eyebrow {
  margin-bottom: 0.35rem;
}

.embed-product h3 {
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-weight: 500;
  font-size: 1.25rem;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

.embed-product h3 a {
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s ease;
}

.embed-product h3 a:hover {
  border-bottom-color: var(--brass);
}

.embed-product .price {
  display: block;
  margin: 0.35rem 0 1rem;
  font-size: var(--text-caption);
  letter-spacing: 0.06em;
  color: var(--brass);
}

.embed-product .btn {
  padding: 0.75rem 1.75rem;
}

.embed-product .affiliate-note {
  margin-top: 0.7rem;
}

/* ---------- Status / error messages ---------- */

.status {
  text-align: center;
  padding: 5rem 1rem;
}

.status h1,
.status h2 {
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-weight: 500;
  font-size: 1.8rem;
  letter-spacing: -0.015em;
  margin-bottom: 0.9rem;
}

.status p {
  color: var(--muted);
  margin-bottom: 1.6rem;
}

.grid-empty {
  color: var(--muted);
  padding: 2rem 0;
}

/* ---------- Footer ---------- */

.site-footer {
  position: relative;
  margin-top: auto;
}

/* Gradient hairline instead of a flat border */
.site-footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--brass) 20%, var(--clay) 50%, var(--brass) 80%, transparent);
  opacity: 0.45;
}

.site-footer .wrap {
  padding-top: 2rem;
  padding-bottom: 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.site-footer p {
  font-size: var(--text-caption);
  color: var(--muted);
  letter-spacing: 0.02em;
}

/* Footer navigation — About / Contact / Disclosure / Privacy */
.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin-bottom: 1.1rem;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid var(--hairline);
}

.footer-nav a {
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--muted);
  transition: color 0.25s ease;
}

.footer-nav a:hover {
  color: var(--ink);
}

/* Contact block under the disclosure (edited from the admin) */
.footer-contact {
  margin-top: 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.contact-text {
  font-size: var(--text-caption);
  color: var(--muted);
}

.contact-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

/* Quiet button shape — hairline border warming to brass */
.contact-btn {
  display: inline-block;
  padding: 0.65rem 1.4rem;
  border: 1px solid var(--hairline);
  border-radius: 2px;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--muted);
  transition: color 0.25s ease, border-color 0.25s ease;
}

.contact-btn:hover {
  color: var(--ink);
  border-color: var(--brass);
}

/* ---------- Responsive ---------- */

@media (max-width: 860px) {
  .product-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 2.25rem 1.5rem;
  }

  .category-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
  }

  .product-detail {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .hero-home {
    padding: 3.25rem 0 2.75rem;
  }

  .hero-image {
    aspect-ratio: 4 / 3;
  }

  .home-journal,
  .related-journal {
    grid-template-columns: 1fr 1fr;
    gap: 2.25rem 1.5rem;
  }
}

@media (max-width: 540px) {
  .wrap {
    padding: 0 1.15rem;
  }

  main.wrap {
    padding-top: 2.5rem;
    padding-bottom: 4rem;
  }

  .product-grid {
    grid-template-columns: 1fr;
    gap: 2.75rem;
  }

  .category-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .site-header .wrap {
    padding-top: 1.1rem;
    padding-bottom: 1.1rem;
  }

  .site-nav {
    gap: 1.25rem;
  }

  .blog-list {
    gap: 3.5rem;
  }

  .hero-actions {
    flex-wrap: wrap;
    gap: 1.25rem;
  }

  .home-section {
    margin-top: 3.5rem;
  }

  .home-statement {
    margin: 4rem auto;
  }

  .home-journal,
  .related-journal {
    grid-template-columns: 1fr;
    gap: 2.75rem;
  }

  .related-section {
    margin-top: 3.5rem;
  }

  .home-statement p {
    font-size: 1.25rem;
  }

  .embed-product {
    grid-template-columns: 1fr;
    gap: 1.25rem;
    padding: 1.25rem;
  }

  .embed-product figure {
    max-width: 200px;
  }
}