/* ==========================================================================
   refine.css — taste-skill 保守精修叠加层（加载于 style.min.css 之后）       *
   Purpose (redesign-existing-projects, fix-priority items, lowest risk):
     1) Typography presence  — tighter headline tracking + no orphaned words
     2) Surfaces             — warm-tinted shadows instead of pure-black/neutral
     3) Interactivity/access — focus-visible ring, pressed feedback, reduced-motion
     4) Layout               — optical section padding (bottom slightly larger)
   Deliberately does NOT touch: SEO copy, TDK, JSON-LD, section structure,
   brand palette, or the inline <style> blocks (index/news).
   ========================================================================== */

:root {
  /* Warm-tinted shadows (background hue) instead of pure black at low alpha */
  --shadow-warm-hover: 0 18px 44px rgba(45, 37, 32, 0.13), 0 0 34px rgba(232, 120, 80, 0.10);
}

/* ---- Typography: stronger headline presence, balanced line breaks ---- */
h1, h2, h3 {
  text-wrap: balance;
}
.section-header h2 {
  letter-spacing: -1.5px;
}
.section-header p,
.business-card p,
.product-card p,
.about-content p,
.news-excerpt {
  text-wrap: pretty;
}

/* ---- Interactivity & states (accessibility + tactile feedback) ---- */
a:focus-visible,
.btn:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 3px solid #E87850;
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

.btn {
  will-change: transform;
}
.btn:active {
  transform: scale(0.98);
}
.card-link:active,
.news-item:active {
  opacity: 0.92;
}

/* ---- Surfaces: warm shadow on hover (replaces neutral/black tint) ---- */
.business-card:hover,
.product-card:hover {
  box-shadow: var(--shadow-warm-hover);
}

/* ---- Layout: optical section padding (bottom > top for visual balance) ---- */
.section {
  padding: 104px 0 122px;
}
.section-wide {
  padding: 132px 0 152px;
}

/* ---- Reduced motion (accessibility) ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .counter,
  .fade-in, .fade-in-left, .fade-in-right, .scale-in, .stagger-children {
    transition: none !important;
  }
}