/* Shared reading scale and corner hierarchy for the homepage's custom panels. */
/* One section rhythm; the shared ambient canvas already supplies the transitions. */
body.personal-portfolio > :is(#about, #music, #experience, #portfolio, #notes, #contact) { padding-block: 72px; }
body.personal-portfolio > .signal-transition { height: 0; }
body.personal-portfolio > .section-divider-simple { margin-block: 0; }
@media (max-width: 768px) {
  body.personal-portfolio > :is(#about, #music, #experience, #portfolio, #notes, #contact) { padding-block: 44px; }
}
:root {
  --reading-title: clamp(32px, calc(27px + 1.2vw), 44px);
  --reading-body: clamp(17px, calc(16px + .16vw), 18px);
  --reading-card-title: clamp(22px, calc(20px + .3vw), 24px);
  --radius-frame: 32px;
  --radius-panel: 24px;
  --radius-control: 12px;
}

body.personal-portfolio :is(#about, #services, #experience, #portfolio, #notes, #contact) .section-title,
body.personal-portfolio #music .studio-copy h2 {
  font-size: var(--reading-title);
  line-height: 1.17;
  font-weight: 600;
  letter-spacing: -.04em;
  text-wrap: balance;
}
body.personal-portfolio .section-subtitle {
  font-size: clamp(18px, calc(17px + .2vw), 20px);
  line-height: 1.75;
}
#home .hero-description,
.personal-panel .about-description,
.personal-panel .skill-practice p,
.personal-panel .service-description,
#music .studio-copy > p:not(.section-eyebrow),
#music .studio-notebook p,
#experience .experience-intro > p:not(.section-eyebrow),
#experience .timeline-role,
#experience .timeline-card-heading > p,
#experience .role-takeaway-text,
#experience .role-stack-row p,
#portfolio .portfolio-description,
#portfolio .current-app-copy > p:not(.section-eyebrow),
#portfolio .vicode-purpose-intro > p:not(.section-eyebrow),
#portfolio .vicode-purpose-note p,
#portfolio .archive-description {
  font-size: var(--reading-body);
  line-height: 1.75;
}
.personal-panel .service-title,
#experience .role-takeaway-title,
#experience .role-stack-row h4,
#portfolio .vicode-purpose-note h4 {
  font-size: 20px;
  line-height: 1.4;
}
#experience .experience-overview-roles strong { font-size: var(--reading-body); }
#experience .experience-intro {
  background: var(--surface-1);
  box-shadow: none;
}
#experience .experience-intro > .section-eyebrow {
  position: static;
  padding: 0;
  margin-bottom: 16px;
  border: 0;
  background: none;
}
#experience .experience-intro .section-title::after { left: 0; transform: none; }
#experience .experience-employer-copy h3,
#portfolio .portfolio-title { font-size: var(--reading-card-title); line-height: 1.3; }
#portfolio :is(.current-app-copy, .vicode-purpose-intro) > .section-eyebrow {
  font-size: 16px;
  line-height: 1.5;
}
#portfolio :is(.current-app-copy, .vicode-purpose-intro) h3 {
  font-size: clamp(28px, calc(25px + .6vw), 34px);
  line-height: 1.2;
  font-weight: 500;
  letter-spacing: -.025em;
  margin: 12px 0 20px;
}
#portfolio .current-app-copy :is(.studio-link, .app-preview-toggle) { font-size: 17px; }
#portfolio :is(.app-progress, .app-preview figcaption) { font-size: 14px; line-height: 1.7; }
#portfolio .vicode-working-note { font-size: clamp(21px, calc(19px + .35vw), 24px); }
.personal-panel .about-info { font-size: 16px; }

/* The major frames repeat one contour; inner surfaces use a smaller radius. */
#home .hero-text,
.personal-panel,
.studio-layout,
.work-collection,
.experience-opening-surface,
#portfolio .current-app,
#contact .contact-panel { border-radius: var(--radius-frame); }
#experience .experience-intro,
#experience .experience-disclosure > summary,
#experience .timeline-card,
.personal-panel .service-card,
#portfolio .portfolio-card,
#portfolio .project-archive-control,
#contact .contact-form-container { border-radius: var(--radius-panel); }
#experience .timeline-card-heading,
#experience .role-stack-front,
#experience .role-stack-row,
#experience .role-stack summary::before,
#experience .role-stack summary::after,
#portfolio .vicode-purpose-note { border-radius: calc(var(--radius-panel) - 8px); }
#portfolio .portfolio-image { clip-path: inset(0 round var(--radius-panel) var(--radius-panel) 0 0); }
#portfolio .app-tab-surface { border-radius: 0 var(--radius-panel) var(--radius-panel) var(--radius-panel); }
#portfolio .current-app:has(.app-tabs button:not(:first-child)[aria-selected="true"]) .app-tab-surface { border-top-left-radius: var(--radius-panel); }
#home .hero-actions .btn,
.personal-panel .skill-practice-icon,
#portfolio .app-preview-gallery .vicode-preview-frame,
#contact .form-group input,
#contact .form-group textarea,
#contact .contact-form .btn { border-radius: var(--radius-control); }
#contact .contact-form .btn-primary { background: color-mix(in srgb, var(--accent-primary) 80%, #000); box-shadow: none; }
#contact .contact-form .btn-primary::before { display: none; }
#contact .contact-form .btn-primary:hover { background: color-mix(in srgb, var(--accent-primary) 70%, #000); box-shadow: none; transform: none; }
#contact .contact-form .btn-primary:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 4px; }

/* Contact shares the quiet framed treatment instead of a separate hover light. */
#contact .contact-panel {
  position: relative;
  isolation: isolate;
  padding: clamp(24px, 4vw, 48px);
  border: 1px solid var(--border-strong);
  background: var(--surface-1);
  box-shadow: none;
}
#contact .contact-panel::before,
#contact .contact-panel::after { content: none; display: none; }
#contact .section-header { text-align: left; margin-bottom: 32px; }
#contact .section-title::after { left: 0; transform: none; }
#contact .section-subtitle { margin-inline: 0; max-width: 58ch; }
#contact .contact-content {
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  align-items: start;
  gap: clamp(24px, 4vw, 48px);
  padding: 0;
}
#contact .contact-info { gap: 0; margin-bottom: 0; }
#contact .contact-item {
  min-width: 0;
  padding: 20px 0;
  margin: 0;
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
  transition: none;
}
#contact .contact-item:first-child { padding-top: 0; }
#contact .contact-item:last-child { border-bottom: 0; }
#contact .contact-item:hover { transform: none; }
#contact .contact-icon {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  min-width: 44px;
  border: 0;
  border-radius: var(--radius-control);
  background: var(--surface-2);
}
#contact .contact-details { min-width: 0; overflow: visible; }
#contact .contact-details h3 { font-size: 17px; color: var(--text-2); }
#contact .contact-details p {
  font-size: var(--reading-body);
  line-height: 1.6;
  color: var(--text-0);
  white-space: normal;
  overflow: visible;
  overflow-wrap: anywhere;
}
#contact .contact-item:first-child .contact-details p { font-size: clamp(18px, calc(16px + .3vw), 20px); }
#contact .contact-link:hover .contact-details p { color: var(--accent-primary); }
#contact .contact-link:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 6px; border-radius: var(--radius-control); }
#contact .contact-form-container {
  padding: clamp(20px, 3vw, 32px);
  border: 1px solid var(--border);
  background: var(--surface-0);
  backdrop-filter: none;
}
#contact .form-group label { font-size: 16px; color: var(--text-1); }
#contact .form-group input,
#contact .form-group textarea { min-height: 48px; font-size: 17px; }

/* The hero uses the same quiet actions and surfaces as the rest of the page. */
#home .hero-text::before { border-radius: 1px; }
#home .hero-actions .btn::before { content: none; display: none; }
#home .hero-actions .btn-primary { background: color-mix(in srgb, var(--accent-primary) 80%, #000); box-shadow: none; }
#home .hero-actions .btn-primary:is(:hover, :focus-visible) { background: color-mix(in srgb, var(--accent-primary) 70%, #000); box-shadow: none; }
#home .hero-actions .btn-secondary:is(:hover, :focus-visible) { box-shadow: none; }
#home .floating-elements.orbit .floating-icon { background: var(--surface-1); border-color: var(--border); box-shadow: none; opacity: .72; }
#home .floating-elements.orbit .floating-icon i { color: var(--accent-primary); filter: none; }
#home .availability-label { font-size: 10px; }
#home .availability-roles, #home .hero-location { font-size: 13px; }
@media (min-width: 901px) {
  #home .hero-shell { padding: 136px 36px 160px; }
}

@media (max-width: 768px) {
  #contact .contact-content { grid-template-columns: minmax(0, 1fr); }
  #contact .contact-form-container { order: 2; }
}
@media (max-width: 600px) {
  :root { --radius-frame: 28px; --radius-panel: 20px; }
  #contact .contact-panel { padding: 28px 18px; }
  #contact .contact-form-container { padding: 20px 16px; }
}