/*
Theme Name: スペミル
Theme URI: https://spemiru.com/
Description: Apple・IT情報メディア「スペミル」。PHPテンプレートとブロックエディターに対応。
Version: 0.2.0
Requires at least: 6.6
Requires PHP: 8.1
Author: スペミル
Author URI: https://spemiru.com/
License: GPL-2.0-or-later
Text Domain: spemiru
*/
:root{
    --ink:#14213a;
    --muted:#53617a;
    --blue:#214edb;
    --line:#dce3ef;
    --paper:#f2f5fa;
    --navy:#101b36;
    --white:#fff;
    color:var(--ink);
    background:#e8edf6;
    font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue","Hiragino Kaku Gothic ProN","Hiragino Sans","Noto Sans JP","Yu Gothic",Meiryo,sans-serif;
    font-size:17px;
    line-height:1.5295;
    font-synthesis:none
}
*,*::before,*::after{
    box-sizing:border-box
}
body{
    margin:0
}
a{
    color:inherit;
    text-decoration:none
}
a:hover{
    text-decoration:underline;
    text-underline-offset:.26em
}
button,select{
    font:inherit;
    color:inherit
}
button,select,a{
    touch-action:manipulation
}
button,select{
    cursor:pointer
}
a:focus-visible,button:focus-visible,select:focus-visible{
    outline:3px solid #557cff;
    outline-offset:3px
}
h1,h2,h3,p{
    margin:0
}
h1,h2,h3{
    line-height:1.2;
    letter-spacing:0;
    font-weight:600
}
img,svg{
    display:block;
    max-width:100%
}
small{
    font-size:.82rem
}
[hidden]{
    display:none!important
}
.defs{
    position:absolute;
    width:0;
    height:0;
    overflow:hidden
}
.site{
    container:site / inline-size;
    background:#fff;
    min-height:100vh;
    margin:auto
}
.site.phone{
    max-width:393px;
    box-shadow:0 0 38px #27395826
}
.wrap{
    width:min(calc(100% - 64px),1200px);
    margin-inline:auto
}
.mast{
    border-bottom:1px solid var(--line);
    background:#fff
}
.mast-in{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
    min-height:75px
}
.brand{
    display:inline-flex;
    align-items:center;
    gap:10px;
    white-space:nowrap;
    font-size:1.7rem;
    line-height:1;
    font-weight:600;
    letter-spacing:-.075em
}
.mast .brand{flex-shrink:0}
.mast .brand-logo{display:block;width:190px;height:auto;max-width:100%;margin:0}
@media(max-width:620px){.mast .brand-logo{width:164px}}
.nav{
    display:flex;
    align-items:center;
    gap:26px;
    white-space:nowrap;
    font-size:.85rem;
    font-weight:600
}
.nav a{
    display:flex;
    align-items:center;
    min-height:44px;
    position:relative
}
.nav a[aria-current]{
    color:var(--blue)
}
.nav a[aria-current]::after{
    content:"";
    position:absolute;
    bottom:3px;
    left:0;
    right:0;
    height:2px;
    background:var(--blue)
}
.edition{
    font:750 .69rem/1.3 ui-monospace,Consolas,monospace;
    letter-spacing:.13em;
    color:var(--muted);
    white-space:nowrap
}
.edition::before{
    content:"";
    display:inline-block;
    width:7px;
    height:7px;
    background:var(--blue);
    border-radius:50%;
    margin-right:8px
}
.section{
    padding-block:35px
}
.paper{
    background:var(--paper);
    border-block:1px solid var(--line)
}
.eyebrow{
    font:800 .72rem/1.35 ui-monospace,Consolas,monospace;
    letter-spacing:.17em;
    color:var(--blue);
    text-transform:uppercase
}
.eyebrow::before{
    content:"";
    display:inline-block;
    width:17px;
    height:2px;
    background:currentColor;
    vertical-align:middle;
    margin-right:8px
}
.sectionhead{
    display:flex;
    align-items:end;
    justify-content:space-between;
    gap:15px;
    margin-bottom:18px
}
.sectionhead h2{
    font-size:1.65rem;
    margin-top:5px
}
.sub{
    color:var(--muted);
    font-size:.86rem
}
.hero{
    display:grid;
    grid-template-columns:minmax(0,1.9fr) minmax(0,1fr);
    gap:22px
}
.feature{
    background:var(--navy);
    color:white;
    border-radius:15px;
    position:relative;
    overflow:hidden;
    min-height:370px;
    display:grid;
    align-items:end;
    isolation:isolate
}
.feature .art{
    position:absolute;
    width:100%;
    height:100%;
    inset:0;
    z-index:-2
}
.feature::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(90deg,#0c1631 0%,#0c1631d9 29%,#0c163125 80%),linear-gradient(0deg,#0c1631 0%,transparent 55%);
    z-index:-1
}
.feature-text{
    padding:32px
}
.feature h2{
    font-size:clamp(1.75rem,3.1cqi,3.3rem);
    margin:12px 0;
    line-height:1.23
}
.feature p{
    color:#e1e8ff;
    font-size:.88rem;
    margin:8px 0 17px
}
.tag{
    display:inline-flex;
    width:fit-content;
    align-items:center;
    border-radius:4px;
    padding:4px 8px;
    background:#e9efff;
    color:#2448bd;
    font-size:.68rem;
    font-weight:600;
    letter-spacing:.07em;
    white-space:nowrap
}
.tag.light{
    background:#3659b3;
    color:white
}
.button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    min-height:44px;
    padding:8px 14px;
    border:1px solid var(--line);
    border-radius:8px;
    background:white;
    font-size:.85rem;
    font-weight:600;
    line-height:1.35
}
.button.primary{
    background:var(--blue);
    color:white;
    border-color:var(--blue)
}
.button:hover{
    text-decoration:none;
    filter:brightness(.95)
}
.link{
    color:var(--blue);
    font-weight:600;
    font-size:.86rem;
    display:inline-flex;
    align-items:center;
    min-height:44px
}
.stack{
    display:grid;
    gap:10px
}
.story{
    display:grid;
    align-items:center;
    grid-template-columns:88px 1fr;
    gap:13px;
    padding:12px;
    border:1px solid var(--line);
    border-radius:11px;
    background:white;
    min-height:96px
}
.story h3{
    margin-top:5px;
    font-size:1.02rem
}
.story .tag{
    padding:2px 6px
}
.thumb{
    background:#edf2ff;
    border-radius:7px;
    width:100%;
    height:auto;
    aspect-ratio:4/3
}
.latest-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:9px
}
.latest-head h2{
    font-size:1.16rem
}
.latest-head small{
    color:var(--muted)
}
.duo{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px
}
.toolcard{
    padding:23px;
    border:1px solid var(--line);
    border-radius:13px;
    background:#fff;
    display:grid;
    grid-template-columns:1fr 100px;
    align-items:center;
    gap:16px
}
.toolcard h3{
    font-size:1.2rem;
    margin:7px 0
}
.toolcard p{
    color:var(--muted);
    font-size:.87rem
}
.toolcard .thumb{
    aspect-ratio:1.15
}
.crumb{
    color:var(--muted);
    font-size:.78rem;
    margin-bottom:18px
}
.crumb a{
    color:var(--blue)
}
.page-head{
    padding-block:28px;
    background:#f4f7ff;
    border-bottom:1px solid var(--line)
}
.page-head h1,.article h1{
    font-size:clamp(1.9rem,4.25cqi,3.35rem);
    margin:8px 0 10px
}
.page-head p:not(.eyebrow){
    color:var(--muted);
    font-size:.9rem
}
.notice{
    background:#edf2ff;
    border:1px solid #d3dfff;
    border-radius:8px;
    color:#2c4180;
    font-size:.83rem;
    padding:10px 13px;
    margin-top:14px
}
.notice strong{
    margin-right:5px
}
.article-layout{
    display:grid;
    grid-template-columns:minmax(0,2.5fr) minmax(0,1fr);
    gap:38px
}
.article>p,.article li{
    line-height:1.9
}
.article .intro{
    font-size:1rem;
    margin:12px 0 17px;
    color:var(--muted)
}
.byline{
    font-size:.81rem;
    color:var(--muted);
    margin:13px 0
}
.article figure{
    margin:20px 0
}
.article figure svg{
    width:100%;
    height:auto;
    aspect-ratio:2.3;
    background:var(--navy);
    border-radius:12px
}
.article figcaption{
    color:var(--muted);
    font-size:.78rem;
    margin-top:5px
}
.article h2{
    font-size:1.45rem;
    margin:26px 0 8px
}
.article ul{
    padding-left:1.3em
}
.toc,.sidecard,.callout{
    border:1px solid var(--line);
    background:#f5f7fc;
    border-radius:10px;
    padding:15px;
    margin:14px 0
}
.toc{
    display:flex;
    flex-wrap:wrap;
    gap:5px 15px;
    font-size:.85rem;
    color:var(--blue)
}
.toc b{
    color:var(--ink)
}
.sidecard h2,.callout h3{
    font-size:1.13rem;
    margin:5px 0
}
.ad{
    min-height:106px;
    background:repeating-linear-gradient(135deg,#f7f9fd,#f7f9fd 8px,#f2f5fa 8px,#f2f5fa 16px);
    border:1px dashed #bdcadf;
    border-radius:10px;
    display:grid;
    place-content:center;
    text-align:center;
    color:#53617a;
    font-size:.78rem;
    margin-top:20px;
    padding:10px
}
.ad b{
    font:800 .7rem/1.5 ui-monospace,Consolas,monospace;
    letter-spacing:.14em
}
.panel{
    border:1px solid var(--line);
    background:white;
    border-radius:12px;
    padding:20px;
    margin-bottom:17px
}
.panel h2{
    font-size:1.28rem;
    margin-bottom:10px
}
.inputs{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:10px
}
.field{
    display:grid;
    gap:4px;
    font-size:.79rem;
    color:var(--muted);
    font-weight:600
}
select{
    width:100%;
    min-height:44px;
    border:1px solid #bdc9df;
    border-radius:7px;
    background:#fff;
    padding:6px 8px;
    font-size:.9rem;
    font-weight:600
}
.tabs{
    display:flex;
    flex-wrap:wrap;
    gap:7px;
    margin:0 0 16px
}
.tabs button{
    min-height:44px;
    padding:6px 12px;
    border:1px solid var(--line);
    border-radius:8px;
    background:white;
    font-size:.85rem;
    font-weight:600
}
.tabs [aria-pressed=true]{
    background:var(--blue);
    border-color:var(--blue);
    color:white
}
.bars{
    display:grid;
    gap:14px
}
.bar-label{
    display:flex;
    justify-content:space-between;
    gap:6px;
    align-items:baseline;
    font-size:.87rem;
    font-weight:600
}
.bar-label strong{
    white-space:nowrap;
    font-variant-numeric:tabular-nums
}
.bar-label small{
    color:var(--muted);
    margin-left:6px
}
.rail{
    background:#e9edf5;
    border-radius:5px;
    height:13px;
    margin-top:4px
}
.fill{
    height:100%;
    border-radius:5px;
    background:var(--blue)
}
.bars>div:nth-child(2) .fill{
    background:#5278e5
}
.bars>div:nth-child(3) .fill{
    background:#7086b8
}
.specs{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));
    gap:10px
}
.spec{
    background:#f1f4fb;
    border-radius:8px;
    padding:12px
}
.spec h3{
    font-size:.95rem
}
.spec p{
    font-size:.82rem;
    color:var(--muted);
    margin-top:5px
}
.method{
    font-size:.81rem;
    color:var(--muted);
    margin-top:15px
}
.filters{
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:8px
}
.filterbottom,.resultshead{
    display:flex;
    gap:10px;
    justify-content:space-between;
    align-items:center
}
.filterbottom{
    margin-top:8px
}
.filterbottom button{
    background:none;
    color:var(--blue);
    border:0;
    padding:5px 0;
    font-weight:600;
    min-height:44px
}
.filterbottom label{
    font-size:.85rem;
    display:flex;
    align-items:center;
    gap:6px;
    min-height:44px;
    cursor:pointer
}
.filterbottom input{
    accent-color:var(--blue);
    width:17px;
    height:17px
}
.resultshead{
    margin:12px 0
}
.resultshead h2{
    font-size:1.3rem
}
.resultshead select{
    width:auto;
    max-width:52%
}
.products{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:13px
}
.product{
    border:1px solid var(--line);
    background:white;
    border-radius:11px;
    padding:13px;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:7px
}
.product .thumb{
    aspect-ratio:2.1
}
.product h3{
    font-size:1.13rem
}
.product p{
    font-size:.82rem;
    color:var(--muted)
}
.product .price{
    font-size:1.35rem;
    color:var(--ink);
    font-weight:600
}
.product .button{
    width:100%;
    margin-top:auto
}
.empty{
    grid-column:1/-1;
    padding:22px;
    background:white;
    border:1px dashed var(--line);
    border-radius:9px;
    color:var(--muted)
}
.foot{
    background:var(--navy);
    color:#e4ebff;
    padding:24px 0;
    margin-top:0
}
.foot-in{
    display:flex;
    justify-content:space-between;
    gap:10px;
    align-items:center
}
.foot .brand{
    font-size:1.2rem
}
.foot small{
    color:#c7d1ee
}
@container site (max-width:800px){
    .edition{
        display:none
    }
    .wrap{
        width:calc(100% - 40px)
    }
    .hero{
        grid-template-columns:1.4fr 1fr;
        gap:14px
    }
    .feature-text{
        padding:23px
    }
    .story{
        grid-template-columns:64px 1fr;
        padding:8px;
        gap:9px
    }
    .article-layout{
        gap:20px
    }
    .products{
        grid-template-columns:repeat(2,minmax(0,1fr))
    }
    .filters{
        grid-template-columns:repeat(3,minmax(0,1fr))
    }
}
@container site (max-width:620px){
    .wrap{
        width:calc(100% - 28px)
    }
    .mast-in{
        display:block;
        padding-top:10px
    }
    .brand{
        font-size:1.45rem
    }
    .nav{
        justify-content:space-between;
        gap:5px;
        font-size:.75rem
    }
    .nav a{
        min-height:44px
    }
    .section{
        padding-block:22px
    }
    .hero,.duo,.article-layout{
        grid-template-columns:1fr;
        gap:17px
    }
    .feature{
        min-height:310px
    }
    .feature-text{
        padding:17px
    }
    .feature::after{
        background:linear-gradient(0deg,#0c1631 0%,#0c1631dc 33%,#0c163122 80%)
    }
    .feature h2{
        font-size:1.7rem;
        margin:8px 0
    }
    .feature p{
        margin:6px 0 11px
    }
    .sectionhead{
        align-items:start
    }
    .toolcard{
        padding:14px;
        grid-template-columns:1fr 73px
    }
    .story{
        grid-template-columns:70px 1fr;
        min-height:75px
    }
    .page-head{
        padding-block:19px
    }
    .page-head h1,.article h1{
        font-size:1.95rem
    }
    .crumb{
        margin-bottom:12px
    }
    .article figure svg{
        aspect-ratio:1.65
    }
    .panel{
        padding:13px
    }
    .inputs{
        grid-template-columns:1fr
    }
    .inputs .field{
        grid-template-columns:4.2rem minmax(0,1fr);
        align-items:center
    }
    .filters{
        grid-template-columns:repeat(2,minmax(0,1fr))
    }
    .products{
        grid-template-columns:1fr
    }
    .product{
        display:grid;
        grid-template-columns:minmax(0,1fr) 100px;
        align-items:start;
        gap:5px 9px
    }
    .product .thumb{
        grid-column:2;
        grid-row:1/4;
        aspect-ratio:1.2
    }
    .product .button{
        grid-column:1/-1
    }
    .product p{
        grid-column:1
    }
    .product .price{
        grid-column:1/-1
    }
    .foot-in{
        align-items:start;
        flex-direction:column
    }
    .sidecard{
        margin:0
    }
    .ad{
        min-height:78px
    }
}
.button:not(.primary){
    color:var(--ink)
}
.toolcard .eyebrow{
    color:var(--blue)
}
.latest-head{
    min-height:21px
}
.latest-head small{
    white-space:nowrap
}
.story p{
    font-size:.75rem;
    color:var(--muted);
    margin-top:4px
}
.mobile-ad{
    display:none
}
@container site (max-width:620px){
    .sectionhead h1{
        font-size:clamp(1.24rem,5.8cqi,1.7rem);
        text-wrap:balance
    }
    .desktop-ad{
        display:none
    }
    .mobile-ad{
        display:grid;
        margin-block:20px
    }
}
@media(max-width:450px){
}
.brand{
    font-size:36px;
    line-height:1.1;
    letter-spacing:-.045em;
    font-weight:600
}
.foot .brand{
    font-size:28px
}
.nav{
    font-size:13px;
    font-weight:400
}
.edition,.eyebrow,.ad b{
    font-family:inherit;
    font-weight:600;
    letter-spacing:.04em
}
.edition{
    font-size:12px
}
.eyebrow{
    font-size:13px;
    line-height:1.5
}
.section{
    padding-block:44px
}
.sectionhead{
    margin-bottom:26px
}
.sectionhead h1{
    font-size:40px;
    line-height:1.25;
    text-wrap:balance
}
.sectionhead h1 span{
    display:inline-block
}
.sectionhead h2{
    font-size:32px;
    line-height:1.25;
    margin-top:8px
}
.feature{
    min-height:410px
}
.feature h2{
    font-size:clamp(32px,3.35cqi,48px);
    line-height:1.2;
    letter-spacing:-.015em;
    margin:16px 0
}
.feature p{
    font-size:17px;
    line-height:1.5295;
    margin:12px 0 22px
}
.tag{
    font-size:12px;
    font-weight:600;
    letter-spacing:0
}
.button,.link{
    font-size:15px;
    font-weight:400;
    line-height:1.47
}
.story{
    padding:15px;
    min-height:109px
}
.story h3{
    font-size:18px;
    line-height:1.45
}
.story p,.latest-head small{
    font-size:12px;
    line-height:1.5
}
.latest-head h2{
    font-size:21px;
    line-height:1.4
}
.toolcard{
    padding:28px
}
.toolcard h3{
    font-size:24px;
    line-height:1.3;
    margin:8px 0 12px
}
.toolcard p,.sub{
    font-size:17px;
    line-height:1.5295
}
.crumb,.byline,.article figcaption,.method{
    font-size:13px;
    line-height:1.6
}
.page-head{
    padding-block:36px
}
.page-head h1,.article h1{
    font-size:48px;
    line-height:1.2;
    letter-spacing:0;
    margin:12px 0 20px;
    text-wrap:balance
}
.page-head p:not(.eyebrow){
    font-size:17px;
    line-height:1.5295
}
.page-head .crumb{
    font-size:13px
}
.notice{
    font-size:14px;
    line-height:1.6;
    padding:12px 16px
}
.article>p,.article li{
    font-size:17px;
    line-height:1.7;
    letter-spacing:0
}
.article .intro{
    font-size:21px;
    line-height:1.57;
    margin:16px 0 24px
}
.article .byline{
    font-size:13px;
    line-height:1.6
}
.article h2{
    font-size:28px;
    line-height:1.35;
    margin:36px 0 16px
}
.article figure{
    margin:28px 0
}
.toc{
    font-size:14px;
    line-height:1.6;
    padding:18px
}
.sidecard h2,.callout h3,.panel h2{
    font-size:21px;
    line-height:1.4
}
.panel{
    padding:24px;
    margin-bottom:20px
}
.panel h2{
    margin-bottom:18px
}
.field{
    font-size:13px;
    font-weight:400;
    line-height:1.5;
    gap:7px
}
select,.tabs button{
    font-size:15px;
    font-weight:400
}
.bar-label{
    font-size:15px;
    font-weight:400;
    line-height:1.5
}
.bar-label strong{
    font-weight:600
}
.bars{
    gap:20px
}
.spec h3{
    font-size:17px;
    line-height:1.5
}
.spec p{
    font-size:14px;
    line-height:1.6
}
.product h3{
    font-size:21px;
    line-height:1.4
}
.product p{
    font-size:14px;
    line-height:1.6
}
.product .price{
    font-size:24px;
    line-height:1.3;
    font-weight:600;
    margin:6px 0
}
.foot small{
    font-size:12px;
    line-height:1.6
}
@container site (max-width:800px){
    .page-head h1,.article h1{
        font-size:40px
    }
    .feature h2{
        font-size:32px
    }
    .story h3{
        font-size:17px
    }
}
@container site (max-width:620px){
    .wrap{
        width:calc(100% - 40px)
    }
    .brand{
        font-size:32px
    }
    .nav{
        font-size:12px;
        font-weight:400
    }
    .section{
        padding-block:30px
    }
    .sectionhead h1{
        font-size:28px;
        line-height:1.3;
        max-width:12em;
        text-wrap:balance
    }
    .sectionhead h2{
        font-size:28px
    }
    .feature{
        min-height:360px
    }
    .feature-text{
        padding:20px
    }
    .feature h2{
        font-size:30px;
        line-height:1.25
    }
    .feature p{
        font-size:17px;
        line-height:1.5295
    }
    .story{
        padding:12px
    }
    .toolcard{
        padding:18px;
        grid-template-columns:1fr 66px
    }
    .toolcard h3{
        font-size:21px
    }
    .toolcard p{
        font-size:15px;
        line-height:1.6
    }
    .page-head{
        padding-block:28px
    }
    .page-head h1,.article h1{
        font-size:32px;
        line-height:1.25;
        letter-spacing:0
    }
    .article .intro{
        font-size:19px;
        line-height:1.6
    }
    .article h2{
        font-size:24px;
        line-height:1.4
    }
    .panel{
        padding:16px
    }
    .panel h2{
        font-size:20px
    }
    .inputs .field{
        grid-template-columns:1fr;
        gap:5px
    }
    .inputs{
        gap:14px
    }
    .bar-label{
        font-size:14px;
        flex-wrap:wrap;
        gap:0 8px
    }
    .product{
        grid-template-columns:minmax(0,1fr) 84px
    }
    .product h3{
        font-size:19px
    }
}
.site{
    display:flex;
    flex-direction:column;
}
.site > main{
    flex:1;
    min-width:0;
}
.feature img.art{
    object-fit:cover;
    object-position:right center;
}
.article figure img{
    width:100%;
    height:auto;
    border-radius:12px;
}
.article-content{
    font-size:17px;
    line-height:1.7;
    overflow-wrap:anywhere;
}
.article-content p{
    margin:1em 0;
}
.article-content h3{
    font-size:23px;
    margin:1.5em 0 .6em;
}
.article-content a, .source-list a{
    color:var(--blue);
    text-decoration:underline;
}
.article-content ul, .article-content ol{
    padding-left:1.5em;
    margin:1em 0;
}
.article-content blockquote{
    margin:1.5em 0;
    padding:1em;
    border-left:3px solid var(--blue);
    background:var(--paper);
}
.article-content table{
    border-collapse:collapse;
    width:100%;
}
.article-content td, .article-content th{
    padding:10px;
    border:1px solid var(--line);
}
.source-list{
    overflow-wrap:anywhere;
}
.story img{
    object-fit:cover;
}
.article-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:20px;
    margin:24px 0;
}
.search-form{
    display:flex;
    gap:8px;
    margin:20px 0;
}
.search-form input{
    font:inherit;
    min-width:0;
    max-width:100%;
    border:1px solid var(--line);
    border-radius:8px;
    padding:8px 12px;
}
.menu{
    list-style:none;
    display:flex;
    gap:22px;
    margin:0;
    padding:0;
    flex-wrap:wrap;
}
.menu li{
    position:relative;
}
.menu .sub-menu{
    display:none;
    position:absolute;
    background:white;
    color:var(--ink);
    min-width:180px;
    z-index:2;
    list-style:none;
    padding:12px;
    box-shadow:0 3px 12px #14213a26;
}
.menu li:hover > .sub-menu, .menu li:focus-within > .sub-menu{
    display:block;
}
.current-menu-item > a{
    color:var(--blue);
}
.nav-links, .pagination{
    display:flex;
    justify-content:space-between;
    gap:14px;
    flex-wrap:wrap;
    margin:24px 0;
}
.page-numbers{
    display:inline-block;
    padding:8px 12px;
    min-height:44px;
    border:1px solid var(--line);
    border-radius:6px;
}
.page-numbers.current{
    background:var(--blue);
    color:white;
}
.screen-reader-text{
    border:0;
    clip-path:inset(50%);
    height:1px;
    margin:-1px;
    overflow:hidden;
    padding:0;
    position:absolute;
    width:1px;
    white-space:nowrap;
}
.skip-link:focus{
    clip-path:none;
    width:auto;
    height:auto;
    padding:12px;
    background:white;
    color:var(--ink);
    z-index:100000;
}
.alignwide{
    max-width:100%;
}
.wp-caption-text{
    font-size:13px;
    color:var(--muted);
}
.sticky{
    border-color:var(--blue);
}
.category-nav{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 24px}
.category-nav a{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 14px;border:1px solid var(--line);border-radius:24px;font-size:14px;background:#fff}
.category-nav a[aria-current]{background:var(--blue);border-color:var(--blue);color:#fff}
.category-nav span{font-size:12px;opacity:.8}
.demo-label{display:inline-block;margin-left:6px;font-size:11px;color:var(--muted)}
.related-reading{margin-top:32px;padding-top:28px;border-top:1px solid var(--line)}
.crumb{overflow-wrap:anywhere}
@container site (max-width:620px){
    .related-reading .sectionhead{align-items:flex-start;flex-direction:column;gap:4px}
    .related-reading .sectionhead h2{font-size:24px;line-height:1.3}
    .related-reading .sectionhead .link{white-space:nowrap}
    .article-grid{
        grid-template-columns:1fr;
    }
    .nav .menu{
        gap:12px;
    }
    .foot .menu{
        gap:12px;
        font-size:13px;
    }
}