/* Header, footer, links, buttons, section rules: shared on both pages. */
.site-header { position: sticky; top: 0; z-index: 20; border-bottom: 0.2px solid var(--accent); background: #101a21ed; backdrop-filter: blur(18px); }
.header-inner { min-height: 50px; display: flex; align-items: center; gap: 2rem; }
.brand { display: inline-flex; align-items: center; gap: .85rem; margin-right: auto; font-size: 1rem; font-weight: 550; letter-spacing: -.02em; }
.monogram { color: var(--accent); font: italic 2.6rem/1 var(--font-display); }
.main-nav { display: flex; align-items: center; gap: 1.9rem; font-size: .875rem; }
.main-nav a { position: relative; padding-block: .5rem; color: var(--muted); }
.main-nav a::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform 200ms; }
.main-nav a:hover, .main-nav a[aria-current] { color: var(--text); }
.main-nav a:hover::after, .main-nav a[aria-current]::after { transform: scaleX(1); }
.external-mark { color: var(--accent); margin-left: .15rem; }
.motion-toggle { display: flex; align-items: center; justify-content: center; gap: .55rem; background: transparent; border: 1px solid var(--line); border-radius: 99px; min-height: 40px; padding: .4rem .8rem; color: var(--muted); font-size: .75rem; }
.motion-toggle:hover { border-color: var(--accent); color: var(--text); }
.motion-icon { display: block; width: .7rem; }
.social-links { display: flex; flex-wrap: wrap; gap: .55rem; }
.social-links a, .social-pending { display: inline-flex; height: 42px; width: 42px; flex: 0 0 42px; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: var(--radius-small); padding: .6rem; transition: background 180ms, border-color 180ms, transform 180ms; }
.social-links svg { display: block; width: 20px; height: 20px; fill: currentColor; }
.social-pending { opacity: .5; }
.social-links a:hover { background: var(--surface-raised); border-color: var(--accent); transform: translateY(-3px); }
.text-link { display: inline-flex; align-items: center; gap: 2rem; padding-block: .5rem; color: var(--accent-bright); border-bottom: 1px solid var(--accent); font-size: .9375rem; }
.button { display: inline-flex; align-items: center; justify-content: space-between; gap: 2rem; border-radius: var(--radius-small); padding: .9rem 1.2rem; background: var(--surface-raised); border: 1px solid var(--line); font-size: .9375rem; line-height: 1.5; transition: background 200ms, transform 200ms; }
.button:hover { background: #2c3c45; transform: translateY(-2px); }
.button span { color: var(--accent); }
.button-light { background: var(--accent); border-color: var(--accent); color: var(--ink); }
.button-light span { color: inherit; }
.button-light:hover { background: var(--accent-bright); }
.section-topline { display: flex; align-items: center; gap: 2rem; margin-bottom: 3rem; }
.section-line { flex: 1; height: 1px; background: var(--line); }
.site-footer { padding-top: 1rem; border-top: 0.65px solid var(--line); margin-top: var(--section-space); padding-bottom: 1rem; }
.footer-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-bottom: 1rem; }
.footer-name { font: 400 clamp(2.5rem,5vw,4.5rem)/1.15 var(--font-display); letter-spacing: -.04em; }
.footer-name span { display: inline-block; color: var(--accent); font: 300 .65em var(--font-body); margin-left: 2rem; }
.footer-scheduling { display: flex; flex-direction: column; align-items: flex-start; gap: .65rem; }
.footer-bottom { border-top: 1px solid var(--line); padding-top: 0.72rem; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; color: var(--subtle); font-size: .875rem; }
.footer-social a, .footer-social .social-pending { border: 0; padding: .4rem .55rem; }
/* Breakpoint: header controls compact when their combined widths need it. */
@media (max-width: 1000px) { .motion-label { display: none; } .motion-toggle { width: 40px; padding: 0; } .header-inner { gap: 1.5rem; } }
@media (max-width: 640px) {
  .header-inner { min-height: 65px; gap: .8rem; flex-wrap: wrap; padding-block: .8rem; }
  .brand { font-size: .875rem; }
  .monogram { font-size: 2.2rem; }
  .main-nav { gap: 1.1rem; order: 3; width: 100%; border-top: 1px solid var(--line); padding-top: .3rem; align-items: flex; }
  .footer-top, .footer-bottom { flex-direction: column; align-items: flex-center; }
  .footer-top { padding-bottom: 1.2rem; }
  .footer-social { gap: .3rem; }
  .section-topline { gap: 1rem; margin-bottom: 2rem; }
}