/* THE RECORD — restrained Swiss / Japanese editorial typography.
   Uses the original logo asset; no imagery is modified. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap');

:root {
  --record-font: 'Helvetica Neue', 'Inter', 'Helvetica', Arial, sans-serif;
}
html, body, body *, input, textarea, button, select, option, label, ::placeholder {
  font-family: var(--record-font) !important;
}
/* Gentle greyscale text rendering without blurring fine detail. */
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
body { font-weight: 300 !important; }
p, li, .record-body, .service-description, .story-description,
.about-me-copy, .occasion-description, .contact-copy {
  font-weight: 300 !important;
  letter-spacing: -.006em;
}
.service-description, .story-description, .record-body,
.about-me-copy, .occasion-description, .contact-copy {
  font-size: clamp(13px, 1.12vw, 16px) !important;
  line-height: 1.65 !important;
}
.about-main {
  font-size: clamp(24px, 3.5vw, 50px) !important;
  line-height: 1.25 !important;
  font-weight: 300 !important;
  letter-spacing: -.038em !important;
}
h1, h2, h3, h4, .hero-title, .story-title, .record-title, .section-title,
.intro-title, .services-title, .contact-title, .message {
  font-weight: 400 !important;
  letter-spacing: -.045em;
}
.nav, .nav a, .label, .section-header, .record-kicker, .story-kicker,
.service-number, .project-meta, .scroll-cue {
  font-size: clamp(11px, .94vw, 13px) !important;
  font-weight: 400 !important;
  letter-spacing: -.02em !important;
}
input, textarea, select, button { font-size: max(16px, 1em); }

/* Single right-aligned navigation; no corner logo. */
.hero-content .nav {
  display: flex !important;
  justify-content: flex-end !important;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: clamp(12px, 2vw, 28px);
}
.hero-content .nav::before { display: none !important; }

/* Left-aligned graphic and wordmark, with tighter editorial geometry. */
.hero-title {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: .13em !important;
  font-size: clamp(48px, 10.8vw, 170px) !important;
  line-height: 1.04 !important;
  letter-spacing: -.067em !important;
  width: 100%;
  margin-left: 0 !important;
  white-space: nowrap !important;
  font-weight: 400 !important;
}
.hero-title .record-title-text {
  display: block;
  white-space: nowrap;
  font-family: var(--record-font) !important;
  font-weight: 400 !important;
}
.hero-title .record-static-mark {
  display: block;
  height: .74em !important;
  width: auto !important;
  max-width: none !important;
  flex: 0 0 auto;
  margin: 0 !important;
  object-fit: contain;
  transform: translateY(.055em);
  filter:
    drop-shadow(.35px 0 0 rgba(255,255,255,.95))
    drop-shadow(-.35px 0 0 rgba(255,255,255,.95))
    drop-shadow(0 .35px 0 rgba(255,255,255,.92))
    drop-shadow(0 -.35px 0 rgba(255,255,255,.92));
}
@media (max-width:700px) {
  .hero-content .nav { gap: 12px; }
  .hero-title {
    font-size: clamp(36px, 10.3vw, 73px) !important;
    gap: .10em !important;
  }
  .hero-title .record-static-mark {
    height: .72em !important;
    transform: translateY(.05em);
  }
}

/* Soft, print-like hierarchy: the hero is less aggressive, the smaller copy calmer. */
.hero-title .record-title-text { font-weight: 400 !important; }
.nav a, .section-header, .label { font-weight: 300 !important; }