/* ==========================================================================
   THERMAUNO — A3  "Editorial Fabric"

   Site identity: wearable textiles sold with a fashion-magazine voice.
   Everything below ONLY overrides the shared skeleton (style.css).
   Loaded last so it wins over style.css / pages.css / articles.css.
   Palette values live exclusively in :root; component rules consume the
   custom properties (color-mix is used for translucency, never raw hex).
   ========================================================================== */

:root {
  /* ---- palette: deep plum, paper, ink --------------------------------- */
  --color-bg: #faf7f8;
  --color-bg-alt: #f3ebee;
  --color-surface: #ffffff;
  --color-surface-soft: #fdfafb;
  --color-ink: #241a1e;
  --color-ink-soft: #544349;
  --color-muted: #8e7a81;
  --color-accent: #8e4a63;
  --color-accent-deep: #6b3247;
  --color-accent-soft: #f0dce3;
  --color-accent-wash: #faf2f5;
  --color-hairline: rgba(36, 26, 30, 0.1);
  --color-hairline-strong: rgba(36, 26, 30, 0.18);
  --color-highlight: rgba(255, 255, 255, 0.9);

  /* ---- radii: soft, not pill ----------------------------------------- */
  --radius-sm: 0.75rem;
  --radius-md: 1.125rem;
  --radius-lg: 1.5rem;
  --radius-xl: 2rem;

  /* ---- shadows: warm paper rather than cool glass -------------------- */
  --shadow-ambient: 0 28px 70px -42px rgba(75, 30, 46, 0.2);
  --shadow-lift: 0 36px 82px -44px rgba(75, 30, 46, 0.26);
  --shadow-button: 0 14px 30px -24px rgba(75, 30, 46, 0.9);
  --shadow-button-hover: 0 18px 34px -24px rgba(75, 30, 46, 0.95);

  /* ---- type: serif display + calm sans body -------------------------- */
  --font-display: Georgia, "Times New Roman", "Songti SC", serif;
}

/* ==========================================================================
   Typography — magazine headings, airy reading measure
   ========================================================================== */

body {
  line-height: 1.75;
  letter-spacing: 0.002em;
}

h1,
h2,
.hero-title,
.section-title,
.page-title,
.pdp-title,
.pdp-h2,
.article-title {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: 0;
}

.hero-title {
  line-height: 1.06;
}

/* Italic accent word reads as an editorial pull-quote, not a tech label. */
.hero-title em,
.page-title em,
.pdp-title em {
  font-style: italic;
}

.section-title {
  line-height: 1.14;
}

.page-title {
  line-height: 1.1;
}

.pdp-title {
  line-height: 1.12;
}

.pdp-h2 {
  line-height: 1.2;
}

/* Numerals in the trust bar / floating label also wear the serif. */
.stat-value,
.hero-float-value {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0;
}

.stat-value span {
  color: var(--color-accent-soft);
}

/* Eyebrow becomes a rule + small caps instead of a dotted pill. */
.eyebrow {
  padding: 0;
  border-radius: 0;
  background: transparent;
  letter-spacing: 0.22em;
  color: var(--color-accent-deep);
}

.eyebrow::before {
  width: 1.6rem;
  height: 1px;
  border-radius: 0;
  background: var(--color-accent);
}

/* ==========================================================================
   Buttons — thin-bordered rounded squares (never pills)
   ========================================================================== */

.btn,
.btn-primary,
.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: 0.7rem 1.4rem;
  border: 1px solid transparent;
  border-radius: 0.5rem;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.015em;
  box-shadow: none;
}

.btn-primary {
  border-color: var(--color-accent-deep);
  color: var(--color-surface);
  background: var(--color-accent);
  box-shadow: var(--shadow-button);
}

.btn-primary:hover {
  background: var(--color-accent-deep);
  border-color: var(--color-accent-deep);
  box-shadow: var(--shadow-button-hover);
}

.btn-ghost {
  border-color: var(--color-hairline-strong);
  color: var(--color-ink);
  background: transparent;
  box-shadow: none;
}

.btn-ghost:hover {
  border-color: var(--color-accent);
  background: var(--color-accent-wash);
  box-shadow: none;
}

.btn-icon {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 0.375rem;
  background: transparent;
  border: 1px solid color-mix(in srgb, currentColor 32%, transparent);
}

.btn:hover .btn-icon {
  transform: none;
  background: color-mix(in srgb, currentColor 10%, transparent);
}

.btn-ghost .btn-icon {
  background: transparent;
  color: var(--color-accent-deep);
}

.btn-ghost:hover .btn-icon {
  background: color-mix(in srgb, var(--color-accent) 10%, transparent);
}

/* Keep the small variant small — theme.css loads after style.css. */
.btn-sm {
  padding: 0.45rem 0.9rem;
  font-size: 0.8125rem;
}

.btn-sm .btn-icon {
  width: 1.55rem;
  height: 1.55rem;
}

/* ==========================================================================
   Quotes — 3px plum rule on the left edge
   ========================================================================== */

blockquote,
.pull-quote,
.article-body blockquote {
  margin-block: var(--space-6);
  padding-left: var(--space-5);
  border-left: 3px solid var(--color-accent);
  font-family: var(--font-display);
  font-size: 1.3125rem;
  font-style: italic;
  line-height: 1.55;
  color: var(--color-ink);
}

.article-body blockquote p {
  color: inherit;
}

/* Mission statement + PDP footnote are the site's other "quote" slots. */
.story-mission-text,
.pdp-note {
  border-left: 3px solid var(--color-accent);
  padding-left: var(--space-4);
}

/* ==========================================================================
   Image frames — generous paper matting
   ========================================================================== */

.hero-frame {
  padding: clamp(0.75rem, 1.4vw, 1.25rem);
  background: var(--color-surface);
}

.pdp-gallery img {
  padding: clamp(1.5rem, 3vw, 2.5rem);
}

/* ==========================================================================
   De-teal leftovers in the shared skeleton (no new literals)
   ========================================================================== */

.bezel--flat {
  background: var(--color-accent-wash);
}

.hero::before {
  background: radial-gradient(
    circle,
    var(--color-accent-wash) 0%,
    transparent 68%
  );
}

.trust-bar {
  background: var(--color-accent-deep);
}

.battery-list svg {
  color: var(--color-accent-soft);
}

.footer-col a:hover {
  color: var(--color-accent-soft);
}

/* ==========================================================================
   Injected quote widget (assets/js/widget.js) — same square-cornered buttons
   ========================================================================== */

body .bzwa-float-label {
  border-radius: 0.375rem;
}

body .bzwa-reopen {
  border-radius: 0.5rem;
}

.bzwa-popup .bzwa-send {
  border-radius: 0.5rem;
  letter-spacing: 0.015em;
}