/* Aspen Atlas, site stylesheet. Direction A: white ground, one serif for display,
   one sans for text, navy as the single accent. Class vocabulary is shared by all
   four languages; the English pages and the translated pages use the same names. */
:root{
  --ink:#111417; --navy:#0e1f3a; --navy-2:#16305a; --mid:#5B6470; --faint:#8A929C;
  --hair:#E4E4E1; --soft:#F6F6F4; --paper:#FFFFFF; --cream:#f5f1e8;
  --serif:"Newsreader","Iowan Old Style",Georgia,serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --maxw:1240px; --pad:clamp(1.25rem,4vw,2.5rem); --measure:62ch;
  --ease:cubic-bezier(.2,.6,.2,1);
  --wipe:cubic-bezier(.55,0,.35,1); /* slow, fast, slow */
}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;font:16px/1.6 var(--sans);color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit;text-decoration:none}img{max-width:100%;display:block}
.container{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}.narrow>*{max-width:820px}
h1,h2,h3,h4{margin:0;font-weight:400;letter-spacing:-.01em}
p{margin:0 0 1.1rem;max-width:var(--measure);color:var(--mid)}p:last-child{margin-bottom:0}
strong,b{font-weight:600;color:var(--ink)}

/* reveal */
html.js [data-reveal]{opacity:0;transform:translateY(14px);transition:opacity .75s var(--ease),transform .75s var(--ease);will-change:opacity,transform}
html.js [data-reveal].in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){html.js [data-reveal]{opacity:1;transform:none;transition:none}}

/* header */
.top{border-bottom:1px solid var(--hair);background:rgba(255,255,255,.92);backdrop-filter:blur(8px);position:sticky;top:0;z-index:20}
.topbar{display:flex;align-items:center;justify-content:space-between;height:72px}
.brand{display:flex;align-items:center;color:var(--ink)}
.brand img{height:40px;width:auto;display:block}
@media (max-width:860px){.brand img{height:32px}}
.topbar-right{display:flex;align-items:center;gap:36px}
.topnav ul{display:flex;gap:32px;list-style:none;margin:0;padding:0;font-size:14px;font-weight:500;color:var(--mid)}
.topnav a{padding:6px 0;position:relative;transition:color .45s var(--wipe)}.topnav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--ink);transform:scaleX(0);transform-origin:left center;transition:transform .45s var(--wipe)}
.topnav a:hover{color:var(--ink)}.topnav a:hover::after,.topnav a[aria-current="page"]::after{transform:scaleX(1)}.topnav a[aria-current="page"]{color:var(--ink)}
/* the current page's underline wipes in on load rather than arriving already drawn, so
   clicking a nav item reads as one continuous motion across the page change instead of
   the hover wipe stopping and the line snapping to full on the page that follows */
@keyframes nav-underline{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.topnav a[aria-current="page"]::after{animation:nav-underline .45s var(--wipe) both}
.langswitch{display:flex;align-items:center;gap:10px;font-size:12px;letter-spacing:.08em;color:var(--faint)}.langswitch .lswitch-label{display:none}
.langswitch ul{display:flex;gap:0;list-style:none;margin:0;padding:0}.langswitch li+li::before{content:"·";margin:0 7px;color:var(--hair)}
.langswitch a{color:var(--faint)}.langswitch a:hover{color:var(--ink)}.langswitch a[aria-current="true"]{color:var(--ink);font-weight:600}
@media (max-width:860px){.topbar{flex-wrap:wrap;height:auto;padding:14px var(--pad) 0}.topbar-right{width:calc(100% + 2*var(--pad));order:3;flex-wrap:nowrap;gap:24px;margin:10px calc(-1*var(--pad)) 0;border-top:1px solid var(--hair);padding:9px var(--pad) 7px;overflow-x:auto;scrollbar-width:none}.topbar-right::-webkit-scrollbar{display:none}.topnav ul{gap:18px;font-size:13px;white-space:nowrap;flex:none}.langswitch{flex:none;margin-left:auto;padding-left:8px}}

/* hero and page heads */
.hero{padding:clamp(72px,10vw,128px) 0 64px}
.eyebrow{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--mid);font-weight:500;margin:0 0 24px;max-width:none}
.hero h1,.page-head h1{font:300 clamp(34px,3.4vw,54px)/1.08 var(--serif);letter-spacing:-.012em;max-width:18ch;margin:0 0 24px}
.hero h1 em,.page-head h1 em{font-style:italic;font-weight:400}
.standfirst,.page-head p:not(.eyebrow){font-size:clamp(17px,1.25vw,19px);line-height:1.5;color:var(--mid);max-width:58ch}
.hero-actions,.btn-row{display:flex;flex-wrap:wrap;gap:16px;margin-top:40px}
.btn{display:inline-block;padding:14px 22px;border:1px solid var(--ink);font-size:14px;font-weight:500;color:var(--ink);background:none;line-height:1.2;position:relative;isolation:isolate;overflow:hidden;transition:color .45s var(--wipe)}
.btn::before{content:"";position:absolute;inset:0;background:var(--ink);transform:scaleX(0);transform-origin:left center;transition:transform .45s var(--wipe);z-index:-1}
.btn:hover{color:#fff}.btn:hover::before{transform:scaleX(1)}
.btn-ink,.hero-actions .btn:first-child{background:var(--ink);color:#fff}
.btn-ink::before,.hero-actions .btn:first-child::before{background:#fff}
.btn-ink:hover,.hero-actions .btn:first-child:hover{color:var(--ink)}
.page-head{padding:clamp(64px,8vw,104px) 0 56px;border-bottom:1px solid var(--hair)}
.page-head h1{font-size:clamp(34px,3.8vw,52px);max-width:22ch}

/* signature strip */
.strip{display:flex;align-items:flex-end;gap:3px;height:64px;margin-top:64px;border-bottom:1px solid var(--hair);padding-bottom:0}
.strip i{flex:1 1 0;display:block;border-radius:1px 1px 0 0}
.striplegend{display:flex;justify-content:space-between;gap:24px;font-size:12px;color:var(--faint);margin-top:12px;letter-spacing:.02em}.striplegend b{color:var(--navy);font-weight:700}

/* proof strip (English home) */
.proof{border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);padding:36px 0}
.proof .container{display:grid;grid-template-columns:repeat(4,1fr);gap:40px}
.proof .n{font:400 44px/1 var(--serif);letter-spacing:-.02em;color:var(--ink)}.proof .l{font-size:13px;color:var(--mid);margin-top:8px;max-width:none}
.proof .src{grid-column:1/-1;font-size:12px;color:var(--faint);margin-top:4px;max-width:none}

/* sections */
section{padding:clamp(64px,8vw,104px) 0}section.tight{padding:48px 0}
.band{background:var(--soft)}
.band-ink{background:var(--navy);color:#fff}.band-ink p{color:#B8C2D3}.band-ink h2,.band-ink h3,.band-ink strong,.band-ink b{color:#fff}
.band-ink .section-label{color:#8FA0BA}.band-ink .btn{border-color:#fff;color:#fff}.band-ink .btn::before{background:#fff}.band-ink .btn:hover{color:var(--navy)}
.section-label{display:block;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--mid);font-weight:500;margin-bottom:22px}
h2.display{font:400 clamp(30px,3.4vw,46px)/1.12 var(--serif);letter-spacing:-.012em;max-width:24ch;margin-bottom:22px}
h2.display+p{font-size:17px}
.cols-2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,88px);align-items:start}
.cols-3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(28px,4vw,56px)}
@media (max-width:860px){.cols-2,.cols-3,.proof .container{grid-template-columns:1fr}}

/* entries */
.entry{padding:24px 0;border-top:1px solid var(--hair)}.cols-3 .entry{border-top:1px solid var(--ink);padding-top:20px}
.band-ink .entry{border-color:rgba(255,255,255,.14)}
.entry h3{font:500 21px/1.3 var(--serif);margin-bottom:10px;display:flex;align-items:baseline;gap:12px}
.entry p{font-size:15px}
.marker{display:inline-block;width:8px;height:8px;background:var(--navy);flex:none;position:relative;top:-2px}.marker.moss{background:var(--mid)}.band-ink .marker{background:#fff}.band-ink .marker.moss{background:#8FA0BA}

/* stats */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.stats.stats-stack{grid-template-columns:1fr;gap:0}
.stat{display:flex;align-items:baseline;gap:20px;padding:18px 0;border-top:1px solid var(--hair)}.stat:last-child{border-bottom:1px solid var(--hair)}
.stat .n{font:400 48px/1 var(--serif);letter-spacing:-.02em;min-width:3.2ch;color:var(--ink)}.stat .l{font-size:14px;color:var(--mid)}

/* pull quotes, notes */
.pull{border-left:2px solid var(--ink);padding:6px 0 6px 24px}.band-ink .pull{border-color:#fff}
.pull q{quotes:none;font:400 clamp(22px,2.2vw,28px)/1.3 var(--serif);color:var(--ink)}.band-ink .pull q{color:#fff}.pull q b{font-weight:500;font-style:italic}
.govern-note{font-size:14.5px;color:var(--mid);padding:18px 22px;background:var(--soft);border-left:2px solid var(--navy);max-width:var(--measure)}
.band .govern-note{background:#fff}.band-ink .govern-note{background:rgba(255,255,255,.06);border-color:#fff;color:#B8C2D3}

/* steps */
.steps{list-style:none;margin:0;padding:0;counter-reset:step}
.steps li{counter-increment:step;display:grid;grid-template-columns:56px 1fr;gap:12px;padding:22px 0;border-top:1px solid var(--hair)}.steps li:last-child{border-bottom:1px solid var(--hair)}
.band-ink .steps li{border-color:rgba(255,255,255,.14)}
.steps li::before{content:counter(step,upper-roman);font:400 14px var(--sans);color:var(--navy);letter-spacing:.06em;padding-top:5px}.band-ink .steps li::before{color:#8FA0BA}
.steps h3{font:500 20px/1.3 var(--serif);margin-bottom:6px;grid-column:2}.steps h3:last-child{margin-bottom:0}.steps p{font-size:15px;grid-column:2}

/* contact */
.contact-block{padding:18px 0;border-top:1px solid var(--hair);display:grid;grid-template-columns:120px 1fr;gap:12px}.contact-block:last-child{border-bottom:1px solid var(--hair)}
.contact-block .k{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--mid);padding-top:4px}.contact-block .v{font-size:16px;color:var(--ink);line-height:1.5}.contact-block .v a{border-bottom:1px solid var(--ink)}

/* policies */
.policy-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0 48px}
.policy-card{display:block;padding:26px 0;border-top:1px solid var(--hair);transition:padding-left .25s var(--ease)}.policy-card:hover{padding-left:8px}
.policy-card h3{font:500 22px/1.25 var(--serif);margin-bottom:8px}.policy-card p{font-size:15px}.policy-card .policy-meta{font-size:13px;font-weight:500;color:var(--navy);margin-top:12px}
.policy-content{padding:clamp(56px,7vw,88px) var(--pad);max-width:860px}
.back-link{font-size:13px;color:var(--mid);display:inline-block;margin-bottom:40px;border-bottom:1px solid transparent}.back-link:hover{color:var(--ink);border-color:var(--ink)}
.policy-header{padding-bottom:28px;border-bottom:1px solid var(--ink);margin-bottom:40px}
.policy-header h1{font:300 clamp(34px,4vw,54px)/1.08 var(--serif);letter-spacing:-.012em;margin-bottom:18px}
.policy-meta-info{display:flex;gap:28px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--mid)}
.policy-body h2{font:500 24px/1.3 var(--serif);margin:40px 0 12px}.policy-body h2:first-child{margin-top:0}.policy-body h3{font:500 19px/1.35 var(--serif);margin:28px 0 8px}
.policy-body p,.policy-body li{font-size:16px;color:var(--mid)}.policy-body ul,.policy-body ol{padding-left:22px;margin:0 0 1.2rem}.policy-body li{margin-bottom:8px}.policy-body li::marker{color:var(--navy)}.policy-body strong{color:var(--ink)}.policy-body a{border-bottom:1px solid var(--ink)}
@media (max-width:860px){.policy-grid{grid-template-columns:1fr}.contact-block{grid-template-columns:1fr;gap:4px}}

/* footer */
.site-foot{border-top:1px solid var(--ink);padding:72px 0 40px;font-size:14px}
.foot-lede{font:400 clamp(24px,2.4vw,32px)/1.25 var(--serif);color:var(--ink);max-width:30ch;margin-bottom:12px}
.site-foot>.container>p{max-width:54ch}
.langs{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin:40px 0;padding:24px 0;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.lang .tag{display:block;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);margin-bottom:6px}.lang .line{font:400 17px/1.4 var(--serif);color:var(--mid)}
.foot-meta{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap}.foot-meta p{margin:0;font-size:13px;color:var(--mid)}
.foot-links{list-style:none;margin:0;padding:0;display:flex;gap:24px;font-size:13px;font-weight:500}.foot-links a{position:relative;padding-bottom:2px}.foot-links a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--ink);transform:scaleX(0);transform-origin:left center;transition:transform .45s var(--wipe)}.foot-links a:hover::after{transform:scaleX(1)}
.certification-badge{display:flex;align-items:center;gap:10px;margin-top:36px;font-size:12px;letter-spacing:.06em;color:var(--mid)}.certification-badge img{width:18px;height:auto}
@media (max-width:860px){.langs{grid-template-columns:1fr}.hero{padding-top:56px}}

/* hero with the section figure */
.hero-split .container{display:grid;grid-template-columns:0.85fr 1.15fr;gap:clamp(32px,5vw,80px);align-items:center}
.hero-split{padding:32px 0 48px;min-height:calc(100vh - 72px);display:flex;align-items:center}
.hero-split .container{width:100%}
.hero-split .hero-actions{margin-top:32px}
.hero-figure{margin:0}.hero-figure figcaption{font-size:12px;color:var(--faint);margin-top:12px;line-height:1.5;max-width:60ch}
.hero-section{display:block;width:100%;height:auto;border:1px solid var(--hair);background:#fff}
.hero-section .ground{fill:var(--soft)}
.hero-section .blk{fill:var(--navy);opacity:0;transition:opacity 1.2s var(--ease) .9s}.hero-section .blk.lo{fill-opacity:.06}.hero-section .blk.med{fill-opacity:.13}.hero-section .blk.hi{fill-opacity:.24}
.hero-section .fault{stroke:var(--mid);stroke-width:1;stroke-dasharray:4 4;opacity:.55}.hero-section .collar{fill:var(--navy)}.hero-section .eoh{fill:var(--navy);fill-opacity:.5}
.hero-section .grid{stroke:var(--navy);stroke-opacity:.07;stroke-width:1}.hero-section .gl{font:400 9px var(--sans);fill:var(--faint)}
html.js .hero-figure.in .blk,html:not(.js) .hero-section .blk{opacity:1}.hero-section .profile{fill:none;stroke:var(--mid);stroke-width:1}
.hero-section .trace{fill:none;stroke:var(--navy);stroke-opacity:.45;stroke-width:1.4;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.6s var(--ease) .2s}
.hero-section .seg{stroke:var(--navy);stroke-width:3.4;stroke-linecap:butt;opacity:0;transition:opacity .8s var(--ease) 1.2s}
.hero-section .seg.med{stroke-opacity:.5}.hero-section .seg.hi{stroke-opacity:1;stroke-width:4.2}
.hero-section .scale line{stroke:var(--ink);stroke-width:1}.hero-section .scale text{font:500 11px var(--sans);fill:var(--mid);letter-spacing:.04em}
html.js .hero-figure.in .trace,html:not(.js) .hero-section .trace{stroke-dashoffset:0}
html.js .hero-figure.in .seg,html:not(.js) .hero-section .seg{opacity:1}
@media (prefers-reduced-motion:reduce){.hero-section .trace{stroke-dashoffset:0;transition:none}.hero-section .seg{opacity:1;transition:none}}
@media (max-width:960px){.hero-split .container{grid-template-columns:1fr}}

/* provenance chain */
.chain{display:grid;grid-template-columns:1fr 40px 1fr 40px 1fr 40px 1fr;align-items:center;gap:0;margin-top:56px}
.chain-node{border:1px solid var(--ink);background:#fff;padding:16px 18px;display:flex;flex-direction:column;gap:4px;min-height:96px}
.chain-node .chain-k{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--mid)}
.chain-node b{font:400 22px/1.15 var(--serif);color:var(--ink)}.chain-node span:last-child{font-size:13px;color:var(--mid)}
.chain-link{width:100%;height:10px;display:block}.chain-link line{stroke:var(--ink);stroke-width:1;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .6s var(--ease)}
html.js .chain-link.in line,html:not(.js) .chain-link line{stroke-dashoffset:0}
.chain-cap{font-size:13px;color:var(--faint);margin-top:14px;max-width:60ch}
@media (max-width:960px){.chain{grid-template-columns:1fr}.chain-link{height:28px;width:10px;margin:0 auto}.chain-link line{x1:5;x2:5;y1:0;y2:10}}

/* the record as a graph */
.kg-figure{margin:0}.kg-figure figcaption{font-size:12px;color:var(--faint);margin-top:10px;line-height:1.5;max-width:56ch}
.kg{display:block;width:100%;height:auto}
.kg .edge{stroke:var(--navy);stroke-opacity:.45;stroke-width:1;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1s var(--ease) .2s}.kg .edge.thin{stroke-opacity:.18}
.kg .elbl{font:500 8.5px var(--sans);fill:var(--faint);letter-spacing:.06em}
.kg .node{opacity:0;transition:opacity .6s var(--ease) .7s}.kg .node circle{fill:#fff;stroke:var(--navy);stroke-width:1.2}
.kg .node.big circle{fill:var(--navy)}.kg .node text{font:500 12px var(--sans);fill:var(--ink)}.kg .node .ns{font-size:10.5px;fill:var(--mid);font-weight:400}
.kg .node.res circle{stroke-opacity:.35;stroke-width:1}.kg .node.res text{font-size:8.5px;fill:var(--mid)}
.kg .node.res.cu circle{fill:var(--navy);stroke-opacity:1}.kg .node.res.cu text{fill:#fff;font-weight:600;font-size:10px}
html.js .kg-figure.in .edge,html:not(.js) .kg .edge{stroke-dashoffset:0}html.js .kg-figure.in .node,html:not(.js) .kg .node{opacity:1}
@media (prefers-reduced-motion:reduce){.kg .edge{stroke-dashoffset:0;transition:none}.kg .node{opacity:1;transition:none}}

/* the record as a timeline */
.tl-figure{margin:56px 0 0}.tl-figure figcaption{font-size:12px;color:var(--faint);margin-top:14px;line-height:1.5;max-width:60ch}
.tl{display:block;width:100%;height:auto}
.tl .axis{stroke:var(--ink);stroke-width:1}.tl .tick{stroke:var(--hair)}.tl .own{fill:var(--navy);fill-opacity:.18}
.tl .lbl{font:500 12px var(--sans);fill:var(--ink)}.tl .yrs{font:400 11px var(--sans);fill:var(--faint)}.tl .n{font:400 11px var(--sans);fill:var(--mid)}
.tl .bar{fill:var(--navy);fill-opacity:.85;transform:scaleY(0);transition:transform .9s var(--ease)}.tl .file{fill:var(--navy);fill-opacity:.4}
html.js .tl-figure.in .bar,html:not(.js) .tl .bar{transform:scaleY(1)}
.tl .bar:nth-child(4n){transition-delay:.15s}.tl .bar:nth-child(4n+1){transition-delay:.3s}.tl .bar:nth-child(4n+2){transition-delay:.45s}
@media (prefers-reduced-motion:reduce){.tl .bar{transform:none;transition:none}}



/* across jurisdictions: heading and intro side by side, three columns below */
.regions-head{align-items:end;margin-bottom:8px}.regions-head p{font-size:16px}
.regions-grid{margin-top:40px}.regions-grid .entry{border-top:1px solid var(--ink);padding-top:20px}

@media (prefers-reduced-motion:reduce){.btn,.btn::before,.topnav a,.topnav a::after,.foot-links a::after{transition:none}.topnav a[aria-current="page"]::after{animation:none}}

/* questions page: a numbered index, one block per question, and the sample and query
   cards inside question 01. The source design's mono labels (question numbers, kickers,
   sub-labels, back-to-top) are set here in the stylesheet's own small-label convention,
   the one .section-label and .eyebrow use; its gold accent is navy, its slate is --mid. */
.qindex{list-style:none;margin:40px 0 0;padding:0;border-top:1px solid var(--hair);max-width:820px}
.qindex li{border-bottom:1px solid var(--hair)}
.qindex a{display:flex;gap:18px;align-items:baseline;padding:17px 2px;line-height:1.4}
.qindex .qtext{font:400 18px/1.4 var(--serif);color:var(--ink);border-bottom:1px solid transparent}
.qindex a:hover .qtext{border-color:var(--ink)}
.qsub,.sample .shead,.query .qlabel,.qindex .qnum,.backtop{font-family:var(--sans);font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase}
.qindex .qnum{color:var(--navy);flex:0 0 34px;padding-top:3px}

.qsec{scroll-margin-top:88px}
.qblock{border-top:2px solid var(--navy);padding-top:26px}
.band-ink .qblock{border-top-color:#fff}
.qblock p{max-width:68ch}
.qblock p.qlede{max-width:56ch}
.qsub{display:block;color:var(--mid);margin:42px 0 10px}
.band-ink .qsub{color:#8FA0BA}
.qlede{font:400 clamp(19px,1.7vw,22px)/1.45 var(--serif);color:var(--ink)}
.band-ink .qlede{color:#fff}

.sample{background:var(--soft);border-left:2px solid var(--navy);padding:24px 26px;margin:28px 0;max-width:820px}
.band .sample{background:#fff}
.sample .shead{display:block;color:var(--mid);margin-bottom:14px}
.sample p{margin:0;font:400 17px/1.75 var(--serif);color:var(--ink);max-width:64ch}
.sample em{font-style:italic;font-weight:500;color:var(--navy)}
.sample .snote{font:400 13px/1.6 var(--sans);color:var(--faint);margin-top:18px}

.query{border:1px solid var(--hair);padding:22px 26px;margin:28px 0;max-width:820px}
.query .qlabel{display:block;color:var(--navy);margin-bottom:12px}
.query q{quotes:"\201C" "\201D";display:block;font:400 clamp(19px,1.8vw,22px)/1.5 var(--serif);color:var(--ink);max-width:56ch}

.whynot h3{font:500 21px/1.3 var(--serif);margin:34px 0 8px}
.whynot h3+p{margin-top:0}

.backtop{display:inline-block;margin-top:38px;color:var(--mid);border-bottom:1px solid transparent}
.backtop:hover{color:var(--ink);border-color:var(--ink)}
.band-ink .backtop{color:#8FA0BA}.band-ink .backtop:hover{color:#fff;border-color:#fff}
@media (max-width:640px){.qindex a{gap:14px}.sample,.query{padding:20px}}