/*
Theme Name: Off Leash Time
Theme URI: https://offleashtime.com/
Author: Brent Ducharme
Description: Custom one-page theme for Off Leash Time with Jeff & Brent.
Version: 1.0.2
Text Domain: off-leash-time
*/

:root{--red:#dd3432;--ink:#101014;--blue:#4fc7f3}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ink);color:#fff;font-family:Inter,Arial,sans-serif;overflow-x:hidden}
a{color:inherit;text-decoration:none}
.site-bar{min-height:94px;padding:8px 28px;background:#000;display:flex;align-items:center;justify-content:center;position:relative;border-bottom:1px solid rgba(255,255,255,.16)}
.site-bar-platforms{width:min(640px,calc(100vw - 300px));display:grid;grid-template-columns:1.31fr 1.5fr 1fr;gap:10px;align-items:center}
.site-bar-platforms a{display:flex;align-items:center;height:64px;border-radius:9px;transition:background .2s}
.site-bar-platforms a:hover{background:#19191e}
.site-bar-platforms a:focus-visible{outline:3px solid #fff;outline-offset:3px}
.site-bar-platforms img{display:block;width:100%;height:auto}
.talk-button{position:absolute;right:28px;top:50%;transform:translateY(-50%);padding:10px 16px;border:2px solid #fff;border-radius:4px;background:transparent;color:#fff;cursor:pointer;font:800 12px/1 Inter,sans-serif;letter-spacing:.08em;text-transform:uppercase;transition:background .2s,color .2s}
.talk-button:hover{background:#fff;color:#000}
.contact-dialog{width:min(560px,calc(100% - 28px));padding:0;border:1px solid rgba(255,255,255,.24);border-radius:8px;background:#111;color:#fff;box-shadow:0 24px 70px rgba(0,0,0,.65)}
.contact-dialog::backdrop{background:rgba(0,0,0,.78)}
.contact-form{display:grid;gap:11px;padding:38px;position:relative}
.contact-close{position:absolute;right:16px;top:12px;border:0;background:transparent;color:#fff;font:400 32px/1 Arial,sans-serif;cursor:pointer}
.contact-kicker{font:800 13px/1 Inter,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:var(--blue)}
.contact-form h2{margin:3px 0 14px;font:400 48px/.9 Archivo Black,sans-serif;text-transform:uppercase;letter-spacing:-.04em}
.contact-form label{font:700 14px/1.2 Inter,sans-serif}
.contact-form input,.contact-form textarea{width:100%;border:1px solid #555;border-radius:4px;background:#09090b;color:#fff;padding:13px 14px;font:400 16px/1.4 Inter,sans-serif}
.contact-form textarea{resize:vertical}
.contact-form input:focus,.contact-form textarea:focus{outline:3px solid var(--blue);outline-offset:1px;border-color:transparent}
.contact-submit{margin-top:10px;min-height:52px;border:0;border-radius:4px;background:var(--blue);color:#101014;font:800 14px/1 Inter,sans-serif;letter-spacing:.08em;text-transform:uppercase;cursor:pointer}
.shell{width:min(1180px,calc(100% - 40px));margin:auto}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:54px;padding:0 25px;border-radius:4px;font-weight:700;font-size:15px;letter-spacing:.04em;text-transform:uppercase;transition:transform .2s,background .2s}
.btn:hover{transform:translateY(-2px)}
.olt-feature{background:var(--blue);color:var(--ink);padding:46px 0 76px;text-align:center;overflow:hidden}
.warning-title{font:400 clamp(48px,6.3vw,82px)/.9 Archivo Black,sans-serif;text-transform:uppercase;letter-spacing:-.045em;margin:4px auto 20px}
.olt-copy{font:600 clamp(20px,2.1vw,29px)/1.28 Barlow Condensed,sans-serif;max-width:820px;margin:0 auto}
.genre{font:800 14px/1 Inter,sans-serif;text-transform:uppercase;letter-spacing:.13em;margin:22px 0 26px}
.olt-art{display:block;width:min(520px,90vw);height:auto;margin:0 auto 8px}
.olt-actions{display:flex;justify-content:center;gap:14px;flex-wrap:wrap}
.btn-outline{min-width:235px;color:var(--ink);border:2px solid var(--ink);background:transparent;box-shadow:5px 5px 0 rgba(16,16,20,.2)}
.btn-outline:hover{background:#fff}
.photo-grid-section{background:#0c0c10;padding:5px}
.photo-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px;max-width:1800px;margin:auto}
.photo-grid-item{margin:0;aspect-ratio:1/1;overflow:hidden;background:#18181d}
.photo-grid-item img{display:block;width:100%;height:100%;object-fit:cover}
.podcaster-feature{position:relative;aspect-ratio:1903/496;background:#000;overflow:hidden}
.podcaster-art{display:block;width:100%;height:100%;object-fit:contain}
.hotspot{position:absolute;z-index:4;display:block;color:transparent;font-size:0;border-radius:4px;transition:background .2s,transform .2s}
.hotspot:hover{background:rgba(255,255,255,.1);transform:translateY(-2px)}
.hotspot:focus-visible{outline:4px solid #fff;outline-offset:4px;background:rgba(255,255,255,.12)}
.listen-show{left:24%;top:75.6%;width:8.9%;height:14.7%}
.watch-show{left:33.6%;top:77.1%;width:14%;height:12.8%}
.spotify{left:65.7%;top:77.1%;width:10.2%;height:12.8%}
.apple{left:48.5%;top:77.1%;width:16.2%;height:12.8%}
.other-show-intro{background:#000;padding:38px 0 76px;text-align:center}
.other-show-presents{margin-bottom:38px;font:800 28px/1 Inter,sans-serif;letter-spacing:.24em;text-transform:uppercase}
.other-show-label{display:inline-block;border-top:2px solid #fff;border-bottom:2px solid #fff;padding:9px 16px 8px;margin-bottom:22px;font:800 14px/1 Inter,sans-serif;letter-spacing:.16em;text-transform:uppercase}
.other-show-intro h2{font:400 clamp(48px,6.3vw,92px)/.9 Archivo Black,sans-serif;text-transform:uppercase;letter-spacing:-.05em;max-width:1050px;margin:0 auto}
.fdb-feature{background:var(--red);min-height:720px;position:relative;isolation:isolate;overflow:hidden}
.fdb-feature:before{content:"";position:absolute;inset:0;background:linear-gradient(110deg,rgba(0,0,0,.08),transparent 55%);z-index:-1}
.fdb-topbar{height:82px;display:flex;align-items:center;justify-content:flex-end;position:relative;z-index:5}
.fdb-brand{font:700 20px/1 Barlow Condensed,sans-serif;letter-spacing:.09em;text-transform:uppercase}
.fdb-brand span{color:#fff;letter-spacing:.18em;margin-left:10px}
.fdb-nav{display:flex;gap:30px;align-items:center;font:600 14px/1 Inter,sans-serif}
.fdb-nav a{opacity:.8;transition:opacity .2s,transform .2s}
.fdb-nav a:hover{opacity:1;transform:translateY(-2px)}
.guest-link{border:1px solid rgba(255,255,255,.4);padding:12px 17px;border-radius:999px}
.fdb-grid{display:grid;grid-template-columns:.92fr 1.08fr;align-items:center;min-height:638px;gap:38px}
.art-wrap{height:620px;display:flex;align-items:center;justify-content:center;position:relative}
.art-wrap:before{content:"";position:absolute;width:510px;height:510px;background:linear-gradient(13deg,transparent 48%,rgba(16,16,20,.48) 49% 50%,transparent 51%) 4% 13%/118px 17px no-repeat,linear-gradient(-21deg,transparent 47%,rgba(255,255,255,.28) 48% 49%,transparent 50%) 89% 19%/84px 12px no-repeat,linear-gradient(7deg,transparent 46%,rgba(16,16,20,.38) 48% 50%,transparent 52%) 96% 63%/126px 15px no-repeat,linear-gradient(-15deg,transparent 46%,rgba(16,16,20,.46) 48% 49%,transparent 51%) 9% 77%/91px 14px no-repeat,linear-gradient(28deg,transparent 47%,rgba(255,255,255,.22) 48% 50%,transparent 51%) 25% 97%/104px 12px no-repeat,linear-gradient(-8deg,transparent 45%,rgba(16,16,20,.35) 47% 49%,transparent 51%) 73% 3%/70px 11px no-repeat,linear-gradient(19deg,transparent 46%,rgba(16,16,20,.3) 48% 50%,transparent 52%) 2% 43%/76px 10px no-repeat;transform:rotate(-4deg);opacity:.85;z-index:0}
.art-wrap:after{content:"";position:absolute;width:472px;height:472px;border-radius:50%;background:conic-gradient(from 17deg,rgba(255,255,255,.25) 0 5deg,transparent 6deg 37deg,rgba(16,16,20,.42) 38deg 51deg,transparent 52deg 103deg,rgba(255,255,255,.2) 104deg 111deg,transparent 112deg 174deg,rgba(16,16,20,.36) 175deg 194deg,transparent 195deg 258deg,rgba(255,255,255,.18) 259deg 266deg,transparent 267deg 331deg,rgba(16,16,20,.4) 332deg 341deg,transparent 342deg);-webkit-mask:radial-gradient(circle,transparent 0 68%,#000 69% 70%,transparent 71%);mask:radial-gradient(circle,transparent 0 68%,#000 69% 70%,transparent 71%);transform:rotate(9deg);z-index:1}
.fdb-art{display:block;height:400px;max-width:100%;object-fit:contain;position:relative;z-index:2;filter:drop-shadow(0 16px 20px rgba(0,0,0,.26))}
.eyebrow{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:20px;font:700 13px/1 Inter,sans-serif;letter-spacing:.14em;text-transform:uppercase}
.eyebrow:before{content:"";width:38px;height:3px;background:#111}
.jeff-free{padding-left:12px;border-left:1px solid rgba(16,16,20,.45);font-weight:700;white-space:nowrap}
.fdb-feature h2{font:400 clamp(70px,8.2vw,132px)/.78 Archivo Black,sans-serif;text-transform:uppercase;letter-spacing:-.065em;margin:0;max-width:720px}
.fdb-feature h2 span{display:block;color:var(--ink)}
.dek{font:600 clamp(21px,2.2vw,31px)/1.16 Barlow Condensed,sans-serif;max-width:600px;margin:30px 0;color:#17171a}
.actions{display:flex;gap:12px;flex-wrap:wrap}
.btn-dark{background:var(--ink);color:#fff}
.btn-dark:hover{background:#25252b}
.btn-light{background:transparent;color:var(--ink);border:2px solid var(--ink)}
.btn-light:hover{background:#fff}
.platforms{border-bottom:1px solid rgba(255,255,255,.16);background:#0c0c10}
.platform-row{min-height:112px;display:grid;grid-template-columns:1.35fr repeat(3,1fr);align-items:center}
.platform-intro{font:600 18px/1.1 Barlow Condensed,sans-serif;text-transform:uppercase;letter-spacing:.08em;color:#aaa}
.platform{height:112px;display:flex;align-items:center;justify-content:center;border-left:1px solid rgba(255,255,255,.16);font:700 21px/1 Barlow Condensed,sans-serif;transition:background .2s}
.platform:hover{background:#19191e}
.platform b{font-size:26px;margin-right:9px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:840px){.shell{width:min(100% - 28px,650px)}.photo-grid{grid-template-columns:repeat(5,minmax(0,1fr))}.fdb-topbar{height:auto;min-height:70px;gap:18px;flex-wrap:wrap;padding-top:14px;padding-bottom:14px}.fdb-nav{gap:16px}.fdb-grid{grid-template-columns:1fr;min-height:auto;padding:55px 0 0}.fdb-copy{grid-row:1}.fdb-feature h2{font-size:clamp(60px,19vw,105px)}.dek{font-size:24px}.art-wrap{height:390px;margin-top:18px}.art-wrap:before{width:390px;height:390px}.art-wrap:after{width:360px;height:360px}.fdb-art{height:310px;max-width:100%}.platform-row{grid-template-columns:1fr 1fr}.platform-intro{grid-column:1/-1;min-height:70px;display:flex;align-items:center}.platform{border-top:1px solid rgba(255,255,255,.16);border-left:0}.platform:nth-child(3){border-left:1px solid rgba(255,255,255,.16)}.platform:last-child{grid-column:1/-1}}
@media(max-width:480px){.site-bar{padding:10px 12px 62px}.site-bar-platforms{width:94%}.talk-button{right:50%;top:auto;bottom:10px;transform:translateX(50%)}.olt-feature{padding:30px 0 60px}.warning-title{font-size:48px}.olt-copy{font-size:20px}.olt-actions .btn{width:100%}.photo-grid-section{padding:3px}.photo-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:3px}.other-show-intro{padding:30px 0 60px}.other-show-presents{margin-bottom:30px;font-size:24px}.other-show-intro h2{font-size:43px}.fdb-nav{width:100%;justify-content:center;font-size:12px}.fdb-feature h2{font-size:58px}.fdb-grid{padding-top:36px}.art-wrap{height:310px}.art-wrap:before{width:310px;height:310px}.art-wrap:after{width:285px;height:285px}.fdb-art{height:245px}.actions .btn{width:100%}.platform{font-size:18px;height:92px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.btn,.hotspot{transition:none}}