/* Content-only voice page. The existing site shell provides its masthead, font and footer. */
#ff-voice {
  --ffv-fg: var(--ffp-fg, light-dark(#23182c, #f3f1e8));
  --ffv-muted: var(--ffp-muted, light-dark(#716578, #b5a9bd));
  --ffv-line: var(--ffp-line, light-dark(#d2ccd5, #403548));
  --ffv-surface: var(--ffp-surface, light-dark(#e9e2ef, #261d30));
  color: var(--ffv-fg);
  font: 500 16px/1.65 'FF Site Somic', 'FFP NT Somic', Arial, sans-serif;
  border-top: 1px solid var(--ffv-line);
  padding: 46px 0 70px;
}
#ff-voice, #ff-voice * { box-sizing: border-box; }
#ff-voice .ff-voice-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  align-items: start;
  gap: 50px;
}
#ff-voice h1, #ff-voice h2, #ff-voice h3, #ff-voice p { font-weight: 500; margin: 0; }
#ff-voice h1 {
  font-size: clamp(46px, 5.25vw, 76px);
  line-height: 1.03;
  letter-spacing: -0.045em;
  color: light-dark(#7137e8, #b58cff);
  margin: 13px 0 25px;
  overflow-wrap: anywhere;
}
#ff-voice .ff-voice-intro { max-width: 640px; font-size: 16px; line-height: 1.7; }
#ff-voice .ff-voice-intro p + p { margin-top: 19px; }
#ff-voice .ff-voice-person {
  color: light-dark(#7137e8, #c2a1ff);
  text-decoration: underline;
  text-decoration-color: light-dark(#7137e85c, #c2a1ff70);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: color 150ms ease, text-decoration-color 150ms ease;
}
#ff-voice .ff-voice-person:hover { text-decoration-color: currentColor; }
#ff-voice .ff-voice-person:focus-visible {
  outline: 2px solid light-dark(#7137e8, #d8ff3e);
  outline-offset: 4px;
  border-radius: 2px;
}
/* Appended to body so a page container cannot crop the portrait. */
.ff-voice-person-preview {
  position: fixed;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-sizing: border-box;
  width: 208px;
  max-height: calc(100dvh - 24px);
  padding: 8px 8px 12px;
  border: 1px solid #bc98ff;
  border-radius: 17px;
  background: #39244b;
  color: #fff7ed;
  box-shadow: 0 15px 38px #16072140;
  font: 500 14px/1.35 'FF Site Somic', 'FFP NT Somic', Arial, sans-serif;
  opacity: 0;
  transform: translateY(5px);
  transition: opacity 150ms ease, transform 150ms ease;
  pointer-events: none;
}
.ff-voice-person-preview[hidden] { display: none; }
.ff-voice-person-preview[data-visible] { opacity: 1; transform: translateY(0); }
.ff-voice-person-preview__media {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 0;
  aspect-ratio: 4 / 5;
  flex: 0 1 238px;
  overflow: hidden;
  border-radius: 10px;
  background: linear-gradient(145deg, #7137e8, #46305d);
  color: #d8ff3e;
  font-size: 44px;
  letter-spacing: -2px;
}
.ff-voice-person-preview__media img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}
.ff-voice-person-preview__name {
  flex: none;
  padding: 0 5px;
  border-left: 2px solid #d8ff3e;
  overflow-wrap: anywhere;
}
@media (prefers-reduced-motion: reduce) {
  #ff-voice .ff-voice-person, .ff-voice-person-preview { transition: none; }
  .ff-voice-person-preview { transform: none; }
}
#ff-voice .ff-voice-contact {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  min-height: 48px;
  margin-top: 30px;
  padding: 11px 21px;
  border: 1px solid #d8ff3e;
  border-radius: 999px;
  background: #d8ff3e;
  color: #23182c;
  text-decoration: none;
  font: inherit;
  font-size: 14px;
}
#ff-voice .ff-voice-contact span[aria-hidden] { font-size: 24px; line-height: 1; }
#ff-voice .ff-voice-contact:hover { background: #e4ff79; border-color: #e4ff79; }
#ff-voice .ff-voice-contact:focus-visible, #ff-voice audio:focus-visible {
  outline: 2px solid light-dark(#7137e8, #d8ff3e);
  outline-offset: 5px;
}
#ff-voice .ff-voice-demos { min-width: 0; }
#ff-voice .ff-voice-demos > h2 {
  font-size: 14px;
  line-height: 1.5;
  color: var(--ffv-muted);
  margin: 0 0 17px;
}
#ff-voice .ff-voice-list { display: grid; gap: 14px; padding: 0; margin: 0; list-style: none; }
#ff-voice .ff-voice-item { min-width: 0; }
#ff-voice .ff-voice-recording {
  position: relative;
  min-width: 0;
  padding: 23px 24px 22px;
  border: 1px solid var(--ffv-line);
  border-radius: 20px;
  background: var(--ffv-surface);
}
#ff-voice .ff-voice-recording h3 {
  font: inherit;
  font-size: 20px;
  line-height: 1.35;
  letter-spacing: -0.025em;
  margin-bottom: 17px;
  padding-right: 50px;
  overflow-wrap: anywhere;
}
#ff-voice audio { display: block; width: 100%; max-width: 100%; height: 54px; }
#ff-voice .ff-voice-duration { position: absolute; right: 24px; top: 25px; font-size: 13px; color: var(--ffv-muted); }
#ff-voice .ff-voice-file { display: inline-block; font-size: 12px; color: var(--ffv-muted); margin-top: 12px; text-decoration: underline; text-underline-offset: 3px; }
#ff-voice .ff-voice-file:focus-visible { outline: 2px solid #a77afa; outline-offset: 4px; }
#ff-voice .ff-voice-error { font-size: 13px; margin-top: 12px; }
#ff-voice .ff-voice-folder { min-width: 0; }
#ff-voice .ff-voice-folder > a { display: flex; flex-direction: column; min-height: 360px; padding: 38px; border-radius: 16px 16px 52px 16px; background: #7137e8; color: #fff7ed; }
#ff-voice .ff-voice-folder-kicker { font-size: 11px; letter-spacing: 1.4px; }
#ff-voice .ff-voice-folder h2 { font-size: clamp(34px, 4.5vw, 60px); line-height: 1.06; letter-spacing: -2px; margin: 37px 0 16px; }
#ff-voice .ff-voice-folder p { font-size: 16px; }
#ff-voice .ff-voice-folder-cta { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-top: 38px; margin-top: auto; color: #d8ff3e; font-size: 16px; }
#ff-voice .ff-voice-folder-cta > span { display: grid; place-items: center; width: 48px; height: 48px; flex: none; border-radius: 50%; background: #d8ff3e; color: #23182c; font-size: 29px; }
#ff-voice .ff-voice-folder > a:hover .ff-voice-folder-cta { text-decoration: underline; text-underline-offset: 4px; }
#ff-voice .ff-voice-folder > a:focus-visible { outline: 3px solid #a77afa; outline-offset: 5px; }
@media (max-width: 900px) {
  #ff-voice .ff-voice-layout { grid-template-columns: minmax(0, 1fr); gap: 35px; }
  #ff-voice h1 { font-size: 52px; }
  #ff-voice .ff-voice-recording { padding: 20px; }
}
@media (max-width: 640px) {
  #ff-voice { padding: 27px 0 42px; }
  #ff-voice .ff-voice-layout { grid-template-columns: minmax(0, 1fr); gap: 35px; }
  #ff-voice h1 { font-size: 50px; margin: 7px 0 19px; }
  #ff-voice .ff-voice-intro { max-width: 430px; font-size: 15px; }
  #ff-voice .ff-voice-contact { margin-top: 23px; }
  #ff-voice .ff-voice-recording { padding: 19px 16px 17px; border-radius: 16px; }
  #ff-voice .ff-voice-recording h3 { font-size: 19px; margin-bottom: 15px; }
  #ff-voice .ff-voice-folder > a { min-height: 310px; padding: 25px; }
}
@media (max-width: 360px) {
  #ff-voice h1 { font-size: 44px; }
  #ff-voice .ff-voice-recording { padding-right: 10px; padding-left: 10px; }
}