/* Restore the pre-Oak homepage composition and focus behavior from git 24a4377. */
/* Same container as every other page (see minimal.css), so the nav and left edge don't jump between pages. */
[data-design=minimal] body.classic-home { font: 400 16px/1.65 var(--sans); }
/* The staged entrance below runs from a deferred script. Hold its elements hidden from the very first paint so the page
   doesn't flash fully drawn, vanish, and fade back in. The hold ends on its own if the script never runs. */
@media (prefers-reduced-motion: no-preference) {
  html.home-entering .classic-home :is(.profile-img, h1, .social-links, .header + p span, .classic-section h2, .classic-section li, .site-footer) { animation: entrance-hold 2s step-end both; }
}
@keyframes entrance-hold { from { opacity: 0; } to { opacity: 1; } }
.classic-home .header { margin: 0; display: flex; flex-direction: column; }
.classic-home .profile-img { display: block; width: 100px; height: 100px; object-fit: cover; border-radius: 6px; margin: 0 0 18px; transition: transform 300ms ease; }
@media (hover:hover) { .classic-home .profile-img:hover { transform: rotate(5deg) scale(1.05); } }
.classic-home .name-and-socials { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; }
[data-design=minimal] .classic-home h1 { font: 600 32px/1.25 var(--sans); margin: 0; letter-spacing: -.025em; }
.classic-home .social-links { display: flex; align-items: center; gap: 13px; flex-shrink: 0; }
.classic-home .social-icon { display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; background: transparent; width: 24px; height: 32px; color: var(--muted); cursor: pointer; }
.classic-home .social-icon svg { width: 18px; height: 18px; overflow: visible; }
.classic-home .social-icon:hover svg { transform: translateY(-1px); }
.classic-home .social-icon svg { transition: transform 250ms var(--ease); }
.classic-home .sound-wave { transform-origin: 12px 12px; transition: transform 250ms var(--ease), opacity 250ms var(--ease); }
.classic-home [data-pronounce]:hover .sound-wave { transform: translateX(1px); }
.classic-home [data-pronounce].is-playing .sound-wave { animation: speak-wave 650ms ease-in-out infinite alternate; }
.classic-home [data-pronounce].is-playing .sound-wave:last-child { animation-delay: 160ms; }
@keyframes speak-wave { to { opacity: .3; transform: translateX(2px); } }
.classic-home .social-icon:hover { color: var(--text); }
.classic-home .header + p { margin: 0 0 24px; }
.classic-home .header + p span { display: inline-block; }
.classic-home .classic-section { position: relative; margin: 24px 0; padding: 0; border: 0; transition: opacity 350ms ease; }
[data-design=minimal] .classic-home h2 { display: inline-block; position: relative; font: 600 17px/1.5 var(--sans); margin: 0 0 8px; padding: 0 0 3px; letter-spacing: 0; }
.classic-home ul { list-style: none; padding: 0; margin: 0; }
.classic-home li { position: relative; padding-left: 21px; margin: 0 0 5px; }
.classic-home li::before { content: '→'; position: absolute; left: 0; color: var(--link); }
.classic-home .classic-section a { color: var(--link); }
/* Like the original: Now starts bright, other sections come forward as you explore. */
@media (hover:hover) {
  .classic-home.focus-sections .classic-section { opacity: .3; }
  .classic-home.focus-sections .classic-section:first-of-type { opacity: 1; }
  .classic-home.focus-sections:has(.classic-section:not(:first-of-type):is(:hover,:focus-within)) .classic-section:first-of-type { opacity: .3; }
  .classic-home.focus-sections .classic-section:is(:hover,:focus-within) { opacity: 1; }
  [data-design=minimal] .classic-home h2::after { content: ''; display: block; position: absolute; inset: auto 0 0; height: 1px; background: var(--link); transform: scaleX(0); transform-origin: left; transition: transform 300ms ease; }
  .classic-home.focus-sections .classic-section:first-of-type h2::after,
  .classic-home.focus-sections .classic-section:is(:hover,:focus-within) h2::after { transform: scaleX(1); }
  .classic-home.focus-sections:has(.classic-section:not(:first-of-type):is(:hover,:focus-within)) .classic-section:first-of-type h2::after { transform: scaleX(0); }
}
@media (hover:none) {
  .classic-home.focus-sections .classic-section { opacity: .3; }
  .classic-home.focus-sections .classic-section:is(:first-of-type,.in-viewport,:focus-within) { opacity: 1; }
}
@media (max-width: 480px) {
  .classic-home .profile-img { width: 90px; height: 90px; margin-bottom: 17px; }
  [data-design=minimal] .classic-home h1 { font-size: 29px; }
  .classic-home .name-and-socials { gap: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .classic-home.focus-sections .classic-section { opacity: 1 !important; }
  .classic-home .profile-img { transform: none !important; }
}
/* Hover card: a pre-cached preview of where an external link goes. Only for mice; phones never see it. */
.link-peek { position: fixed; left: 0; top: 0; z-index: 30; width: 248px; padding: 6px 6px 8px; background: var(--bg); border: 1px solid var(--border); border-radius: 11px; box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 18px 40px -18px rgba(0,0,0,.35); opacity: 0; transform: translate3d(var(--x, 0), calc(var(--y, 0) + 6px), 0) scale(.97); transform-origin: var(--arrow-x, 50%) 100%; pointer-events: none; visibility: hidden; transition: opacity 160ms var(--ease), transform 220ms var(--ease), visibility 0s linear 220ms; }
.link-peek.is-visible { opacity: 1; visibility: visible; transform: translate3d(var(--x, 0), var(--y, 0), 0) scale(1); transition-delay: 0s; }
.link-peek.is-below { transform-origin: var(--arrow-x, 50%) 0; }
.link-peek.is-below::after { bottom: auto; top: -6px; transform: rotate(-135deg); }
.link-peek::after { content: ''; position: absolute; left: var(--arrow-x, 50%); bottom: -6px; width: 10px; height: 10px; margin-left: -5px; background: var(--bg); border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); transform: rotate(45deg); }
.link-peek img { display: block; width: 100%; height: auto; aspect-ratio: 40 / 21; object-fit: cover; border-radius: 6px; background: var(--wash); }
.link-peek-host { display: flex; align-items: center; gap: 6px; margin: 7px 3px 0; font-size: 11px; line-height: 1.3; color: var(--muted); letter-spacing: .01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.link-peek-host svg { width: 11px; height: 11px; flex: 0 0 auto; color: var(--link); }
[data-theme=dark] .link-peek { box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 18px 40px -14px rgba(0,0,0,.7); }
@media (prefers-reduced-motion: reduce) { .link-peek { transition: opacity 120ms, visibility 0s linear 120ms; transform: translate3d(var(--x, 0), var(--y, 0), 0); } }