/* V3 finish layer. Load after site.css. Brand colours and layout stay locked. */
:root {
  --surface-highlight: rgb(255 255 255 / .48);
  --surface-shadow: rgb(111 53 72 / .09);
  --surface-shadow-soft: rgb(111 53 72 / .045);
}

/* Typography: retain the brand italic, but open compressed letterforms. */
h1, h2, h3 {
  letter-spacing: -.02em;
  line-height: 1.08;
}

.outline-heading {
  letter-spacing: -.012em;
  line-height: 1.08;
  -webkit-text-stroke: 2px var(--green);
  text-shadow: 0 1px 0 rgb(8 75 53 / .15);
}

.hero-title {
  letter-spacing: -.04em;
  line-height: 1;
  -webkit-text-stroke: 5px var(--cream);
}

.hero-copy .location {
  line-height: 1.18;
  margin-bottom: 17px;
}

.brand-note {
  line-height: 1.14;
  letter-spacing: .005em;
}

.script-note {
  letter-spacing: .008em;
  line-height: 1.35;
  transform: none;
}

/* About's p rule previously overrode the eyebrow metrics. Match it explicitly. */
.about-copy > .script-note {
  font-family: var(--display);
  font-size: clamp(18px, 1.65vw, 23px);
  font-style: italic;
  font-weight: 500;
  letter-spacing: .008em;
  line-height: 1.35;
  transform: none;
  margin: 0 0 clamp(28px, 2.6vw, 38px);
  max-width: 30ch;
}

.about-copy > .outline-heading {
  margin-top: 0;
}

.page-heading > .script-note {
  margin: 0 auto 22px;
  line-height: 1.35;
  transform: none;
}

.menu-section-heading h2 {
  letter-spacing: -.015em;
  line-height: 1.12;
  -webkit-text-stroke: 1.6px var(--green);
}

.product-card h3,
.single-grid .product-card h3 {
  letter-spacing: 0;
  line-height: 1.28;
}

.favourite h3,
.form-panel h2 {
  letter-spacing: -.015em;
  line-height: 1.12;
}

/* Pink backdrop: softer facets under one broad, restrained upper-left light. */
.faceted {
  background-color: var(--pink);
  background-image:
    linear-gradient(125deg, rgb(255 246 228 / .15), transparent 48%),
    linear-gradient(155deg, transparent 45%, rgb(255 255 255 / .12) 45%, rgb(255 255 255 / .12) 61%, transparent 61%),
    linear-gradient(25deg, transparent 30%, rgb(239 139 170 / .065) 30%, rgb(239 139 170 / .065) 59%, transparent 59%);
}

.page-frame {
  box-shadow:
    0 1px 1px rgb(111 53 72 / .07),
    0 14px 38px -12px var(--surface-shadow);
}

/* Ceramic panels: narrow lit edges and soft contact, not bloom or glass blur. */
.cream-section {
  background-color: var(--cream);
  background-image: linear-gradient(180deg, transparent, rgb(255 255 255 / .25) 36%, transparent);
}

.brand-note,
.menu-sidebar,
.form-panel {
  background-color: var(--cream);
  background-image: linear-gradient(145deg, rgb(255 255 255 / .25), transparent 52%);
  box-shadow:
    inset 0 1px 0 var(--surface-highlight),
    0 2px 3px var(--surface-shadow-soft),
    0 10px 22px -12px var(--surface-shadow);
}

.menu-section {
  background: rgb(255 246 228 / .16);
  border-color: rgb(255 246 228 / .68);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / .24),
    0 5px 12px -6px var(--surface-shadow-soft);
}

.site-nav a[aria-current="page"],
.about-menu-links a {
  box-shadow: inset 0 1px 0 var(--surface-highlight), 0 2px 5px var(--surface-shadow-soft);
}

.button {
  box-shadow: inset 0 1px 0 rgb(255 246 228 / .18), 0 3px 8px var(--surface-shadow);
}

.button.secondary {
  box-shadow: inset 0 1px 0 var(--surface-highlight), 0 3px 8px var(--surface-shadow-soft);
}

.button:disabled {
  box-shadow: none;
}

.field input,
.field textarea,
.search-field input,
.draft-panel textarea {
  box-shadow: inset 0 1px 3px rgb(111 53 72 / .035);
}

.sweet-ribbon,
.site-footer {
  box-shadow: inset 0 1px 0 rgb(255 246 228 / .12);
}

/* Keep an explicit focus ring above all decorative finish. */
:focus-visible {
  outline: 3px solid var(--green);
  outline-offset: 5px;
}

.sweet-ribbon :focus-visible,
.site-footer :focus-visible {
  outline-color: var(--cream);
}

@media (max-width: 1100px) {
  .hero-title {
    -webkit-text-stroke: 4px var(--cream);
  }
}

@media (max-width: 700px) {
  .hero-title {
    letter-spacing: -.04em;
    line-height: 1;
    -webkit-text-stroke: 3px var(--cream);
  }

  .outline-heading {
    -webkit-text-stroke: 1.8px var(--green);
  }

  .about-copy > .script-note {
    font-size: 18px;
    line-height: 1.35;
    margin-bottom: 24px;
  }

  .page-heading > .script-note {
    margin-bottom: 20px;
  }

  /* The mobile sidebar is a transparent filter strip, not a ceramic panel. */
  .menu-sidebar {
    background: transparent;
    box-shadow: none;
  }
}

@media (forced-colors: active) {
  .page-frame,
  .menu-section,
  .brand-note,
  .menu-sidebar,
  .form-panel,
  .button {
    box-shadow: none;
  }

  .hero-title,
  .outline-heading,
  .menu-section-heading h2 {
    -webkit-text-stroke: 0;
    text-shadow: none;
  }

  :focus-visible,
  .sweet-ribbon :focus-visible,
  .site-footer :focus-visible {
    outline-color: Highlight;
  }
}

@media print {
  .faceted,
  .cream-section,
  .brand-note,
  .menu-sidebar,
  .form-panel {
    background-image: none;
  }

  .page-frame,
  .menu-section,
  .form-panel {
    box-shadow: none;
  }
}