/* Smiley Sans has one weight and a naturally slanted design. */
@font-face {
  font-family: "Smiley Sans";
  src: url("./fonts/smiley-sans.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

:root {
  --font-standard: "Smiley Sans", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-synthesis: none;
}

button, input, select, textarea { font-family: var(--font-standard); }

body { font-family: var(--font-standard); }

.hero-title {
  font-family: var(--font-standard);
  font-size: clamp(4rem, 9vw, 8rem);
  font-weight: 500;
  line-height: 0.95;
  letter-spacing: -0.05em;
}

.project-title,
.project-row .project-title,
.project-preview .project-title,
.study-copy h2,
.study-copy .project-title {
  font-family: var(--font-standard);
  font-size: 1.5rem;
  font-weight: 550;
  line-height: 1.2;
  letter-spacing: -0.025em;
}

.project-description,
.project-preview .project-description,
.study-description,
.study-approach p,
.study-copy .project-description,
.study-approach .project-description {
  font-family: var(--font-standard);
  font-size: 1rem;
  line-height: 1.7;
  color: #68615b;
}

.tech-label,
.micro-data,
.scroll-indicator,
.spectrum,
.project-no,
.project-type,
.works-index > span,
.study-preview-label,
.study-preview-open,
.study-topbar,
.study-close,
.study-footer button,
.study-footer > span,
.study-controls,
.study-range-ends,
.study-eyebrow,
.study-approach h3,
.study-spec dt,
.about-label,
.contact-eyebrow,
.about footer,
.opening-top,
.opening-bottom,
.opening-skip,
.opening-type p,
.opening-caption {
  font-family: var(--font-standard);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.opening-word { font-family: var(--font-standard); font-weight: 500; }
.hero-copy { top: 49%; }
.title-mask { padding-top: .04em; padding-bottom: .06em; }
.title-mask > .title-dispersion { padding-top: .04em; }
.project-row { min-height: 108px; padding-block: 15px; row-gap: 8px; }
.project-type { margin-top: 0; line-height: 1.6; }
.project-preview .project-title { margin-top: 28px; }
.study-copy .project-title { max-width: none; }
.study-copy .study-question { color: #b7b1aa; }
.study-spec dd, .study-note { font-family: var(--font-standard); }
.micro-status { line-height: 1.6; }
.micro-right { line-height: 1.65; }
.about footer { font-size: .75rem; }
.sound-toggle, .opening-replay { min-height: 36px; }

@media (max-width: 760px) {
  /* The desktop minimum is too wide for the three fixed title lines on phones. */
  .hero-title { font-size: clamp(3rem, calc(25vw - 22px), 4.5rem); }
  .hero-copy { top: 47%; }
  .micro-status { top: 82px; }
  .micro-right { bottom: max(72px, calc(env(safe-area-inset-bottom) + 58px)); }
  .scroll-indicator { bottom: max(29px, env(safe-area-inset-bottom)); gap: 10px; }
  .scroll-indicator span { font-size: 0; }
  .scroll-indicator span::after { content: "SCROLL TO TUNE"; font-size: .75rem; }
  .spectrum { left: auto; right: 24px; width: 82px; bottom: max(32px, env(safe-area-inset-bottom)); gap: 6px; }
  .project-row .project-title { font-size: 1.5rem; }
  .project-type { font-size: .75rem; }
  .project-row { grid-template-columns: 26px minmax(0, 1fr); gap: 8px 10px; }
  .works-index > span { line-height: 1.7; }
  .opening-type p, .opening-caption { padding-inline: 20px; }
  .opening-word { font-size: 12.8vw; }
  .about footer { font-size: .75rem; }
}

@media (max-width: 360px) {
  .spectrum { width: 62px; }
  .project-row .project-title { font-size: 1.5rem; overflow-wrap: anywhere; }
  .project-type { overflow-wrap: anywhere; }
}

@media (max-height: 580px) and (min-width: 600px) {
  .hero-title { font-size: min(7vw, 15svh); }
  .hero-copy { top: 50%; }
  .micro-left { display: none; }
  .scroll-indicator { left: 4.2vw; }
  .spectrum { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .scroll-indicator span::after { content: "SCROLL TO EXPLORE"; }
}