:root {
  --ink: #242021;
  --paper: #f7f2eb;
  --rose: #9b534f;
  --gold: #bf9359;
  --line: #d8c8b7;
  --white: #fff;
  --max: 1180px;
}

/* Real-time 3D product studio */
.product-model .product-stage {
  position: relative;
  display: block;
  min-height: 0;
  height: auto;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: radial-gradient(circle at 50% 38%, #fff 0, #f4f0eb 58%, #e6dfd7 100%);
  touch-action: none;
}
.product-canvas { display: block; width: 100%; height: 100%; cursor: grab; outline: none; }
.product-canvas:active { cursor: grabbing; }
.product-canvas:focus-visible { outline: 3px solid var(--gold); outline-offset: -4px; }
.product-model-status {
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  font: 700 .78rem/1.2 system-ui, sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #675b54;
  pointer-events: none;
}
.product-model-status[hidden] { display: none; }
.product-model noscript img { position: absolute; inset: 10%; width: 80%; height: 80%; object-fit: contain; }
.artwork-hero-stage { position:relative; width:100%; overflow:hidden; background:transparent; touch-action:none; }
.artwork-hero-canvas { display:block; width:100%; height:100%; cursor:grab; outline:none; opacity:0; }
.artwork-hero-poster { position:absolute; inset:0; z-index:1; display:block; width:100%; height:100%; object-fit:contain; background:transparent; pointer-events:none; }
.artwork-hero-stage.is-interactive { background:radial-gradient(circle at 50% 42%,#fff 0,#f5f1ec 62%,#e7dfd6 100%); }
.artwork-hero-stage.is-interactive .artwork-hero-canvas { opacity:1; }
.artwork-hero-stage.is-interactive .artwork-hero-poster { opacity:0; }
.artwork-hero-canvas:active { cursor:grabbing; }
.artwork-hero-canvas:focus-visible { outline:3px solid var(--gold); outline-offset:-4px; }
.artwork-hero-hint { position:absolute; z-index:2; left:50%; bottom:.8rem; transform:translateX(-50%); padding:.42rem .7rem; border-radius:999px; background:rgba(36,32,33,.76); color:#fff; white-space:nowrap; font:600 .67rem/1.2 system-ui,sans-serif; letter-spacing:.025em; pointer-events:none; opacity:0; transition:opacity .2s ease; }
.artwork-hero-stage:hover .artwork-hero-hint,.artwork-hero-canvas:focus~.artwork-hero-hint { opacity:1; }
.product-art-controls { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.8rem; padding:.85rem 1rem .35rem; border-top:1px solid rgba(77,56,47,.12); background:#fbf8f4; }
.product-art-controls label { display:grid; gap:.28rem; color:#665a54; font:600 .68rem/1.2 system-ui,sans-serif; }
.product-art-controls input { width:100%; accent-color:var(--rose); }
.product-customize { border-top:1px solid rgba(77,56,47,.12); background:#fbf8f4; }
.product-customize summary { cursor:pointer; padding:.72rem 1rem; color:#743833; font:700 .72rem/1.2 system-ui,sans-serif; letter-spacing:.05em; text-transform:uppercase; }
.product-customize[open] summary { border-bottom:1px solid rgba(77,56,47,.1); }
.product-art-controls select { width:100%; min-height:2rem; border:1px solid rgba(77,56,47,.25); border-radius:.25rem; background:#fff; color:#302724; }
.product-model figcaption small { display: block; margin-top: .38rem; color: #74665e; font: 600 .72rem/1.3 system-ui, sans-serif; letter-spacing: .035em; }
@media (max-width: 680px) {
  .product-model .product-stage { height: auto; aspect-ratio: 1 / 1; }
  .product-model figcaption small { display: none; }
  .product-art-controls { grid-template-columns:1fr; }
  .artwork-hero-hint { font-size:.61rem; }
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font:
    18px/1.65 Georgia,
    serif;
}
a {
  color: #743833;
  text-underline-offset: 0.18em;
}
a:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 4px;
}
.skip {
  position: absolute;
  left: -10000px;
  top: 1rem;
  background: var(--white);
  padding: 0.7rem 1rem;
  z-index: 10;
}
.skip:focus {
  left: 1rem;
}
header {
  max-width: var(--max);
  margin: auto;
  padding: 1.2rem 1.4rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  border-bottom: 1px solid var(--line);
}
.brand img {
  display: block;
  width: min(300px, 48vw);
  height: auto;
}
nav {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem;
}
nav a {
  text-decoration: none;
  font:
    700 0.9rem/1.2 system-ui,
    sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
main,
footer {
  max-width: var(--max);
  margin: auto;
  padding: 2rem 1.4rem;
}
.page-head {
  padding: 3.5rem 0 2rem;
  max-width: 850px;
}
.eyebrow {
  font:
    700 0.78rem/1.2 system-ui,
    sans-serif;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rose);
}
h1,
h2 {
  line-height: 1.08;
  font-weight: 500;
  margin: 0.25rem 0 1rem;
}
h1 {
  font-size: clamp(2.7rem, 7vw, 5.8rem);
}
h2 {
  font-size: clamp(1.8rem, 4vw, 3rem);
}
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(250px, 0.65fr);
  gap: clamp(2rem, 7vw, 6rem);
  align-items: center;
  padding: 1rem 0 4rem;
}
.hero.compact {
  align-items: start;
}
.hero img {
  width: 100%;
  max-height: 620px;
  object-fit: cover;
  border-radius: 50% 50% 6px 6px;
  box-shadow: 18px 18px 0 #eadfd3;
}
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-top: 2rem;
}
.button {
  display: inline-block;
  background: var(--rose);
  color: var(--white);
  padding: 0.75rem 1rem;
  text-decoration: none;
  font:
    700 0.9rem/1.3 system-ui,
    sans-serif;
  border: 2px solid var(--rose);
}
.button.secondary {
  background: transparent;
  color: var(--rose);
}
.cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.2rem;
  padding: 2rem 0 4rem;
}
.cards article,
.intro {
  background: rgba(255, 255, 255, 0.62);
  border: 1px solid var(--line);
  padding: clamp(1.3rem, 4vw, 2.5rem);
}
.intro {
  max-width: 850px;
}
.appointment-intro,
.appointment-status {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(250px, 0.55fr);
  gap: clamp(1.2rem, 4vw, 3rem);
  align-items: start;
  padding: 1rem 0 2rem;
}
.appointment-intro h2,
.appointment-status h2 { margin-top: 0.2rem; }
.appointment-intro aside { border-left: 4px solid var(--rose); background: rgba(255,255,255,.68); padding: 1.2rem; }
.appointment-intro aside p { margin-bottom: 0; }
.appointment-services { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; padding: 0 0 3rem; }
.appointment-service { display:flex; flex-direction:column; min-width:0; border: 1px solid var(--line); background: rgba(255,255,255,.78); overflow:hidden; box-shadow:0 14px 38px rgba(75,49,42,.08); }
.appointment-service figure { margin:0; position:relative; aspect-ratio:4/3; overflow:hidden; background:#eadfd3; }
.appointment-service figure img { width:100%; height:100%; object-fit:cover; }
.appointment-service figcaption { position:absolute; inset:auto 0 0; padding:.7rem .85rem; background:linear-gradient(transparent,rgba(30,20,18,.82)); color:#fff; font-size:.78rem; }
.appointment-service-copy { padding:1.15rem; }
.appointment-palette { display:flex; gap:.35rem; margin:.75rem 0; }
.appointment-palette span { width:1.15rem; height:1.15rem; border-radius:50%; border:2px solid #fff; box-shadow:0 0 0 1px rgba(70,45,40,.18); }
.appointment-service:nth-child(1) .appointment-palette span:nth-child(1){background:#f8f1b1}.appointment-service:nth-child(1) .appointment-palette span:nth-child(2){background:#d89b9e}.appointment-service:nth-child(1) .appointment-palette span:nth-child(3){background:#728d9a}
.appointment-service:nth-child(2) .appointment-palette span:nth-child(1){background:#ce6967}.appointment-service:nth-child(2) .appointment-palette span:nth-child(2){background:#eecba5}.appointment-service:nth-child(2) .appointment-palette span:nth-child(3){background:#a3324e}
.appointment-service:nth-child(3) .appointment-palette span:nth-child(1){background:#4f8890}.appointment-service:nth-child(3) .appointment-palette span:nth-child(2){background:#d29a55}.appointment-service:nth-child(3) .appointment-palette span:nth-child(3){background:#8f536e}
.appointment-service:nth-child(4) .appointment-palette span:nth-child(1){background:#2f7180}.appointment-service:nth-child(4) .appointment-palette span:nth-child(2){background:#cf835f}.appointment-service:nth-child(4) .appointment-palette span:nth-child(3){background:#e6bc72}
.appointment-service h2 { font-size: clamp(1.15rem, 2.2vw, 1.45rem); }
.appointment-service dl,
.appointment-status dl { margin: 1rem 0 0; }
.appointment-service dl div,
.appointment-status dl div { display: flex; justify-content: space-between; gap: 1rem; padding: .55rem 0; border-top: 1px solid var(--line); }
.appointment-service dt,
.appointment-status dt { font-weight: 700; }
.appointment-service dd,
.appointment-status dd { margin: 0; text-align: right; }
.appointment-status { border-top: 1px solid var(--line); padding-top: 2.5rem; }
.appointment-placeholder { border: 1px solid var(--line); background: rgba(255,255,255,.62); padding: 1.25rem; }
.appointment-placeholder label { display: block; margin-bottom: 1rem; font-weight: 700; }
.appointment-placeholder select,
.appointment-placeholder input { display: block; width: 100%; margin-top: .35rem; padding: .75rem; border: 1px solid var(--line); background: #f2ede7; color: #665f58; }
.appointment-placeholder .button[disabled] { width: 100%; cursor: not-allowed; opacity: .56; }
.appointment-placeholder p { margin-bottom: 0; font-size: .9rem; }
.appointment-placeholder fieldset { margin:1rem 0; padding:1rem; border:1px solid var(--line); }
.appointment-placeholder legend { padding:0 .35rem; font-weight:700; }
.appointment-placeholder fieldset label:last-child { display:flex; gap:.55rem; align-items:flex-start; font-weight:500; }
.appointment-placeholder fieldset input[type="checkbox"] { width:auto; margin:.2rem 0 0; }
.appointment-review-state { margin:0 0 1rem!important; padding:.7rem .8rem; border-left:4px solid var(--rose); background:rgba(255,255,255,.68); }
.appointment-contact { border-top: 1px solid var(--line); padding: 1rem 0 4rem; }
.appointment-process { padding:clamp(2rem,5vw,4rem); margin:0 0 3rem; background:linear-gradient(135deg,rgba(255,255,255,.82),rgba(233,220,209,.72)); border:1px solid var(--line); }
.appointment-process ol { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1rem; padding:0; margin:2rem 0; list-style:none; counter-reset:process; }
.appointment-process li { counter-increment:process; padding:1.2rem; background:rgba(255,255,255,.72); border-top:4px solid var(--rose); }
.appointment-process li::before { content:counter(process,decimal-leading-zero); display:block; margin-bottom:.75rem; color:var(--rose); font-weight:800; letter-spacing:.12em; }
.appointment-process li strong,.appointment-process li span { display:block; }
.appointment-process li span { margin-top:.5rem; color:#5f5654; font-size:.95rem; }
.appointment-note { padding:1rem 1.2rem; border-left:4px solid var(--rose); background:rgba(255,255,255,.7); }
@media (max-width: 900px) {
  .appointment-services { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .appointment-process ol { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width: 620px) {
  .appointment-intro,
  .appointment-status,
  .appointment-services { grid-template-columns: 1fr; }
  .appointment-process ol { grid-template-columns:1fr; }
}
.book-feature {
  display: grid;
  grid-template-columns: minmax(220px, 0.55fr) minmax(0, 1.45fr);
  gap: clamp(2rem, 7vw, 6rem);
  align-items: center;
  padding: 1rem 0 4rem;
}
.book-feature > img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 640px;
  object-fit: contain;
  filter: drop-shadow(16px 18px 0 #eadfd3);
}
.work-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  padding: 2rem 0;
}
.work-card {
  background: var(--white);
  border: 1px solid var(--line);
  min-width: 0;
}
.work-card a {
  display: block;
  text-decoration: none;
}
.work-card img {
  display: block;
  width: 100%;
  height: 290px;
  object-fit: cover;
}
.work-card span {
  display: block;
  padding: 0.85rem 1rem;
  font-weight: 700;
}
.shop-action {
  margin: 0 0 4rem;
}
.breadcrumbs {
  font-size: 0.9rem;
  text-transform: none;
  letter-spacing: 0;
  margin: -1rem 0 2rem;
}
.breadcrumbs span {
  color: #6a6260;
}
.work-detail {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
  padding-bottom: 4rem;
}
.work-detail figure {
  margin: 0;
}
.work-detail img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 760px;
  object-fit: contain;
  background: var(--white);
  border: 1px solid var(--line);
}
.work-detail figcaption {
  font-size: 0.9rem;
  margin-top: 0.6rem;
  color: #5f5654;
}
footer {
  border-top: 1px solid var(--line);
  font-size: 0.9rem;
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}
@media (max-width: 900px) {
  .work-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 760px) {
  header {
    align-items: flex-start;
    flex-direction: column;
  }
  .hero,
  .cards,
  .work-detail,
  .book-feature {
    grid-template-columns: 1fr;
  }
  .hero img {
    max-width: 420px;
  }
  .page-head {
    padding-top: 2rem;
  }
  .work-grid {
    grid-template-columns: 1fr 1fr;
  }
  .work-card img {
    height: 230px;
  }
}
@media (max-width: 480px) {
  .work-grid {
    grid-template-columns: 1fr;
  }
  .work-card img {
    height: auto;
    max-height: 440px;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

.section-heading {
  max-width: 760px;
}
.section-heading > p:last-child {
  color: #5f5654;
}
.product-preview,
.related-artwork {
  padding: clamp(3rem, 7vw, 6rem) 0;
  border-top: 1px solid var(--line);
}
.product-preview-intro {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: 2.4rem;
}
.product-preview-intro .section-heading { max-width: 720px; }
.product-preview-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.2rem, 2.8vw, 2rem);
}
.product-mockup {
  margin: 0;
  min-width: 0;
  background: #fff;
  border: 1px solid rgba(77, 56, 47, 0.16);
  border-radius: 2px;
  overflow: hidden;
  box-shadow: 0 18px 50px rgba(64, 43, 35, 0.08);
}
.product-stage {
  position: relative;
  display: grid;
  place-items: center;
  height: clamp(360px, 36vw, 500px);
  overflow: hidden;
  perspective: 1100px;
  background:
    radial-gradient(ellipse at 50% 46%, #fff 0 10%, #f8f7f5 36%, #ebe9e5 72%, #dedbd5 100%);
}
.product-mockup img {
  display: block;
  object-fit: cover;
}
.product-mockup figcaption {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 1.15rem 1.3rem 1.25rem;
  border-top: 1px solid rgba(77, 56, 47, 0.12);
}
.product-mockup figcaption strong {
  font: 700 0.9rem/1.3 system-ui, sans-serif;
  letter-spacing: 0.025em;
}
.product-mockup figcaption span {
  color: #746864;
  font: 500 0.75rem/1.4 system-ui, sans-serif;
  text-align: right;
}
.studio-horizon {
  position: absolute;
  inset: 69% -8% auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(70,62,56,.13) 20% 80%, transparent);
}
.product-ground-shadow {
  position: absolute;
  bottom: 12%;
  border-radius: 50%;
  background: rgba(35,28,24,.28);
  filter: blur(18px);
  transform: rotateX(69deg);
}
.frame-shell {
  position: relative;
  z-index: 2;
  width: min(54%, 270px);
  padding: 17px;
  background: linear-gradient(135deg, #171717 0 34%, #383838 48%, #111 100%);
  box-shadow:
    -22px 28px 38px rgba(32,25,21,.28),
    inset 0 0 0 2px #4d4d4d,
    inset 0 0 0 5px #111;
  transform: rotateZ(-2deg) rotateY(-24deg) rotateX(3deg);
  transform-style: preserve-3d;
}
.frame-depth {
  position: absolute;
  inset: 0;
  background: #0b0b0b;
  transform: translateZ(-24px) translateX(-18px);
  box-shadow: -10px 11px 15px rgba(21,17,14,.3);
}
.frame-mat {
  position: relative;
  z-index: 2;
  display: block;
  padding: 12%;
  background: #f4f3ef;
  box-shadow: inset 0 0 0 1px #dad8d2, inset 0 0 20px rgba(36,31,27,.08);
}
.frame-mat img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: contain;
  background: #eeeae3;
  box-shadow: 0 3px 8px rgba(25,20,17,.2);
}
.frame-ground-shadow { width: 45%; height: 12%; margin-left: -5%; }
.pillow-shell {
  position: relative;
  z-index: 2;
  width: min(57%, 285px);
  aspect-ratio: 1;
  border-radius: 20% 16% 22% 14%;
  box-shadow:
    inset 18px 14px 28px rgba(255,255,255,.28),
    inset -28px -18px 38px rgba(35,26,22,.32),
    0 30px 38px rgba(38,29,25,.28);
  transform: rotateZ(-7deg) rotateY(-18deg) rotateX(7deg);
  transform-style: preserve-3d;
}
.pillow-face {
  position: absolute;
  inset: 3.5%;
  overflow: hidden;
  border-radius: 18% 14% 20% 12%;
  transform: translateZ(8px);
  clip-path: polygon(9% 1%, 90% 3%, 99% 14%, 96% 89%, 86% 99%, 12% 96%, 1% 86%, 3% 13%);
  background: #b9aa9d;
}
.pillow-face:after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 24px 16px 32px rgba(255,255,255,.23), inset -34px -24px 40px rgba(24,18,16,.38);
}
.pillow-face img {
  width: 100%;
  height: 100%;
  filter: saturate(.94) contrast(.96);
}
.pillow-edge {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, #c9bdb3, #8c796d);
  transform: translateZ(-10px) translateX(-8px);
}
.pillow-seam {
  position: absolute;
  z-index: 4;
  inset: 2%;
  border: 2px solid rgba(237,229,220,.65);
  border-radius: 18% 14% 20% 12%;
  transform: translateZ(12px);
}
.pillow-ground-shadow { width: 45%; height: 12%; }
.tote-shell {
  position: relative;
  z-index: 2;
  width: min(51%, 255px);
  aspect-ratio: .88;
  margin-top: 9%;
  transform: rotateZ(2deg) rotateY(-21deg) rotateX(2deg);
  transform-style: preserve-3d;
}
.tote-face {
  position: absolute;
  z-index: 3;
  inset: 0;
  overflow: hidden;
  clip-path: polygon(4% 0, 96% 2%, 100% 96%, 4% 100%);
  background: #d7cabd;
  box-shadow: inset 18px 0 26px rgba(255,255,255,.18), inset -26px -8px 34px rgba(25,19,16,.28), 0 30px 35px rgba(40,29,24,.3);
}
.tote-face img {
  width: 100%;
  height: 100%;
  filter: saturate(.94) contrast(.96);
}
.tote-face:after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 18px 0 25px rgba(255,255,255,.14), inset -32px -5px 38px rgba(28,21,18,.34);
}
.tote-gusset {
  position: absolute;
  inset: 3% auto 0 -13%;
  width: 18%;
  background: linear-gradient(90deg, #62534a, #aa9687);
  transform: rotateY(68deg);
  transform-origin: right center;
  clip-path: polygon(24% 0, 100% 0, 100% 100%, 0 93%);
}
.tote-top {
  position: absolute;
  z-index: 5;
  left: 3%; right: 4%; top: -2%;
  height: 5%;
  background: linear-gradient(180deg, #161413, #514740);
  transform: rotateX(65deg);
  transform-origin: bottom;
}
.tote-handle {
  position: absolute;
  z-index: 1;
  width: 47%;
  height: 43%;
  top: -34%;
  border: 13px solid #211d1b;
  border-bottom: 0;
  border-radius: 50% 50% 0 0;
  filter: drop-shadow(0 7px 5px rgba(36,24,20,.24));
}
.tote-handle-back { left: 8%; transform: translateZ(-5px); }
.tote-handle-front { right: 8%; z-index: 6; transform: translateZ(8px); }
.tote-ground-shadow { width: 39%; height: 12%; margin-left: -2%; }
.mug-shell {
  position: relative;
  z-index: 3;
  width: min(47%, 235px);
  aspect-ratio: .9;
  margin-right: 8%;
  transform: rotateZ(-2deg) rotateY(-15deg);
  transform-style: preserve-3d;
}
.mug-body {
  position: absolute;
  z-index: 2;
  inset: 3% 0 0;
  overflow: hidden;
  border-radius: 8% 8% 25% 25% / 5% 5% 13% 13%;
  background: linear-gradient(90deg, #c8c3be, #fff 14% 72%, #b8b0aa);
  box-shadow: inset 17px 0 24px rgba(54,39,33,.16), inset -22px -5px 30px rgba(55,39,33,.25), 0 31px 38px rgba(38,28,23,.3);
}
.mug-rim {
  position: absolute;
  z-index: 5;
  left: -1%; right: -1%; top: -5%;
  height: 17%;
  border: 9px solid #f8f7f5;
  border-radius: 50%;
  background: radial-gradient(ellipse, #3b2319 0 51%, #754b34 54%, #c6a17f 57%, #ddd8d3 61%, #fff 72%);
  box-shadow: 0 6px 9px rgba(48,30,24,.22), inset 0 3px 4px rgba(255,255,255,.55);
}
.mug-handle {
  position: absolute;
  z-index: 1;
  right: -45%; top: 23%;
  width: 58%; height: 48%;
  border: 20px solid #f3f1ee;
  border-left: 11px solid #c4bdb8;
  border-radius: 22% 58% 58% 22%;
  box-shadow: 10px 10px 16px rgba(46,29,23,.22), inset -7px 0 9px rgba(67,48,40,.12);
  transform: translateZ(-3px);
}
.mug-art {
  position: absolute;
  z-index: 2;
  inset: 9% 0 5%;
  overflow: hidden;
  border-radius: 2% 2% 22% 22% / 1% 1% 11% 11%;
}
.mug-art img {
  width: 100%;
  height: 100%;
  filter: saturate(.94) contrast(.97);
  transform: scaleX(1.15);
}
.mug-highlight {
  position: absolute;
  z-index: 4;
  inset: 0;
  background: linear-gradient(90deg, rgba(255,255,255,.5), transparent 17% 72%, rgba(32,22,18,.38));
  pointer-events: none;
}
.mug-ground-shadow { width: 34%; height: 11%; margin-right: -3%; }
.mug-steam {
  position: absolute;
  z-index: 2;
  top: 18%;
  width: 3%;
  height: 23%;
  border-left: 4px solid rgba(130,125,119,.22);
  border-radius: 50%;
  filter: blur(2px);
}
.mug-steam-one { left: 45%; transform: rotate(8deg); }
.mug-steam-two { left: 50%; height: 18%; transform: rotate(-9deg); }
}
.product-preview-action {
  margin: 0;
  flex: 0 0 auto;
}
.product-availability-note {
  margin: 1rem 0 0;
  color: #746864;
  font-size: .78rem;
}
.related-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  margin: 2rem 0;
}
.related-card {
  min-width: 0;
  background: var(--white);
  border: 1px solid var(--line);
}
.related-card a {
  display: block;
  text-decoration: none;
}
.related-card img {
  display: block;
  width: 100%;
  height: 220px;
  object-fit: contain;
  background: #efe7dd;
}
.related-card span {
  display: block;
  padding: 0.8rem 1rem;
}
.related-card strong,
.related-card small {
  display: block;
}
.related-card small {
  margin-top: 0.25rem;
  color: #665c59;
  font:
    600 0.78rem/1.3 system-ui,
    sans-serif;
}
@media (max-width: 900px) {
  .related-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .product-preview-intro { align-items: start; flex-direction: column; }
}
@media (max-width: 680px) {
  .product-preview-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .product-stage {
    height: min(82vw, 390px);
  }
  .product-mockup figcaption {
    align-items: start;
    flex-direction: column;
  }
  .product-mockup figcaption span {
    text-align: left;
  }
  .related-grid {
    grid-template-columns: 1fr 1fr;
  }
  .related-card img {
    height: 160px;
  }
}
.home-module-hero{color:var(--home-text)}
.home-module-hero,.home-module-cards article{border-radius:var(--home-radius)}
.home-module-cards article{background:var(--home-surface)}
.home-module-hero .button:first-child,.home-module-cards a{color:var(--home-accent)}

.blog-intro{max-width:760px;margin:0 auto 2rem;text-align:center}
.blog-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:1.5rem;max-width:940px;margin:0 auto}
.blog-card{overflow:hidden;background:var(--white);border:1px solid var(--line);border-radius:24px}
.blog-card a{display:grid;grid-template-columns:minmax(240px,.78fr) minmax(0,1.22fr);color:inherit;text-decoration:none}
.blog-card img{width:100%;height:100%;min-height:420px;object-fit:cover}
.blog-card span{display:flex;flex-direction:column;justify-content:center;padding:clamp(1.5rem,4vw,3.5rem)}
.blog-card small,.blog-meta{color:#7b5363;font:700 .78rem/1.4 system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase}
.blog-card strong{margin:.7rem 0;font:700 clamp(1.65rem,3vw,2.55rem)/1.08 Georgia,serif}
.blog-card b{color:var(--accent);font:700 .9rem/1.4 system-ui,sans-serif}
.blog-proclamation{max-width:760px;margin:2.5rem auto 0;padding:1.8rem 2rem;border-left:4px solid var(--accent);background:#f6eee8}
.blog-proclamation p{margin:0;font:italic 600 clamp(1.25rem,2.6vw,1.75rem)/1.45 Georgia,serif}
.blog-proclamation span{display:block;margin-top:.65rem;color:#6d5f5b}
.blog-article{max-width:850px;margin:0 auto}
.blog-feature{margin:1.5rem 0 2rem}
.blog-feature img{display:block;width:100%;max-height:720px;object-fit:cover;object-position:center 40%;border-radius:24px}
.blog-feature figcaption{margin-top:.55rem;color:#746864;font-size:.78rem}
.blog-deck{font:600 clamp(1.15rem,2.2vw,1.4rem)/1.55 Georgia,serif;color:#4d4140}
.blog-body{font-size:1.08rem;line-height:1.78}
.blog-body h2{margin:2.5rem 0 .8rem;font-size:clamp(1.55rem,3vw,2.1rem)}
.blog-body blockquote{margin:2rem 0;padding:1.4rem 1.7rem;border-left:4px solid var(--accent);background:#f6eee8;font:italic 600 1.25rem/1.55 Georgia,serif}
.blog-author{display:grid;grid-template-columns:120px minmax(0,1fr);gap:1.5rem;align-items:center;margin-top:3rem;padding:1.6rem;border:1px solid var(--line);border-radius:20px;background:var(--white)}
.blog-author img{width:120px;height:120px;border-radius:50%;object-fit:cover}
.blog-author h2{margin:0 0 .4rem}
@media(max-width:680px){
  .blog-card a{grid-template-columns:1fr}
  .blog-card img{height:min(105vw,520px);min-height:0}
  .blog-author{grid-template-columns:1fr;text-align:center}
  .blog-author img{margin:auto}
  .blog-feature img{max-height:none}
}