/*
Theme Name: Perri & Varner
Theme URI: https://perri-and-varner.theandrewvarner.chatgpt.site/
Author: Perri & Varner
Description: A one-page modern country duo website.
Version: 1.0.1
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: perri-varner
*/
    :root { color-scheme: dark; font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: #161711; color: #f6f2e9; }
    * { box-sizing: border-box; }
    body { margin: 0; }
    main { min-height: 100svh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .photo { min-height: 100svh; background: #0c0e0a; display: flex; align-items: center; }
    .photo img { display: block; width: 100%; height: auto; }
    .content { display: flex; flex-direction: column; justify-content: center; padding: clamp(2rem, 6vw, 7rem); background: radial-gradient(circle at 100% 0%, #28271d 0%, #161711 48%); }
    .eyebrow { margin: 0 0 1.2rem; font-size: .77rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: #d5b97b; }
    h1 { font-family: Georgia, "Times New Roman", serif; font-size: clamp(3rem, 5.6vw, 6.2rem); font-weight: 400; letter-spacing: -.045em; line-height: .99; margin: 0 0 2.25rem; }
    .rule { width: 4.5rem; height: 2px; background: #c3a265; margin-bottom: 2rem; }
    .bio { max-width: 39rem; }
    .bio p { color: #dbd8ce; font-size: clamp(1rem, 1.18vw, 1.15rem); line-height: 1.75; margin: 0 0 1.15rem; }
    .contact { margin-top: 1.6rem; padding-top: 1.7rem; border-top: 1px solid #4d4a3e; }
    .listen { margin-top: 1.8rem; }
    .stream-links { display: flex; flex-wrap: wrap; gap: .8rem 1.7rem; }
    .stream-links a { display: inline-block; }
    .stream-links img { display: block; width: 150px; height: auto; }
    .contact-label { display: block; font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .19em; color: #d5b97b; margin-bottom: .65rem; }
    a { color: #fff8e8; font-size: clamp(1rem, 1.4vw, 1.2rem); text-decoration: underline; text-decoration-color: #c3a265; text-underline-offset: .36em; overflow-wrap: anywhere; }
    a:hover { color: #e9c986; }
    a:focus-visible { outline: 2px solid #e9c986; outline-offset: 5px; }
    @media (max-width: 850px) { main { display: block; } .photo { min-height: 0; } .content { padding: 3rem clamp(1.5rem, 6vw, 3.5rem) 4rem; } h1 { font-size: clamp(3rem, 11vw, 5.5rem); margin-bottom: 1.6rem; } }
    @media (min-width: 851px) and (max-height: 780px) { .content { padding-top: 3rem; padding-bottom: 3rem; } }