/* roulang page: index */
:root{
            --paper:#f4f0e8;
            --paper-deep:#ebe4d8;
            --white:#fffdf9;
            --ink:#242522;
            --muted:#74736d;
            --line:#d9d1c4;
            --copper:#b96e3f;
            --copper-dark:#82492c;
            --teal:#397878;
            --teal-soft:#e2eeee;
            --warn:#986047;
            --radius:12px;
            --shadow:0 14px 34px rgba(54,43,30,.08);
            --max:1200px;
        }
        *{box-sizing:border-box;margin:0;padding:0}
        html{scroll-behavior:smooth}
        body{
            background:var(--paper);
            color:var(--ink);
            font-family:"Noto Sans SC","Microsoft YaHei",Arial,sans-serif;
            line-height:1.7;
            font-size:15px;
        }
        a{color:inherit;text-decoration:none}
        img{display:block;max-width:100%}
        button,input{font:inherit}
        button{cursor:pointer}
        :focus-visible{outline:3px solid rgba(57,120,120,.42);outline-offset:3px}
        .container{width:min(var(--max),calc(100% - 48px));margin:auto}
        .eyebrow{
            color:var(--copper-dark);font-size:12px;font-weight:800;
            letter-spacing:.16em;text-transform:uppercase;
        }
        .section{padding:92px 0}
        .section-head{display:flex;align-items:end;justify-content:space-between;gap:28px;margin-bottom:32px}
        h1,h2,h3{line-height:1.2;letter-spacing:-.025em}
        h1{font-size:clamp(40px,5vw,70px);max-width:720px}
        h2{font-size:clamp(28px,3.4vw,44px)}
        h3{font-size:20px}
        .lead{color:var(--muted);font-size:17px;max-width:650px}
        .topline{height:4px;background:var(--copper)}
        header{
            background:rgba(255,253,249,.93);border-bottom:1px solid var(--line);
            position:sticky;top:0;z-index:20;backdrop-filter:blur(10px)
        }
        .nav{height:76px;display:flex;align-items:center;gap:34px}
        .brand{display:flex;align-items:center;gap:11px;font-weight:900;line-height:1.15;white-space:nowrap}
        .brand-mark{width:31px;height:31px;border:2px solid var(--copper);display:grid;place-items:center;color:var(--copper-dark);font-family:Georgia,serif;font-weight:bold}
        .brand-text small{display:block;color:var(--muted);font-size:10px;letter-spacing:.1em;margin-top:3px}
        .nav-links{display:flex;align-items:center;gap:25px;margin-left:auto}
        .nav-links a{color:#55544f;position:relative;padding:25px 0;font-size:14px}
        .nav-links a:hover,.nav-links a.active{color:var(--ink)}
        .nav-links a.active:after{content:"";position:absolute;left:0;right:0;bottom:17px;height:3px;background:var(--copper)}
        .nav-actions{display:flex;gap:10px}
        .menu-toggle{display:none;background:none;border:1px solid var(--line);padding:8px 10px;color:var(--ink)}
        .btn{
            display:inline-flex;align-items:center;justify-content:center;gap:8px;
            min-height:44px;padding:0 19px;border:1px solid transparent;border-radius:7px;
            font-weight:700;transition:.2s ease
        }
        .btn-primary{background:var(--copper);color:#fffdf9}
        .btn-primary:hover{background:var(--copper-dark);transform:translateY(-2px)}
        .btn-outline{border-color:#918578;color:var(--ink);background:transparent}
        .btn-outline:hover{border-color:var(--copper);color:var(--copper-dark);transform:translateY(-2px)}
        .btn-small{min-height:36px;padding:0 13px;font-size:13px}
        .hero{position:relative;overflow:hidden;padding:94px 0 84px;background:var(--paper-deep)}
        .hero:before{content:"";position:absolute;inset:0;background-image:linear-gradient(90deg,rgba(244,240,232,.98) 0%,rgba(244,240,232,.84) 47%,rgba(36,37,34,.2)),url('/assets/images/backpic/back-1.webp');background-size:cover;background-position:center;opacity:.86}
        .hero-inner{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:70px;align-items:center}
        .hero-copy .eyebrow{margin-bottom:18px}
        .hero h1{margin-bottom:24px}
        .hero h1 em{font-style:normal;color:var(--copper-dark)}
        .hero-copy p{font-size:18px;color:#5e5a53;max-width:620px;margin-bottom:30px}
        .hero-buttons{display:flex;gap:12px;flex-wrap:wrap}
        .archive-panel{background:rgba(35,37,34,.94);color:#fffdf9;padding:28px;border-left:4px solid var(--copper);box-shadow:var(--shadow)}
        .panel-top{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid rgba(255,255,255,.2);padding-bottom:18px;margin-bottom:20px}
        .panel-top span{font-size:12px;color:#b9cbc8}
        .year{font-family:Georgia,serif;font-size:45px;color:#e3a274;line-height:1}
        .timeline{border-left:1px solid rgba(255,255,255,.28);padding-left:20px;display:grid;gap:22px}
        .timeline-item{position:relative}
        .timeline-item:before{content:"";position:absolute;width:8px;height:8px;background:var(--teal);border-radius:50%;left:-25px;top:9px}
        .timeline-item small{color:#aeb4ad;font-size:12px}
        .timeline-item strong{display:block;margin-top:3px;font-size:17px}
        .score{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;color:#e3a274;font-size:24px;margin-left:8px}
        .status{display:inline-block;font-size:11px;padding:2px 8px;border-radius:20px;background:var(--teal-soft);color:var(--teal);font-weight:700}
        .status.archive{background:#eee7dc;color:#85664d}
        .section-intro{display:grid;grid-template-columns:.8fr 1.2fr;gap:70px;align-items:end}
        .scoreboard{margin-top:38px;border-top:1px solid var(--line)}
        .match-row{display:grid;grid-template-columns:1.1fr 1.6fr .65fr .6fr .7fr;align-items:center;gap:16px;padding:22px 0;border-bottom:1px solid var(--line)}
        .match-row:hover{background:rgba(255,253,249,.55)}
        .match-stage{font-size:12px;color:var(--copper-dark);font-weight:800}
        .teams strong{display:block;font-size:17px}
        .teams span{font-size:13px;color:var(--muted)}
        .match-score{font-family:ui-monospace,monospace;font-size:27px;font-weight:800}
        .match-date{font-size:13px;color:var(--muted)}
        .filter-bar{display:flex;gap:10px;flex-wrap:wrap;margin-top:28px}
        .filter-bar input,.filter-bar select{background:var(--white);border:1px solid var(--line);border-radius:6px;padding:10px 13px;color:var(--ink);min-height:42px}
        .filter-bar input{min-width:220px}
        .index-section{background:var(--white)}
        .index-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:18px}
        .index-card{position:relative;overflow:hidden;border:1px solid var(--line);background:var(--paper);min-height:240px;padding:27px;display:flex;flex-direction:column;justify-content:flex-end}
        .index-card.main{min-height:390px}
        .index-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.4;transition:.3s}
        .index-card:hover img{transform:scale(1.04);opacity:.5}
        .index-card:after{content:"";position:absolute;inset:35% 0 0;background:linear-gradient(transparent,rgba(31,30,26,.87))}
        .index-card-content{position:relative;z-index:1;color:#fff}
        .index-card .eyebrow{color:#e7ad83;margin-bottom:10px}
        .index-card h3{font-size:25px;margin-bottom:8px}
        .index-card p{color:#e6e0d6;font-size:14px}
        .side-cards{display:grid;gap:18px}
        .topic-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:35px}
        .topic{border:1px solid var(--line);background:var(--white);padding:22px;min-height:150px;transition:.2s}
        .topic:hover{border-color:var(--copper);transform:translateY(-3px);box-shadow:var(--shadow)}
        .topic-number{font-family:Georgia,serif;color:var(--copper);font-size:25px}
        .topic h3{margin:15px 0 8px;font-size:17px}
        .topic p{color:var(--muted);font-size:13px}
        .rules{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:start}
        .rule-list{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:25px}
        .rule-item{background:var(--white);border:1px solid var(--line);padding:18px}
        .rule-item b{display:block;margin-bottom:5px}
        .rule-item span{font-size:13px;color:var(--muted)}
        .notice{border:1px solid #cda992;background:#f0e5dc;padding:28px}
        .notice h3{color:var(--warn);margin-bottom:12px}
        .notice p{color:#66534a;font-size:14px}
        .notice-links{display:flex;gap:18px;flex-wrap:wrap;margin-top:18px;color:var(--copper-dark);font-size:13px;font-weight:700}
        .faq-list{max-width:850px;margin:30px auto 0}
        .faq-item{border-top:1px solid var(--line)}
        .faq-item:last-child{border-bottom:1px solid var(--line)}
        .faq-question{width:100%;border:0;background:none;text-align:left;padding:20px 4px;font-weight:800;display:flex;justify-content:space-between;color:var(--ink)}
        .faq-question span{font-size:22px;color:var(--copper);transition:.2s}
        .faq-answer{display:none;padding:0 35px 20px 4px;color:var(--muted);font-size:14px}
        .faq-item.open .faq-answer{display:block}
        .faq-item.open .faq-question span{transform:rotate(45deg)}
        .cta{background:#292b27;color:#fffdf9;padding:55px 0}
        .cta-inner{display:flex;justify-content:space-between;align-items:center;gap:30px}
        .cta h2{max-width:650px}
        .cta p{color:#c9c7be;margin-top:10px}
        footer{background:#20211e;color:#d7d2c8;padding:52px 0 25px}
        .footer-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:35px;padding-bottom:38px;border-bottom:1px solid #45453f}
        footer .brand{color:#fffdf9;margin-bottom:15px}
        footer .brand-text small{color:#aaa9a0}
        footer p,footer a{color:#aaa9a0;font-size:13px}
        footer h3{font-size:15px;color:#fffdf9;margin-bottom:14px}
        .footer-links{display:grid;gap:8px}
        footer a:hover{color:#e3a274}
        .copyright{display:flex;justify-content:space-between;gap:20px;padding-top:20px;font-size:12px;color:#85867e}
        @media(max-width:992px){
            .nav{gap:15px}.nav-links{gap:15px}.nav-actions{display:none}
            .hero-inner,.section-intro,.rules{grid-template-columns:1fr;gap:35px}
            .topic-grid{grid-template-columns:repeat(2,1fr)}
            .footer-grid{grid-template-columns:repeat(2,1fr)}
        }
        @media(max-width:768px){
            .container{width:min(100% - 32px,var(--max))}
            .section{padding:65px 0}.nav{height:66px}
            .brand{font-size:13px}.brand-mark{width:27px;height:27px}
            .menu-toggle{display:block;margin-left:auto}
            .nav-links{display:none;position:absolute;top:66px;left:0;right:0;background:var(--white);border-bottom:1px solid var(--line);padding:15px 20px;flex-direction:column;align-items:flex-start;gap:0}
            .nav-links.show{display:flex}.nav-links a{padding:11px 0;width:100%}.nav-links a.active:after{bottom:5px;right:auto;width:28px}
            .hero{padding:68px 0}.hero h1{font-size:42px}.archive-panel{padding:22px}
            .match-row{grid-template-columns:1fr .8fr .65fr;gap:10px}.match-row .match-date,.match-row .btn{grid-column:auto}
            .match-row .btn{font-size:12px;padding:0 8px}
            .index-grid{grid-template-columns:1fr}.index-card.main{min-height:310px}
            .cta-inner{display:block}.cta .btn{margin-top:22px}
        }
        @media(max-width:520px){
            body{font-size:14px}.hero h1{font-size:35px}.hero-copy p{font-size:16px}
            .hero-buttons .btn{width:100%}.topic-grid,.rule-list,.footer-grid{grid-template-columns:1fr}
            .section-head{display:block}.section-head .lead{margin-top:14px}
            .match-row{grid-template-columns:1fr auto}.match-row .match-stage{grid-column:1/-1}
            .match-row .match-date{grid-column:1}.filter-bar input{min-width:100%;width:100%}
            .copyright{display:block}.copyright span{display:block;margin-top:7px}
        }

/* roulang page: category1 */
:root{
 --paper:#f4f0e8;
 --paper-deep:#ebe4d8;
 --white:#fffdf9;
 --ink:#242522;
 --muted:#74736d;
 --line:#d9d1c4;
 --copper:#b96e3f;
 --copper-dark:#82492c;
 --teal:#397878;
 --teal-soft:#e2eeee;
 --warn:#986047;
 --radius:12px;
 --shadow:0 14px 34px rgba(54,43,30,.08);
 --max:1200px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
 margin:0;background:var(--paper);color:var(--ink);
 font-family:"Noto Sans SC","Microsoft YaHei",Arial,sans-serif;
 line-height:1.7;font-size:15px;
}
h1,h2,h3,p{margin-top:0}
h1,h2,h3{line-height:1.25;letter-spacing:-.025em}
h1{font-size:clamp(38px,5vw,64px);font-weight:900}
h2{font-size:clamp(28px,3.5vw,42px);font-weight:900}
h3{font-size:20px;font-weight:800}
a{color:inherit;text-decoration:none}
a:hover{color:var(--copper-dark)}
img{display:block;max-width:100%}
button,input,select{font:inherit}
button{cursor:pointer}
.container{width:min(var(--max),calc(100% - 48px));margin:auto}
.eyebrow{
 color:var(--copper-dark);font-size:12px;font-weight:800;
 letter-spacing:.16em;text-transform:uppercase
}
.section{padding:88px 0}
.section-head{
 display:flex;align-items:end;justify-content:space-between;
 gap:28px;margin-bottom:30px
}
.section-head p{color:var(--muted);max-width:570px;margin-bottom:0}
.lead{color:var(--muted);font-size:17px;max-width:680px}
header{
 background:rgba(255,253,249,.94);border-bottom:1px solid var(--line);
 position:sticky;top:0;z-index:20;backdrop-filter:blur(10px)
}
.nav{height:76px;display:flex;align-items:center;gap:34px}
.brand{
 display:flex;align-items:center;gap:11px;font-weight:900;
 line-height:1.15;white-space:nowrap
}
.brand-mark{
 width:31px;height:31px;border:2px solid var(--copper);
 display:grid;place-items:center;color:var(--copper-dark);
 font-family:Georgia,serif;font-weight:bold
}
.brand-text small{
 display:block;color:var(--muted);font-size:10px;
 letter-spacing:.1em;margin-top:3px
}
.nav-links{display:flex;align-items:center;gap:25px;margin-left:auto}
.nav-links a{
 color:#55544f;position:relative;padding:25px 0;font-size:14px
}
.nav-links a:hover,.nav-links a.active{color:var(--ink)}
.nav-links a.active:after{
 content:"";position:absolute;left:0;right:0;bottom:17px;
 height:3px;background:var(--copper)
}
.nav-actions{display:flex;gap:10px}
.menu-toggle{
 display:none;background:none;border:1px solid var(--line);
 padding:8px 10px;color:var(--ink);border-radius:6px
}
.btn{
 display:inline-flex;align-items:center;justify-content:center;gap:8px;
 min-height:44px;padding:0 19px;border:1px solid transparent;
 border-radius:7px;font-weight:700;transition:.2s ease
}
.btn-primary{background:var(--copper);color:#fffdf9}
.btn-primary:hover{background:var(--copper-dark);color:#fff;transform:translateY(-2px)}
.btn-outline{border-color:#918578;color:var(--ink);background:transparent}
.btn-outline:hover{
 border-color:var(--copper);color:var(--copper-dark);transform:translateY(-2px)
}
.btn-small{min-height:36px;padding:0 13px;font-size:13px}
.btn:focus-visible,.faq-question:focus-visible,input:focus-visible,select:focus-visible{
 outline:3px solid rgba(57,120,120,.32);outline-offset:3px
}
.page-banner{
 position:relative;overflow:hidden;padding:72px 0 68px;
 background:var(--paper-deep)
}
.page-banner:before{
 content:"";position:absolute;inset:0;
 background-image:linear-gradient(90deg,rgba(244,240,232,.97),rgba(244,240,232,.76)),
 url('/assets/images/backpic/back-2.webp');
 background-size:cover;background-position:center;opacity:.92
}
.banner-inner{position:relative}
.breadcrumb{
 display:flex;flex-wrap:wrap;gap:9px;color:var(--muted);
 font-size:13px;margin-bottom:25px
}
.breadcrumb span{color:#aaa196}
.banner-inner h1{max-width:780px;margin-bottom:20px}
.banner-inner .lead{max-width:770px}
.banner-stamp{
 display:inline-flex;align-items:center;gap:9px;margin-top:25px;
 padding:8px 13px;border:1px solid var(--line);background:rgba(255,253,249,.7);
 color:var(--copper-dark);font-size:13px;font-weight:700
}
.banner-stamp i{
 width:8px;height:8px;border-radius:50%;background:var(--teal);
 display:inline-block
}
.toolbar{
 margin-top:36px;padding:18px;background:var(--white);
 border:1px solid var(--line);box-shadow:var(--shadow);
 display:flex;align-items:end;gap:13px;flex-wrap:wrap
}
.field{display:flex;flex-direction:column;gap:5px}
.field label{font-size:12px;color:var(--muted);font-weight:700}
.filter-bar input,.filter-bar select,.toolbar input,.toolbar select{
 background:var(--white);border:1px solid var(--line);border-radius:6px;
 padding:10px 13px;color:var(--ink);min-height:42px
}
.toolbar input{min-width:235px}
.toolbar select{min-width:145px}
.toolbar .btn{min-height:42px}
.archive-layout{
 display:grid;grid-template-columns:285px 1fr;gap:38px;align-items:start
}
.filter-panel{
 background:var(--white);border:1px solid var(--line);padding:24px;
 position:sticky;top:102px
}
.filter-panel h3{font-size:18px;margin-bottom:18px}
.filter-panel p{font-size:13px;color:var(--muted);margin-bottom:20px}
.filter-options{display:grid;gap:9px}
.filter-options label{
 display:flex;align-items:center;gap:9px;padding:10px 11px;
 border:1px solid transparent;color:#55544f;transition:.2s
}
.filter-options label:hover{border-color:var(--line);background:var(--paper)}
.filter-options input{accent-color:var(--copper)}
.filter-note{
 border-top:1px solid var(--line);margin-top:22px;padding-top:18px;
 color:var(--muted);font-size:12px
}
.archive-main{min-width:0}
.archive-summary{
 display:flex;justify-content:space-between;align-items:end;
 gap:18px;margin-bottom:18px
}
.archive-summary h2{font-size:28px;margin:0}
.archive-summary p{color:var(--muted);font-size:13px;margin:0}
.score-table-wrap{
 overflow-x:auto;background:var(--white);border:1px solid var(--line)
}
.score-table{width:100%;min-width:720px;border-collapse:collapse}
.score-table th{
 text-align:left;padding:14px 17px;background:#eee8de;
 color:#71685e;font-size:12px;letter-spacing:.04em;white-space:nowrap
}
.score-table td{
 padding:17px;border-top:1px solid var(--line);vertical-align:middle
}
.score-table tr:hover td{background:#fcfaf5}
.stage{color:var(--copper-dark);font-size:12px;font-weight:800}
.match-title{font-weight:800}
.match-date{font-family:ui-monospace,Consolas,monospace;font-size:13px;color:var(--muted)}
.score{
 font-family:ui-monospace,Consolas,monospace;
 font-size:20px;font-weight:900;letter-spacing:.08em
}
.status{
 display:inline-flex;align-items:center;gap:6px;
 font-size:12px;font-weight:800;white-space:nowrap
}
.status:before{content:"";width:7px;height:7px;border-radius:50%;display:inline-block}
.status-ended{color:var(--teal)}
.status-ended:before{background:var(--teal)}
.status-record{color:var(--copper-dark)}
.status-record:before{background:var(--copper)}
.timeline{
 margin:34px 0 0;padding-left:28px;border-left:1px solid var(--line)
}
.timeline-item{
 position:relative;padding:0 0 28px 22px
}
.timeline-item:last-child{padding-bottom:4px}
.timeline-item:before{
 content:"";position:absolute;width:9px;height:9px;
 background:var(--teal);border:3px solid var(--paper);
 border-radius:50%;left:-33px;top:7px;box-shadow:0 0 0 1px var(--teal)
}
.timeline-item small{color:var(--muted);font-size:12px}
.timeline-item strong{display:block;margin-top:4px;font-size:17px}
.timeline-item p{color:var(--muted);font-size:13px;margin:4px 0 0}
.records{
 margin-top:55px;display:grid;grid-template-columns:1.15fr .85fr;gap:18px
}
.record-feature{
 border:1px solid var(--line);background:var(--paper);
 overflow:hidden;min-height:320px;position:relative
}
.record-feature img{width:100%;height:180px;object-fit:cover;filter:saturate(.75)}
.record-feature-content{padding:22px}
.record-feature h3{margin:7px 0 9px}
.record-feature p{color:var(--muted);font-size:14px;margin-bottom:14px}
.record-side{display:grid;gap:18px}
.record-mini{
 border:1px solid var(--line);background:var(--white);
 padding:21px;display:flex;flex-direction:column;justify-content:center
}
.record-mini h3{font-size:18px;margin:8px 0}
.record-mini p{color:var(--muted);font-size:13px;margin:0}
.tag{
 display:inline-flex;padding:4px 8px;background:var(--teal-soft);
 color:var(--teal);font-size:11px;font-weight:800
}
.tag.copper{background:#f1dfd2;color:var(--copper-dark)}
.info-strip{
 margin-top:58px;background:var(--teal-soft);border:1px solid #c5dada;
 padding:25px 28px;display:flex;justify-content:space-between;
 align-items:center;gap:25px
}
.info-strip strong{font-size:18px}
.info-strip p{margin:5px 0 0;color:#587171;font-size:14px}
.faq-list{max-width:850px;margin:30px auto 0}
.faq-item{border-top:1px solid var(--line)}
.faq-item:last-child{border-bottom:1px solid var(--line)}
.faq-question{
 width:100%;border:0;background:none;text-align:left;padding:20px 4px;
 font-weight:800;display:flex;justify-content:space-between;color:var(--ink)
}
.faq-question span{font-size:22px;color:var(--copper);transition:.2s}
.faq-answer{display:none;padding:0 35px 20px 4px;color:var(--muted);font-size:14px}
.faq-item.open .faq-answer{display:block}
.faq-item.open .faq-question span{transform:rotate(45deg)}
.cta{background:#292b27;color:#fffdf9;padding:55px 0}
.cta-inner{display:flex;justify-content:space-between;align-items:center;gap:30px}
.cta h2{max-width:650px;margin-bottom:0}
.cta p{color:#c9c7be;margin:10px 0 0;max-width:680px}
footer{background:#20211e;color:#d7d2c8;padding:52px 0 25px}
.footer-grid{
 display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:35px;
 padding-bottom:38px;border-bottom:1px solid #46453f
}
footer .brand{color:#f5f0e6}
footer .brand-text small{color:#a8a59c}
footer p{color:#aaa79e;font-size:13px;margin-top:18px}
footer h3{font-size:14px;color:#f1ece3;margin-bottom:15px}
.footer-links{display:grid;gap:8px}
.footer-links a{color:#aaa79e;font-size:13px}
.footer-links a:hover{color:#e4a276}
.copyright{
 display:flex;justify-content:space-between;gap:18px;
 padding-top:21px;color:#88867f;font-size:12px;flex-wrap:wrap
}
.empty-state{
 text-align:center;padding:30px;border:1px dashed var(--line);
 color:var(--muted);margin-top:18px;background:rgba(255,253,249,.45)
}
@media(max-width:1200px){
 .nav{gap:20px}.nav-links{gap:16px}
 .archive-layout{grid-template-columns:250px 1fr}
}
@media(max-width:992px){
 .nav-actions{display:none}
 .hero-inner{grid-template-columns:1fr;gap:35px}
 .archive-layout{grid-template-columns:1fr}
 .filter-panel{position:static}
 .filter-options{display:flex;flex-wrap:wrap}
 .filter-options label{flex:1 1 135px}
 .records{grid-template-columns:1fr}
 .footer-grid{grid-template-columns:1.3fr 1fr 1fr}
 .footer-grid>div:last-child{grid-column:2}
}
@media(max-width:768px){
 .container{width:min(var(--max),calc(100% - 32px))}
 .nav{height:68px}
 .brand{font-size:14px}
 .nav-links{
  display:none;position:absolute;top:68px;left:16px;right:16px;
  background:var(--white);border:1px solid var(--line);
  padding:8px 18px;box-shadow:var(--shadow);flex-direction:column;
  align-items:stretch;gap:0
 }
 .nav-links.show{display:flex}
 .nav-links a{padding:12px 0;border-bottom:1px solid var(--line)}
 .nav-links a:last-child{border-bottom:0}
 .nav-links a.active:after{bottom:0;left:auto;width:35px}
 .menu-toggle{display:block;margin-left:auto}
 .section{padding:62px 0}
 .page-banner{padding:52px 0}
 .toolbar{align-items:stretch}
 .field{flex:1 1 170px}
 .toolbar input,.toolbar select{width:100%;min-width:0}
 .toolbar .btn{width:100%}
 .archive-summary{align-items:start;flex-direction:column}
 .score-table td{padding:14px}
 .info-strip{align-items:flex-start;flex-direction:column}
 .cta-inner{align-items:flex-start;flex-direction:column}
 .footer-grid{grid-template-columns:1fr 1fr}
 .footer-grid>div:last-child{grid-column:auto}
}
@media(max-width:576px){
 h1{font-size:36px}
 h2{font-size:29px}
 .brand-text{max-width:205px;overflow:hidden;text-overflow:ellipsis}
 .hero{padding:62px 0}
 .hero-copy p{font-size:16px}
 .hero-buttons .btn{width:100%}
 .banner-inner h1{font-size:35px}
 .records{margin-top:38px}
 .record-feature-content,.record-mini{padding:18px}
 .footer-grid{grid-template-columns:1fr;gap:25px}
 .copyright{display:block}
 .copyright span{display:block;margin-bottom:7px}
}