/* JFB v1.5.11: approved rounded typography and restrained gradients. */

:root {
  --radius-small: 8px;
  --radius-control: 12px;
  --radius-card: 20px;
  --radius-pill: 999px;
  --body-font: "Huninn", "Noto Sans TC", "PingFang TC", system-ui, sans-serif;
  --display-font: var(--body-font);
  --color-bg: #0e0e0d;
  --color-bg-deep: #0b0b0a;
  --color-surface: #151511;
  --color-surface-raised: #1a1a14;
  --color-border: #323229;
  --color-brand-yellow: #e4f23d;
  --color-brand-yellow-hover: #e2ec4b;
  --color-brand-yellow-muted: rgba(228, 242, 61, 0.09);
  --soft-surface-gradient: linear-gradient(145deg, #1a1a15 0%, #151512 46%, #12120f 100%);
  --soft-yellow-gradient: linear-gradient(135deg, #edf857 0%, #e4f23d 54%, #dceb2e 100%);
}

body {
  font-synthesis: none;
  font-weight: 400;
  line-height: 1.7;
  background: linear-gradient(180deg, #12120f 0%, #0f0f0e 720px, #0d0d0c 100%);
}

/* Low contrast transitions use only warmer shades of the existing palette. */
.site-header {
  background: linear-gradient(115deg, rgba(19, 19, 16, .97), rgba(12, 12, 11, .96));
}
.hero { background: transparent; }
.hero::after, .article-hero::after {
  background:
    linear-gradient(105deg, rgba(13, 13, 11, .90) 0%, rgba(13, 13, 11, .72) 30%, rgba(12, 12, 11, .42) 60%, rgba(11, 11, 10, .18) 100%),
    linear-gradient(0deg, rgba(11, 11, 10, .58) 0%, rgba(11, 11, 10, .20) 38%, transparent 70%);
}
.card, .feature-link, .booking-panel, .booking-form,
.rate-card, .pricing-card, .equipment-card, .detail-card,
.space-card, .recording-session-showcase, .booking-band,
.arrival-box, .batch-slot, .booking-estimate, .batch-total,
.value-item, .rehearsal-step, details.booking-week-preview {
  background: var(--soft-surface-gradient);
}
.home-services .feature-link::after {
  background: linear-gradient(0deg, rgba(13, 13, 11, .94) 0%, rgba(13, 13, 11, .66) 32%, rgba(13, 13, 11, .20) 70%, rgba(13, 13, 11, .08) 100%);
}
.button.primary, .nav-cta, .booking-card-cta:not(.muted), .badge:not(.badge-muted) {
  background: var(--soft-yellow-gradient);
  border-color: #dfee39;
}
.button.primary:hover, .nav-cta:hover,
.booking-branch-card:not(.is-disabled):hover .booking-card-cta {
  background: linear-gradient(135deg, #e7ef5f, #e2ec4b 60%, #e4f23d);
  border-color: #e2ec4b;
}
.button.secondary {
  background: linear-gradient(135deg, rgba(28, 28, 22, .84), rgba(19, 19, 16, .9));
  border-color: rgba(228, 242, 61, .48);
}
.button.secondary:hover {
  background: linear-gradient(135deg, rgba(49, 50, 25, .92), rgba(23, 23, 18, .94));
  border-color: rgba(228, 242, 61, .72);
}
.site-footer {
  background: linear-gradient(180deg, #12120f, #0b0b0a);
}
/* Keep booking feedback and the selected date immediately recognisable. */
.booking-calendar .booking-calendar-day.is-selected { background: #ecff00; }
.batch-slot-message.is-error, .batch-status.is-error { color: #ecff00; }

h1, h2, h3, h4, .hero-brand-en,
.feature-link strong, .site-nav a, .button,
.eyebrow, .badge, .preview-label,
.booking-fields label, .booking-fields input,
.booking-fields select, .booking-fields textarea,
.batch-fields label, .batch-fields input,
.batch-fields select, .batch-fields textarea {
  font-family: var(--body-font);
  font-weight: 400;
}

h1, .hero h1, body[data-page] .hero h1, .article-hero-copy h1 {
  line-height: 1.17;
  letter-spacing: 0;
  text-transform: none;
}

.hero h1, body[data-page] .hero h1 { font-size: clamp(44px, 5.6vw, 82px); }
.hero-brand-en { line-height: 1.18; letter-spacing: 0.015em; }
h2 { line-height: 1.25; letter-spacing: 0; }
h3 { line-height: 1.3; }
.hero-subtitle { font-weight: 400; line-height: 1.75; }
.site-nav { gap: clamp(12px, 2vw, 24px); }

.button, .nav-toggle {
  border-radius: var(--radius-control);
  min-height: 48px;
}
.nav-toggle { width: 44px; height: 44px; min-height: 44px; }
.nav-cta { border-radius: var(--radius-pill); padding-inline: 22px; }
.button { padding-inline: 24px; }

.card, .feature-link, .booking-panel, .booking-form,
.rate-card, .pricing-card, .equipment-card, .detail-card,
.branch-card, .space-card, .recording-session-showcase,
.booking-band, .arrival-box, .batch-slot {
  border-radius: var(--radius-card);
}

.hero-media {
  inset: 12px 18px;
  border-radius: 28px;
  overflow: hidden;
}
.hero-copy { border-left-width: 2px; }
.hero-copy::before { border-radius: var(--radius-pill); }

.badge, .preview-label, .article-meta span,
.article-keywords span, .rehearsal-tags span {
  border-radius: var(--radius-pill);
  font-weight: 400;
}

.space-thumb { border-radius: var(--radius-small); }
.space-thumb:focus-visible {
  outline: 2px solid var(--yellow);
  outline-offset: 3px;
}
.article-content img, .article-hero-media {
  border-radius: var(--radius-card);
}
.article-hero-media { overflow: hidden; }

.home-why .grid, .rehearsal-journey {
  border-radius: var(--radius-card);
  overflow: hidden;
}

.booking-fields input:not([type="checkbox"]),
.booking-fields select, .booking-fields textarea,
.batch-fields input:not([type="checkbox"]),
.batch-fields select, .batch-fields textarea,
.batch-resume-file input {
  border-radius: var(--radius-control);
  font-size: 16px;
  font-weight: 400;
}

.booking-message, .booking-status, .booking-week-preview,
.booking-week-scroll, .batch-fields .batch-option,
.batch-slot-estimate, .batch-total, .batch-status,
.batch-result, .batch-resume-file {
  border-radius: var(--radius-control);
}
.booking-calendar { border-radius: 16px; }
.booking-calendar-nav, .booking-calendar .booking-calendar-month,
.booking-calendar-day { border-radius: var(--radius-small); }
.booking-week-booked-block { border-radius: 6px; }

.purpose-list li::before, .equipment-list li::before,
.arrival-list li::before { border-radius: 50%; }

@media (max-width: 760px) {
  .site-nav {
    border-radius: 0 0 var(--radius-card) var(--radius-card);
    background: linear-gradient(160deg, rgba(20, 20, 17, .98), rgba(12, 12, 10, .98));
  }
  .hero-media { inset: 8px; border-radius: 22px; }
  .hero h1, body[data-page] .hero h1 { font-size: clamp(38px, 10vw, 50px); }
  body[data-page="booking"] .hero h1 { font-size: clamp(30px, 8vw, 38px); }
  .hero-copy { padding-left: 16px; }
  .space-section, .recording-space-section { width: calc(100% - 28px); }
  .space-card {
    border-radius: var(--radius-card);
    border-inline: 1px solid var(--color-border);
  }
}

@media (max-width: 380px) {
  .booking-calendar { border-radius: 0; }
  .booking-calendar-day { border-radius: 7px; }
}