/* LocalSchoolSports – shared mockup stylesheet (light editorial sports) */ :root{ --bg:#f5f3ec; --paper:#fff; --ink:#14161b; --ink2:#5a606b; --line:#e3dfd4; --accent:#14161b; /* brand accent – overridable per school (set on ) */ --red:var(--accent); --redD:#000; --amber:#586072; --green:#0a8f5b; --blue:#2b6cb0; --dark:#14161b; --head:'Archivo',sans-serif; --disp:'Anton',sans-serif; --ui:'Archivo',sans-serif; --serif:'Newsreader',Georgia,serif; } *{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--ui);-webkit-font-smoothing:antialiased;overflow-x:hidden} a{color:inherit;text-decoration:none} img{display:block;max-width:100%} .wrap{max-width:1240px;margin:0 auto;padding:0 22px} .disp{font-family:var(--disp);font-weight:400;letter-spacing:.4px;line-height:.92;text-transform:uppercase} ::selection{background:var(--ink);color:#fff} /* utility bar */ .util{background:var(--dark);color:#cfd3da;font-size:11.5px} .util .wrap{display:flex;justify-content:space-between;align-items:center;height:34px;letter-spacing:.3px} .util b{color:#fff;font-weight:700} .crumb a{color:#cfd3da}.crumb b{color:#fff}.crumb span{color:#4b505b;margin:0 7px} .pin{display:inline-flex;align-items:center;gap:6px;color:var(--amber);font-weight:800;cursor:pointer} .util-right{display:flex;gap:18px;align-items:center} .util-right a:hover{color:#fff} /* masthead */ header.mast{position:sticky;top:0;z-index:80;background:rgba(245,243,236,.92);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)} .mast .wrap{display:flex;align-items:center;justify-content:space-between;height:72px;gap:20px} .brand{display:flex;align-items:baseline;font-family:var(--disp);font-size:29px;letter-spacing:.5px;white-space:nowrap} .brand .ca{color:transparent;-webkit-text-stroke:1.1px var(--ink);text-stroke:1.1px var(--ink)}.brand .dot{color:var(--ink)} nav.main{display:flex;gap:23px;font-weight:800;font-size:13.5px;letter-spacing:.4px;text-transform:uppercase} nav.main a{padding:6px 0;position:relative;color:#2a2e36} nav.main a::after{content:"";position:absolute;left:0;bottom:-2px;height:3px;width:0;background:var(--ink);transition:width .25s} nav.main a:hover{color:var(--ink)}nav.main a:hover::after{width:100%} .mast-cta{display:flex;align-items:center;gap:12px} .btn{font-family:var(--ui);font-weight:800;font-size:12.5px;letter-spacing:.6px;text-transform:uppercase;padding:11px 18px;border-radius:2px;cursor:pointer;border:0;display:inline-block} .btn-red{background:var(--ink);color:#fff}.btn-red:hover{background:#000} .btn-ghost{border:1.5px solid var(--ink);color:var(--ink);background:transparent}.btn-ghost:hover{background:var(--ink);color:#fff} .srch{width:42px;height:42px;border:1.5px solid var(--line);border-radius:50%;display:grid;place-items:center;font-size:22px;color:var(--ink);background:var(--paper)} .srch:hover{border-color:var(--ink);color:var(--ink)} .ham{display:none} /* sticky masthead: cream at the very top of the page, the black equivalent once it pins */ header.mast{transition:background .25s ease,border-color .25s ease} .brand,.brand .ca,.brand .dot,nav.main a,nav.main .trig,nav.main .trig i,.srch,.ham{transition:color .2s ease,border-color .2s ease,background .2s ease,-webkit-text-stroke-color .2s ease} header.mast.stuck{background:rgba(20,22,27,.92);border-bottom-color:rgba(255,255,255,.12)} header.mast.stuck .brand{color:#fff} header.mast.stuck .brand .ca{-webkit-text-stroke-color:#fff;text-stroke-color:#fff} header.mast.stuck .brand .dot{color:#fff} header.mast.stuck nav.main a{color:#d7dbe2} header.mast.stuck nav.main a:hover{color:#fff} header.mast.stuck nav.main a::after{background:#fff} header.mast.stuck nav.main .trig{color:#d7dbe2} header.mast.stuck nav.main .trig i{color:#aab0bc} header.mast.stuck nav.main .navitem:hover .trig,header.mast.stuck nav.main .navitem:focus-within .trig{color:#fff} header.mast.stuck .srch{border-color:rgba(255,255,255,.28);color:#fff;background:transparent} header.mast.stuck .srch:hover{border-color:#fff;color:#fff} header.mast.stuck .ham{border-color:#fff;color:#fff} /* the mega-menu flyout follows the masthead into dark, with a subtle recolor fade */ .mega-col h6,nav.main .mega-col a{transition:color .2s ease,border-color .2s ease} header.mast.stuck nav.main .mega{background:rgba(20,22,27,.97);border-top-color:rgba(255,255,255,.10);border-bottom-color:rgba(255,255,255,.10);box-shadow:0 26px 44px rgba(0,0,0,.45)} header.mast.stuck .mega-col h6{color:#aab0bc;border-bottom-color:rgba(255,255,255,.12)} header.mast.stuck nav.main .mega-col a{color:#cfd3da} header.mast.stuck nav.main .mega-col a:hover{color:#fff} /* scores ticker */ .ticker{background:var(--dark);overflow:hidden;position:relative} .ticker .lbl{position:absolute;left:0;top:0;bottom:0;z-index:2;display:flex;align-items:center;gap:8px;background:#262a31;color:#fff;font-weight:900;font-size:12px;letter-spacing:1px;padding:0 16px;text-transform:uppercase} .ticker .lbl .dotlive{width:8px;height:8px;border-radius:50%;background:#fff;animation:blink 1.1s infinite} @keyframes blink{50%{opacity:.25}} .track{display:flex;gap:30px;white-space:nowrap;padding:11px 0 11px 124px;width:max-content;animation:scroll 38s linear infinite} .ticker:hover .track{animation-play-state:paused} @keyframes scroll{to{transform:translateX(-50%)}} .game{position:relative;display:inline-flex;align-items:center;gap:10px;font-size:13px;font-weight:600;color:#e7eaf0;padding-top:13px;padding-bottom:13px} .game::before{content:attr(data-sport);position:absolute;top:0;left:0;right:0;text-align:center;font-size:8.5px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:#7a808c} .game::after{content:attr(data-date);position:absolute;bottom:0;left:0;right:0;text-align:center;font-size:8px;font-weight:700;letter-spacing:.3px;color:#5f6671} .game .s{font-family:var(--disp);font-size:17px;letter-spacing:.5px} .game .win{color:#34d98a}.game .loss{color:#9aa0ad} .game .st{font-size:10px;font-weight:800;letter-spacing:1px;color:var(--amber);border:1px solid rgba(255,255,255,.18);padding:2px 6px;border-radius:2px} .game .st.f{color:#9aa0ad} .sep{color:#4b505b} /* EMPTY AD SLOTS (the demo inventory) */ .ad{position:relative;border:1.5px dashed #cdc7b6;border-radius:8px;background:repeating-linear-gradient(135deg,#efece3,#efece3 11px,#eae6db 11px,#eae6db 22px); display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:var(--ink2);padding:22px;min-height:120px} .ad .flag{font-size:9px;letter-spacing:1.5px;font-weight:800;text-transform:uppercase;color:#a7adb8;margin-bottom:6px} .ad .big{font-family:var(--disp);font-size:30px;color:#c4bfb1;letter-spacing:1px} .ad .yh{font-size:11.5px;color:#9aa0ad;font-weight:700;margin-top:6px} .ad .tier{position:absolute;top:8px;right:8px;font-size:8.5px;font-weight:900;letter-spacing:.5px;color:#fff;padding:3px 7px;border-radius:2px;text-transform:uppercase} .ad .tier.premium{background:var(--red)} .ad .tier.global{background:var(--amber);color:#1a1205} .ad .tier.county{background:var(--green)} .ad .tier.city{background:var(--blue)} .ad.hero{min-height:300px} .ad.lead-rail{min-height:300px} .ad.leaderboard{min-height:96px} .ad.inline{min-height:230px} /* section heading */ .shead{display:flex;align-items:flex-end;justify-content:space-between;margin:40px 0 18px;border-bottom:2px solid var(--ink);padding-bottom:10px} .shead h2{font-family:var(--head);font-weight:900;text-transform:uppercase;letter-spacing:.4px;font-size:25px;margin:0;display:flex;align-items:center;gap:12px} .shead h2 .bar{width:14px;height:26px;background:var(--red);display:inline-block;transform:skewX(-12deg)} .shead a{font-size:12px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:var(--red)} /* story cards */ .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} .card{background:var(--paper);border:1px solid var(--line);border-radius:8px;overflow:hidden;cursor:pointer;transition:.2s;display:flex;flex-direction:column;box-shadow:0 6px 18px rgba(20,22,27,.04)} .card:hover{transform:translateY(-4px);box-shadow:0 16px 34px rgba(20,22,27,.12);border-color:#d8d3c6} .card .ph{position:relative;aspect-ratio:16/10;overflow:hidden} .card .ph img{width:100%;height:100%;object-fit:cover;transition:.4s} .card:hover .ph img{transform:scale(1.06)} .card .ph .t{position:absolute;top:10px;left:10px;font-size:10px;font-weight:900;letter-spacing:1px;text-transform:uppercase;background:#fff;color:var(--red);padding:4px 8px;border-radius:2px} .card .b{padding:14px 16px 16px;display:flex;flex-direction:column;gap:8px;flex:1} .card h3{font-size:18px;font-weight:800;line-height:1.16;margin:0;color:var(--ink)} .card:hover h3{color:var(--red)} .card .m{margin-top:auto;font-size:11.5px;color:var(--ink2);font-weight:600;display:flex;gap:8px;align-items:center} .card .m .sch{color:var(--ink)} /* scoreboard rows */ .board{background:var(--paper);border:1px solid var(--line);border-radius:10px;overflow:hidden;box-shadow:0 8px 22px rgba(20,22,27,.05)} .brow{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:14px;padding:15px 20px;border-bottom:1px solid var(--line)} .brow:last-child{border-bottom:0}.brow:hover{background:#faf8f3} .team{display:flex;align-items:center;gap:12px;font-weight:700} .team.r{justify-content:flex-end;text-align:right} .badge{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-family:var(--disp);font-size:14px;color:#fff;flex:none} .sc{font-family:var(--disp);font-size:26px;letter-spacing:1px;min-width:34px;text-align:center} .sc.w{color:var(--green)}.sc.l{color:#aeb2bb} .mid{display:flex;flex-direction:column;align-items:center;gap:3px} .mid .f{font-size:10px;font-weight:900;letter-spacing:1px;color:var(--ink2)} .mid .sport{font-size:10px;color:#a7adb8} /* footer */ footer{margin-top:54px;border-top:3px solid #fff;background:var(--dark);color:#cfd3da} .foot{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1.25fr;gap:30px;padding:46px 0 30px} .foot .brand{font-size:26px;margin-bottom:12px;color:#fff} .foot .brand .ca{color:transparent;-webkit-text-stroke:1px #fff;text-stroke:1px #fff} .foot p{color:#9aa0ad;font-size:13px;line-height:1.6;max-width:30ch} .foot h5{font-size:12px;letter-spacing:1.2px;text-transform:uppercase;color:#fff;margin:0 0 14px} .foot a{display:block;color:#9aa0ad;font-size:13.5px;padding:5px 0;font-weight:600} .foot a:hover{color:#fff} .advbox{border:1px solid rgba(255,255,255,.12);border-radius:8px;padding:20px;background:#1b1e25} .advbox h4{font-family:var(--disp);font-size:22px;margin:0 0 8px;color:#fff} .advbox p{font-size:12.5px;color:#9aa0ad} .advbox .btn-red{background:#fff;color:var(--ink);border-radius:3px;padding:11px 20px;display:inline-block;text-align:center} .advbox .btn-red:hover{background:#e7e3d8} .copy{border-top:1px solid rgba(255,255,255,.1);padding:18px 0;color:#7a808c;font-size:12px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px} .copy a{color:#7a808c}.copy a:hover{color:var(--amber)} /* reveal */ .rv{opacity:0;transform:translateY(16px);animation:rise .7s cubic-bezier(.2,.7,.2,1) forwards} @keyframes rise{to{opacity:1;transform:none}} .d1{animation-delay:.05s}.d2{animation-delay:.13s}.d3{animation-delay:.22s}.d4{animation-delay:.3s} /* home hero */ .hero{padding:30px 0 6px} .hero-grid{display:grid;grid-template-columns:1fr 320px;gap:26px} .lead{background:var(--paper);border:1px solid var(--line);border-radius:8px;overflow:hidden;box-shadow:0 10px 30px rgba(20,22,27,.06)} .lead .ph{position:relative;aspect-ratio:16/9;overflow:hidden} .lead .ph img{width:100%;height:100%;object-fit:cover} .lead .ph .tag{position:absolute;left:16px;top:16px} .tag{display:inline-flex;align-items:center;gap:7px;font-weight:900;font-size:11.5px;letter-spacing:1.1px;text-transform:uppercase;color:#fff;background:var(--red);padding:6px 11px;border-radius:2px} .tag.live::before{content:"";width:7px;height:7px;border-radius:50%;background:#fff;animation:blink 1.1s infinite} .lead-body{padding:22px 26px 26px} .lead h1{font-family:var(--disp);font-size:clamp(32px,4.4vw,56px);margin:4px 0 12px;max-width:18ch;color:var(--ink)} .lead .meta{color:var(--ink2);font-size:13.5px;font-weight:600} .lead .meta b{color:var(--ink)}.kicker{color:var(--red);font-weight:800} .rail{display:flex;flex-direction:column;gap:16px} .mini{border:1px solid var(--line);border-radius:8px;padding:14px 15px;background:var(--paper);box-shadow:0 6px 18px rgba(20,22,27,.04);cursor:pointer} .mini .tag2{font-size:10px;font-weight:900;letter-spacing:1px;color:var(--red);text-transform:uppercase} .mini h4{margin:7px 0 0;font-size:15px;font-weight:800;line-height:1.18;color:var(--ink)} .mini:hover h4{color:var(--red)} /* last rail ad fills the column so the rail bottom aligns with the feature block (desktop) */ @media(min-width:981px){.rail .ad:last-child{flex:1 1 auto}} /* town band + pills */ .townband{margin:28px 0 4px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#efece3} .townband .wrap{display:flex;align-items:center;gap:20px;padding:15px 22px;flex-wrap:wrap} .townband .h{font-family:var(--disp);font-size:18px;display:flex;align-items:center;gap:9px;white-space:nowrap} .pills{display:flex;gap:8px;flex-wrap:wrap} .pill{font-size:12px;font-weight:700;padding:7px 13px;border:1px solid var(--line);background:var(--paper);border-radius:40px;color:#2a2e36;cursor:pointer;transition:.18s;white-space:nowrap} .pill:hover{background:var(--red);color:#fff;border-color:var(--red)} .pill small{color:#9aa0ad;font-weight:700}.pill:hover small{color:#ffd9d3} /* county/city/school split + lists */ .splits{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:14px} .cty{border:1px solid var(--line);border-radius:10px;padding:20px 22px;background:var(--paper);box-shadow:0 8px 22px rgba(20,22,27,.04)} .cty h3{font-family:var(--head);font-weight:900;text-transform:uppercase;letter-spacing:.3px;font-size:20px;margin:0 0 4px} .cty .sub{font-size:12px;color:var(--ink2);margin-bottom:12px} .cty .li{display:flex;gap:12px;padding:11px 0;border-top:1px solid var(--line);align-items:baseline;cursor:pointer} .cty .li .n{font-family:var(--disp);font-size:18px;color:var(--red);width:26px;flex:none} .cty .li a{font-weight:700;font-size:14.5px;line-height:1.2} .cty .li:hover a{color:var(--red)}.cty .li small{color:var(--ink2);font-weight:600} /* big locale hero (county/city/school) */ .lhero{position:relative;overflow:hidden;border-bottom:1px solid var(--line)} .lhero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.7) brightness(.42);z-index:-2} .lhero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(11,13,18,.4),rgba(11,13,18,.92))} .lhero .wrap{padding:40px 22px 30px} .lhero .loc{font-weight:800;letter-spacing:2px;text-transform:uppercase;color:#cdd3df;font-size:13px} .lhero h1{font-family:var(--disp);font-size:clamp(50px,9vw,104px);margin:6px 0 2px;color:#fff;letter-spacing:1px} .lhero .by{color:#cdd3df;font-weight:600;font-size:14.5px;max-width:62ch} .lhero .stats{display:flex;gap:30px;margin-top:22px;flex-wrap:wrap} .lhero .stat{display:flex;flex-direction:column;gap:2px} .lhero .stat .v{font-family:var(--disp);font-size:30px;color:#fff;line-height:1} .lhero .stat .v .g{color:var(--green)} .lhero .stat .k{font-size:11px;letter-spacing:1px;text-transform:uppercase;color:#aeb4c2;font-weight:700} .lhero .schips{display:flex;gap:8px;margin-top:18px;flex-wrap:wrap} .schip{font-size:12px;font-weight:700;padding:7px 13px;border:1px solid rgba(255,255,255,.18);border-radius:40px;color:#e7eaf0;background:rgba(0,0,0,.3)} .schip b{color:var(--accent);filter:brightness(1.7)} /* 2-col content layout w/ sidebar */ .layout{display:grid;grid-template-columns:1fr 300px;gap:26px;padding:34px 0} .layout aside{display:flex;flex-direction:column;gap:20px} .feat{position:relative;border-radius:6px;overflow:hidden;min-height:300px;display:flex;align-items:flex-end;margin-bottom:20px} .feat img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;filter:saturate(.95)} .feat::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,transparent 35%,rgba(11,13,18,.95))} .feat .b{padding:22px 24px} .feat h3{font-family:var(--disp);font-size:clamp(26px,3.5vw,40px);margin:12px 0 6px;color:#fff;max-width:20ch} .feat .m{color:#cdd3df;font-weight:600;font-size:12.5px} .list .row{display:flex;gap:16px;padding:16px 0;border-bottom:1px solid var(--line);cursor:pointer} .list .row:hover h4{color:var(--red)} .list .row .th{width:128px;height:84px;border-radius:5px;object-fit:cover;flex:none;filter:saturate(.95)} .list .row .tag2{font-size:10px;font-weight:900;letter-spacing:1px;text-transform:uppercase;color:var(--red)} .list .row h4{margin:6px 0 6px;font-size:18px;font-weight:800;line-height:1.18} .list .row .m{font-size:11.5px;color:var(--ink2);font-weight:600} aside .box{border:1px solid var(--line);border-radius:8px;background:var(--paper);overflow:hidden;box-shadow:0 6px 18px rgba(20,22,27,.04)} .box .bh{font-family:var(--head);font-weight:900;text-transform:uppercase;letter-spacing:.4px;font-size:14px;padding:13px 16px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:9px} .box .bh .bar{width:9px;height:18px;background:var(--red);transform:skewX(-12deg)} .sgame{padding:13px 16px;border-bottom:1px solid var(--line)}.sgame:last-child{border-bottom:0} .sgame .d{font-size:10.5px;color:var(--ink2);font-weight:700;letter-spacing:.5px;text-transform:uppercase;margin-bottom:7px} .sgame .r{display:flex;justify-content:space-between;align-items:center;font-weight:700;font-size:14px;padding:2px 0} .sgame .r .sc{font-family:var(--disp);font-size:19px} .sgame .w{color:var(--green)}.sgame .l{color:var(--ink2)}.sgame .up{color:var(--red);font-weight:800;font-size:12px} .stand .srow{display:grid;grid-template-columns:22px 1fr auto auto;gap:10px;align-items:center;padding:10px 16px;border-bottom:1px solid var(--line);font-size:13px} .stand .srow:last-child{border-bottom:0} .stand .srow .pos{font-family:var(--disp);color:var(--red)} .stand .srow.head{color:var(--ink2);font-size:10px;letter-spacing:1px;text-transform:uppercase;font-weight:800} .stand .srow .rec{font-family:var(--disp);font-size:15px} .me{background:rgba(223,47,28,.06)} /* article */ .prog{position:fixed;top:0;left:0;height:3px;width:30%;background:var(--red);z-index:200} .col{max-width:720px;margin:0 auto} .ahead{padding:38px 0 8px} .kick{display:flex;gap:10px;align-items:center;font-weight:900;font-size:11.5px;letter-spacing:1.1px;text-transform:uppercase} .kick .t{background:var(--red);color:#fff;padding:5px 10px;border-radius:2px} .kick .loc{color:var(--ink2)} h1.title{font-family:var(--disp);font-size:clamp(36px,5.4vw,62px);margin:16px 0 14px;letter-spacing:.4px} .deck{font-family:var(--serif);font-size:clamp(18px,2.4vw,23px);line-height:1.45;color:#41464f;font-style:italic;margin:0 0 22px} .byline{display:flex;align-items:center;gap:14px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:14px 0;flex-wrap:wrap} .av{width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,var(--red),var(--amber));display:grid;place-items:center;font-family:var(--disp);color:#fff;font-size:17px;flex:none} .byline .who b{font-weight:800;font-size:14px}.byline .who span{color:var(--ink2);font-size:12.5px} .byline .share{margin-left:auto;display:flex;gap:8px} .sbtn{width:36px;height:36px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;color:#2a2e36;font-weight:800;font-size:13px;cursor:pointer} .sbtn:hover{border-color:var(--red);color:var(--red)} figure{margin:26px 0} .figwrap{position:relative;border-radius:6px;overflow:hidden}.figwrap img{width:100%;height:auto;filter:saturate(.95)} figcaption{color:var(--ink2);font-size:12px;margin-top:8px;font-style:italic}figcaption b{color:#33373f;font-style:normal} .prose{font-family:var(--serif);font-size:19.5px;line-height:1.72;color:#22262d} .prose p{margin:0 0 22px} .prose p.first::first-letter{font-family:var(--disp);float:left;font-size:74px;line-height:.74;padding:6px 12px 0 0;color:var(--red)} .pull{font-family:var(--disp);font-size:30px;line-height:1.12;color:var(--ink);border-left:4px solid var(--red);padding:6px 0 6px 22px;margin:30px 0;text-transform:uppercase} .prose h3{font-family:var(--ui);font-weight:900;font-size:15px;letter-spacing:1px;text-transform:uppercase;color:var(--red);margin:34px 0 6px} .tags{display:flex;gap:8px;flex-wrap:wrap;margin:30px 0} .chip2{font-size:12px;font-weight:700;padding:7px 13px;border:1px solid var(--line);border-radius:40px;color:#2a2e36}.chip2:hover{border-color:var(--red);color:var(--red)} /* simple page (about/advertise) */ .phead{padding:46px 0 10px} .phead .k{font-weight:900;letter-spacing:1.5px;text-transform:uppercase;color:var(--red);font-size:12px} .phead h1{font-family:var(--disp);font-size:clamp(40px,6vw,76px);margin:8px 0 12px} .phead p{font-family:var(--serif);font-size:19px;line-height:1.6;color:#41464f;max-width:62ch} .tiercards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:24px 0} .tcard{border:1px solid var(--line);border-radius:10px;background:var(--paper);padding:20px;box-shadow:0 8px 22px rgba(20,22,27,.05)} .tcard .tn{font-weight:800;font-size:14px;display:flex;align-items:center;gap:8px} .tcard .pr{font-family:var(--disp);font-size:38px;margin:10px 0 2px} .tcard .pr small{font-family:var(--ui);font-size:13px;color:var(--ink2);font-weight:700} .tcard p{font-size:12.5px;color:var(--ink2);margin:8px 0 0;line-height:1.5} @media(max-width:980px){ .hero-grid{grid-template-columns:1fr}.rail{flex-direction:row}.ad.lead-rail{min-height:200px} .layout{grid-template-columns:1fr}.splits{grid-template-columns:1fr}.tiercards{grid-template-columns:1fr 1fr} } @media(max-width:620px){ .lead h1{font-size:30px}.rail{flex-direction:column}.lhero h1{font-size:50px} .list .row .th{width:96px;height:66px}.tiercards{grid-template-columns:1fr} } /* responsive */ @media(max-width:980px){ nav.main,.util-right .hideS{display:none} .ham{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border:1.5px solid var(--ink);border-radius:4px;font-size:20px;color:var(--ink);background:transparent} .grid{grid-template-columns:repeat(2,1fr)} .foot{grid-template-columns:1.4fr 1fr 1.2fr;grid-template-areas:"brand sports adv" "area company adv";gap:28px 30px} .foot>div:nth-child(1){grid-area:brand}.foot>div:nth-child(2){grid-area:sports}.foot>div:nth-child(3){grid-area:area}.foot>div:nth-child(4){grid-area:company}.foot>div:nth-child(5){grid-area:adv} } @media(max-width:620px){ .wrap{padding:0 15px}.brand{font-size:23px} .grid{grid-template-columns:1fr} .foot{grid-template-columns:1fr 1fr;grid-template-areas:"brand brand" "sports area" "company adv";gap:26px 18px} .foot>div:nth-child(1) p{max-width:none} .foot .advbox{padding:15px}.foot .advbox h4{font-size:18px}.foot .advbox .btn-red{width:100%;text-align:center;padding:10px 12px;margin-top:10px} .mast .wrap{height:60px} } /* mobile nav dropdown (toggled by menu.js) */ @media(max-width:980px){ header.mast.open nav.main{display:flex;flex-direction:column;position:absolute;top:100%;left:0;right:0;background:var(--bg);border-bottom:1px solid var(--line);padding:8px 22px 14px;gap:0;box-shadow:0 16px 30px rgba(0,0,0,.12);z-index:95} header.mast.open nav.main a{padding:13px 2px;border-bottom:1px solid var(--line);font-size:15px} header.mast.open nav.main a:last-child{border-bottom:0} header.mast.open nav.main a::after{display:none} } /* ===== responsive QA polish (phone/tablet) ===== */ @media(max-width:620px){ /* locale hero: real phone padding + fluid headline + tidy 2-up stats */ .lhero .wrap{padding:28px 15px 24px} .lhero h1{font-size:clamp(38px,11vw,52px);letter-spacing:.5px} .lhero .by{max-width:none} .lhero .stats{display:grid;grid-template-columns:repeat(2,1fr);gap:14px 18px;margin-top:18px} /* scoreboard rows: stop long team names wrapping into a cramped block */ .brow{gap:8px;padding:13px 12px} .team{gap:8px;font-size:13px;min-width:0} .team span{overflow-wrap:anywhere} .badge{width:28px;height:28px;font-size:12px} .sc{font-size:22px;min-width:26px} /* utility breadcrumb bar wraps instead of clipping the pin */ .util .wrap{height:auto;min-height:34px;padding:6px 15px;flex-wrap:nowrap;align-items:center;gap:12px} .util .crumb{flex:1 1 auto;min-width:0;line-height:1.3} .util-right{flex:none;justify-content:flex-end;gap:10px;flex-wrap:wrap;row-gap:2px} /* empty ad hero not oversized on phone */ .ad.hero{min-height:180px} /* footer legal links: stack and stay tappable */ .copy{flex-direction:column;justify-content:flex-start;gap:8px} .copy a{display:inline-block;padding:3px 0} /* section 'view all' link tap target */ .shead a{display:inline-block;padding:6px 0} } /* ===== mega-menu navigation (shared) ===== */ .mast nav.main{align-self:stretch;align-items:stretch} nav.main>a{display:flex;align-items:center} nav.main .navitem{position:static;display:flex;align-items:center} nav.main .trig{display:flex;align-items:center;gap:6px;height:100%;cursor:pointer;color:#2a2e36;font-weight:800;font-size:13.5px;letter-spacing:.4px;text-transform:uppercase;user-select:none} nav.main .trig i{font-style:normal;font-size:9px;color:var(--ink2);transition:transform .2s} nav.main .navitem:hover .trig,nav.main .navitem:focus-within .trig{color:var(--ink)} nav.main .navitem:hover .trig i,nav.main .navitem:focus-within .trig i{transform:rotate(180deg)} nav.main .mega{position:absolute;left:0;right:0;top:100%;background:var(--bg);border-top:1px solid var(--line);border-bottom:1px solid var(--line);box-shadow:0 26px 44px rgba(20,22,27,.13);opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .22s ease,transform .28s cubic-bezier(.22,1,.36,1),visibility .22s,background .25s ease,border-color .25s ease;z-index:70} nav.main .navitem:hover .mega,nav.main .navitem:focus-within .mega{opacity:1;visibility:visible;transform:none} .mega-in{max-width:1240px;margin:0 auto;padding:26px 22px 32px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px 56px} .mega-col h6{font-family:var(--disp);font-weight:400;font-size:13px;letter-spacing:1.5px;text-transform:uppercase;color:var(--ink2);margin:0 0 6px;padding-bottom:9px;border-bottom:1px solid var(--line)} nav.main .mega-col a{display:block;padding:9px 0;font-size:14.5px;font-weight:700;letter-spacing:0;text-transform:none;color:#2a2e36} nav.main .mega-col a::after{display:none} nav.main .mega-col a:hover{color:var(--ink);padding-left:5px;transition:padding .14s ease,color .14s ease} @media(max-width:980px){ .mast nav.main{align-self:auto;align-items:stretch} nav.main .navitem{display:block} nav.main .trig{padding:13px 2px;border-bottom:1px solid var(--line);justify-content:space-between} nav.main .mega{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;background:transparent;display:none} nav.main .navitem.exp .mega{display:block} nav.main .navitem.exp .trig i{transform:rotate(180deg)} .mega-in{grid-template-columns:1fr;padding:2px 0 6px;gap:0} .mega-col h6{border:0;margin:12px 0 0;padding:0;font-size:11.5px} header.mast.open nav.main .mega-col a{padding:9px 0 9px 14px;border-bottom:0;font-size:14px} }