/*
Theme Name: American Action Patriot
Theme URI: https://www.americanaction.us/
Author: Susquehanna Technology Solutions
Description: A bold red, white and blue news-magazine theme for American Action: flag stripes, star fields, a big front-page story, sections for every category, a donate banner and WooCommerce shop support.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: aapatriot
Tags: news, blog, two-columns, custom-logo, custom-menu, featured-images, threaded-comments, e-commerce
*/

:root{
  --navy:#0A1F44; --navy2:#13305F; --red:#B22234; --red2:#8E1B29; --white:#FFFFFF; --cream:#FBF8F1;
  --gold:#C9A227; --ink:#16213A; --muted:#5B6478; --line:#E3DED2;
  --head:'Oswald','Arial Narrow',Arial,sans-serif; --serif:'Merriweather',Georgia,'Times New Roman',serif; --body:'Source Sans 3','Segoe UI',Arial,sans-serif;
  --wrap:1240px; --r:6px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--cream);color:var(--ink);font:17px/1.65 var(--body);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto}
a{color:var(--red);text-decoration:none}
a:hover{color:var(--navy);text-decoration:underline}
h1,h2,h3,h4{font-family:var(--head);color:var(--navy);line-height:1.15;letter-spacing:.01em;margin:0 0 .5em}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px}
.screen-reader-text{position:absolute!important;clip:rect(1px,1px,1px,1px);width:1px;height:1px;overflow:hidden}
.skip-link:focus{position:fixed;top:8px;left:8px;z-index:9999;clip:auto;width:auto;height:auto;background:#fff;padding:8px 14px}

/* ---------- flag stripes & stars ---------- */
.stripes{height:10px;background:repeating-linear-gradient(90deg,var(--red) 0 40px,var(--white) 40px 80px)}
.stripes.thin{height:5px}
.stripes-h{background:repeating-linear-gradient(180deg,var(--red) 0 12px,var(--white) 12px 24px)}
.starfield{background-color:var(--navy);background-image:radial-gradient(circle at 50% 50%,rgba(255,255,255,.9) 0 1.4px,transparent 1.6px),radial-gradient(circle at 50% 50%,rgba(255,255,255,.55) 0 1px,transparent 1.2px);background-size:34px 34px,34px 34px;background-position:0 0,17px 17px}
.star{display:inline-block;width:1em;height:1em;background:currentColor;clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);vertical-align:-.1em}
.stars3{color:var(--gold);letter-spacing:.3em;white-space:nowrap}
.rule{display:flex;align-items:center;gap:14px;margin:0 0 22px}
.rule h2{margin:0;font-size:28px;text-transform:uppercase}
.rule::after{content:"";flex:1;height:6px;background:linear-gradient(var(--red) 0 2px,transparent 2px 4px,var(--navy) 4px 6px)}
.rule .star{color:var(--red);font-size:22px}
.rule a.more{font:600 14px var(--head);text-transform:uppercase;letter-spacing:.08em;color:var(--navy);order:3;white-space:nowrap}

/* ---------- top bar ---------- */
.topbar{background:var(--navy);color:#DCE3F2;font:500 14px var(--body)}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:40px;flex-wrap:wrap}
.topbar .date{opacity:.85}
.topbar .motto{font-family:var(--head);text-transform:uppercase;letter-spacing:.14em;color:#fff}
.topbar .motto .star{color:var(--gold)}
.topbar a{color:#fff}

/* ---------- masthead ---------- */
.masthead{background:#fff;position:relative;overflow:hidden;border-bottom:1px solid var(--line)}
.masthead::before{content:"";position:absolute;left:0;top:0;bottom:0;width:min(30vw,340px);opacity:.10;background:inherit}
.masthead .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-top:22px;padding-bottom:22px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:18px;color:inherit}
.brand:hover{text-decoration:none}
.brand .custom-logo{max-height:110px;width:auto}
.brand .seal{width:84px;height:84px;border-radius:50%;flex:none;display:grid;place-items:center;border:4px solid var(--red);box-shadow:0 0 0 4px #fff,0 0 0 7px var(--navy)}
.brand .seal .star{color:#fff;font-size:42px}
.brand .name{font:700 clamp(34px,5.2vw,64px)/.95 var(--head);text-transform:uppercase;color:var(--navy);letter-spacing:.02em}
.brand .name span{color:var(--red)}
.brand .tag{font:italic 400 clamp(15px,1.6vw,19px) var(--serif);color:var(--muted);margin-top:6px}
.header-banner img{display:block;max-height:150px;width:auto;border-radius:var(--r);box-shadow:0 6px 20px rgba(10,31,68,.18)}
.mast-cta{display:flex;gap:10px;align-items:center}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:8px;font:600 15px var(--head);text-transform:uppercase;letter-spacing:.08em;padding:12px 20px;border-radius:var(--r);border:2px solid var(--navy);background:var(--navy);color:#fff;cursor:pointer;transition:transform .15s,background .15s}
.btn:hover{background:var(--navy2);color:#fff;text-decoration:none;transform:translateY(-1px)}
.btn.red{background:var(--red);border-color:var(--red)}
.btn.red:hover{background:var(--red2);border-color:var(--red2)}
.btn.ghost{background:transparent;color:var(--navy)}
.btn.ghost:hover{background:var(--navy);color:#fff}
.btn .star{font-size:14px}

/* ---------- nav ---------- */
.mainnav{background:var(--navy);position:sticky;top:0;z-index:50;box-shadow:0 3px 0 var(--red),0 6px 0 #fff,0 9px 0 var(--red)}
.admin-bar .mainnav{top:32px}
.mainnav .wrap{display:flex;align-items:center;gap:6px;min-height:56px}
.mainnav ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap}
.mainnav li{position:relative}
.mainnav a{display:block;color:#fff;font:500 15px var(--head);text-transform:uppercase;letter-spacing:.06em;padding:16px 12px;white-space:nowrap}
.mainnav a:hover,.mainnav .current-menu-item>a,.mainnav .current-cat>a{color:#fff;text-decoration:none;background:var(--red)}
.mainnav ul ul{display:none;position:absolute;top:100%;left:0;min-width:240px;background:var(--navy2);flex-direction:column;box-shadow:0 10px 24px rgba(0,0,0,.25);border-top:3px solid var(--red)}
.mainnav li:hover>ul,.mainnav li:focus-within>ul{display:flex}
.mainnav ul ul a{font-size:14px;padding:11px 16px;text-transform:none;letter-spacing:.02em}
.nav-toggle{display:none;background:none;border:0;color:#fff;font:600 16px var(--head);text-transform:uppercase;letter-spacing:.1em;padding:14px 4px;cursor:pointer}
.nav-search{margin-left:auto;display:flex}
.nav-search input{border:0;border-radius:var(--r) 0 0 var(--r);padding:9px 12px;width:200px;font:15px var(--body)}
.nav-search button{border:0;background:var(--red);color:#fff;border-radius:0 var(--r) var(--r) 0;padding:0 14px;cursor:pointer;font:600 14px var(--head);text-transform:uppercase}

/* ---------- ticker ---------- */
.ticker{background:#fff;border-bottom:1px solid var(--line)}
.ticker .wrap{display:flex;align-items:center;gap:14px;min-height:46px;overflow:hidden}
.ticker b{flex:none;background:var(--red);color:#fff;font:600 13px var(--head);letter-spacing:.12em;text-transform:uppercase;padding:5px 10px;border-radius:3px}
.ticker .track{display:flex;gap:40px;white-space:nowrap;animation:tick 45s linear infinite}
.ticker:hover .track{animation-play-state:paused}
.ticker .track a{color:var(--navy);font-weight:600}
.ticker .track a::before{content:"★";color:var(--red);margin-right:10px}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- hero ---------- */
.hero{position:relative;color:#fff;overflow:hidden}
.hero .flagbg{position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,31,68,.97) 0 38%,rgba(10,31,68,.55) 70%,rgba(178,34,52,.35)),var(--hero-img,none) center/cover no-repeat;z-index:0}
.hero .flagbg::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(180deg,rgba(178,34,52,.18) 0 34px,rgba(255,255,255,.04) 34px 68px);mix-blend-mode:overlay;animation:wave 9s ease-in-out infinite alternate;transform-origin:left center}
@keyframes wave{from{transform:skewY(-1deg) scaleY(1.04)}to{transform:skewY(1deg) scaleY(1.04)}}
.hero .wrap{position:relative;z-index:1;display:grid;grid-template-columns:1.25fr 1fr;gap:34px;padding-top:56px;padding-bottom:56px;align-items:center}
.hero .kicker{display:inline-flex;gap:8px;align-items:center;background:var(--red);font:600 13px var(--head);letter-spacing:.14em;text-transform:uppercase;padding:6px 12px;border-radius:3px}
.hero h1{color:#fff;font-size:clamp(34px,4.6vw,60px);margin:16px 0 14px;text-shadow:0 2px 18px rgba(0,0,0,.35)}
.hero h1 a{color:#fff}
.hero .dek{font:400 19px/1.6 var(--serif);color:#E6EBF5;max-width:640px}
.hero .meta{color:#C7D1E6;font-size:15px;margin:14px 0 24px}
.hero .shot{border:6px solid #fff;border-radius:var(--r);box-shadow:0 20px 50px rgba(0,0,0,.45),0 0 0 10px rgba(178,34,52,.8);transform:rotate(1.2deg);background:#fff}
.hero .shot img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}

/* ---------- layout ---------- */
.main{padding:44px 0}
.layout{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:40px}
.layout.full{grid-template-columns:1fr}
.section{margin-bottom:48px}

/* ---------- cards ---------- */
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px}
.grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.card{background:#fff;border-radius:var(--r);overflow:hidden;box-shadow:0 1px 2px rgba(10,31,68,.08),0 8px 24px rgba(10,31,68,.06);display:flex;flex-direction:column;transition:transform .18s,box-shadow .18s;border-top:5px solid var(--navy)}
.card:nth-child(3n+2){border-top-color:var(--red)}
.card:nth-child(3n+3){border-top-color:var(--gold)}
.card:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(10,31,68,.14)}
.card .thumb{display:block;aspect-ratio:16/10;background:var(--navy) center/cover;position:relative}
.card .thumb img{width:100%;height:100%;object-fit:cover;display:block}
.card .thumb.noimg{display:grid;place-items:center}
.card .thumb.noimg .star{font-size:46px;color:#fff;opacity:.9}
.card .cat{position:absolute;left:12px;bottom:12px;background:var(--red);color:#fff;font:600 12px var(--head);letter-spacing:.1em;text-transform:uppercase;padding:4px 9px;border-radius:3px}
.card .body{padding:18px 20px 20px;display:flex;flex-direction:column;flex:1}
.card h3{font-size:22px;margin:0 0 8px}
.card h3 a{color:var(--navy)}
.card h3 a:hover{color:var(--red);text-decoration:none}
.card p{margin:0 0 12px;color:var(--muted);font-size:16px}
.card .meta{margin-top:auto;font-size:13px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.list-item{display:grid;grid-template-columns:240px 1fr;gap:22px;background:#fff;border-radius:var(--r);overflow:hidden;box-shadow:0 1px 2px rgba(10,31,68,.08);margin-bottom:22px;border-left:6px solid var(--red)}
.list-item .thumb{aspect-ratio:auto;height:100%;min-height:170px}
.list-item .body{padding:18px 20px 18px 0}

/* ---------- category ribbon ---------- */
.catwall{display:flex;flex-wrap:wrap;gap:10px}
.catwall a{display:inline-flex;align-items:center;gap:8px;background:#fff;border:2px solid var(--navy);color:var(--navy);padding:8px 14px;border-radius:40px;font:600 14px var(--head);text-transform:uppercase;letter-spacing:.06em}
.catwall a:nth-child(3n+2){border-color:var(--red);color:var(--red)}
.catwall a:hover{background:var(--navy);color:#fff;text-decoration:none}
.catwall a:nth-child(3n+2):hover{background:var(--red);color:#fff}
.catwall .n{font-family:var(--body);font-weight:700;font-size:12px;opacity:.7}

/* ---------- donate banner ---------- */
.donate{border-radius:10px;overflow:hidden;display:grid;grid-template-columns:200px 1fr;box-shadow:0 14px 40px rgba(10,31,68,.18);background:#fff;margin:10px 0 48px}
.donate .canton{display:grid;place-items:center}
.donate .canton .star{font-size:84px;color:#fff;filter:drop-shadow(0 4px 10px rgba(0,0,0,.4))}
.donate .msg{padding:30px 34px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;background:linear-gradient(180deg,#fff 0 82%,transparent 82%),repeating-linear-gradient(180deg,var(--red) 0 6px,#fff 6px 12px)}
.donate h2{font-size:clamp(26px,3vw,38px);margin:0 0 6px;text-transform:uppercase}
.donate p{margin:0;color:var(--muted);font:400 18px var(--serif)}

/* ---------- article ---------- */
.article{background:#fff;border-radius:var(--r);box-shadow:0 1px 2px rgba(10,31,68,.08),0 10px 30px rgba(10,31,68,.06);overflow:hidden}
.article .head{padding:34px 40px 10px}
.article .cats a{display:inline-block;background:var(--red);color:#fff;font:600 12px var(--head);letter-spacing:.12em;text-transform:uppercase;padding:4px 10px;border-radius:3px;margin:0 6px 6px 0}
.article .cats a:hover{background:var(--navy);text-decoration:none}
.article h1{font-size:clamp(32px,4vw,50px);margin:10px 0 12px}
.article .byline{color:var(--muted);font-size:15px;display:flex;gap:16px;flex-wrap:wrap;align-items:center;padding-bottom:18px;border-bottom:1px solid var(--line)}
.article .byline img{border-radius:50%;border:2px solid var(--red)}
.article .feature img{display:block;width:100%;max-height:560px;object-fit:cover}
.article .content{padding:28px 40px 36px;font:400 19px/1.8 var(--serif);color:#1d2638}
.article .content>p:first-of-type::first-letter{float:left;font:700 76px/.82 var(--head);color:var(--red);padding:8px 10px 0 0}
.article .content h2,.article .content h3{margin-top:1.6em}
.article .content h2{font-size:30px;border-left:6px solid var(--red);padding-left:14px}
.article .content blockquote{margin:1.6em 0;padding:22px 26px 22px 64px;background:var(--cream);border-left:6px solid var(--navy);position:relative;font-style:italic}
.article .content blockquote::before{content:"★";position:absolute;left:20px;top:16px;font-size:30px;color:var(--red);font-style:normal}
.article .content a{text-decoration:underline;text-decoration-color:rgba(178,34,52,.4);text-underline-offset:3px}
.article .content img{border-radius:var(--r)}
.article .content ul li::marker{color:var(--red)}
.share{display:flex;gap:10px;flex-wrap:wrap;align-items:center;padding:0 40px 30px}
.share b{font:600 14px var(--head);text-transform:uppercase;letter-spacing:.1em;color:var(--navy);margin-right:4px}
.share a{background:var(--navy);color:#fff;font:600 13px var(--head);letter-spacing:.06em;text-transform:uppercase;padding:8px 14px;border-radius:var(--r)}
.share a:nth-child(odd){background:var(--red)}
.share a:hover{opacity:.88;text-decoration:none}
.tags{padding:0 40px 26px}
.tags a{display:inline-block;border:1px solid var(--line);border-radius:30px;padding:3px 12px;font-size:14px;margin:0 6px 6px 0;color:var(--navy)}
.authorbox{display:flex;gap:18px;align-items:center;margin:0 40px 34px;padding:20px;border-radius:var(--r);background:var(--cream);border:1px dashed var(--line)}
.authorbox img{border-radius:50%;border:3px solid var(--navy)}
.postnav{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:26px 0}
.postnav a{display:block;background:#fff;padding:16px 18px;border-radius:var(--r);box-shadow:0 1px 2px rgba(10,31,68,.08);color:var(--navy);font:600 18px var(--head)}
.postnav span{display:block;font:600 12px var(--head);letter-spacing:.12em;text-transform:uppercase;color:var(--red)}
.postnav .next{text-align:right}

/* ---------- archive head ---------- */
.archive-head{color:#fff;padding:46px 0 40px;position:relative}
.archive-head h1{color:#fff;font-size:clamp(32px,4vw,52px);margin:8px 0 6px;text-transform:uppercase}
.archive-head .desc{color:#DCE3F2;font:400 18px var(--serif);max-width:760px}
.archive-head .kicker{font:600 13px var(--head);letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}

/* ---------- sidebar ---------- */
.sidebar .widget{background:#fff;border-radius:var(--r);padding:22px;margin-bottom:26px;box-shadow:0 1px 2px rgba(10,31,68,.08);border-top:5px solid var(--red)}
.sidebar .widget:nth-child(even){border-top-color:var(--navy)}
.sidebar .widget-title,.sidebar h2,.sidebar .wp-block-heading{font-size:20px;text-transform:uppercase;letter-spacing:.06em;margin:0 0 14px;display:flex;gap:8px;align-items:center}
.sidebar .widget-title::before{content:"★";color:var(--red)}
.sidebar ul{list-style:none;margin:0;padding:0}
.sidebar li{padding:8px 0;border-bottom:1px solid var(--line)}
.sidebar li:last-child{border-bottom:0}
.sidebar li a{color:var(--navy);font-weight:600}
.side-donate{color:#fff;text-align:center;padding:28px 22px!important;border-top:0!important}
.side-donate h3{color:#fff;font-size:26px;text-transform:uppercase;margin:6px 0}
.side-donate p{color:#DCE3F2;margin:0 0 16px}
.side-donate .star{color:var(--gold);font-size:30px}
.popular li{display:flex;gap:12px;align-items:center}
.popular .num{flex:none;width:30px;height:30px;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center;font:700 14px var(--head)}
.popular li:nth-child(even) .num{background:var(--red)}

/* ---------- pagination ---------- */
.pagination,.nav-links{display:flex;gap:8px;flex-wrap:wrap;margin:20px 0}
.page-numbers{display:inline-grid;place-items:center;min-width:42px;height:42px;padding:0 12px;border-radius:var(--r);background:#fff;color:var(--navy);font:600 16px var(--head);box-shadow:0 1px 2px rgba(10,31,68,.1)}
.page-numbers.current{background:var(--red);color:#fff}
a.page-numbers:hover{background:var(--navy);color:#fff;text-decoration:none}

/* ---------- forms & comments ---------- */
input[type=text],input[type=email],input[type=url],input[type=search],input[type=password],input[type=tel],input[type=number],textarea,select{width:100%;border:2px solid var(--line);border-radius:var(--r);padding:10px 12px;font:16px var(--body);background:#fff;color:var(--ink)}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--navy);box-shadow:0 0 0 3px rgba(178,34,52,.18)}
button,input[type=submit],.wp-element-button,.button{font:600 15px var(--head);text-transform:uppercase;letter-spacing:.08em;padding:12px 20px;border-radius:var(--r);border:0;background:var(--red);color:#fff;cursor:pointer}
button:hover,input[type=submit]:hover,.button:hover{background:var(--navy);color:#fff}
.comments{background:#fff;border-radius:var(--r);padding:30px 40px;margin-top:26px;box-shadow:0 1px 2px rgba(10,31,68,.08)}
.comment-list{list-style:none;padding:0}
.comment-list .children{list-style:none;padding-left:28px;border-left:3px solid var(--line)}
.comment-body{padding:16px 0;border-bottom:1px solid var(--line)}
.comment-author img{border-radius:50%;vertical-align:middle;margin-right:8px}

/* ---------- footer ---------- */
.site-footer{color:#DCE3F2;margin-top:30px}
.site-footer .pledge{background:var(--red);color:#fff;text-align:center;padding:30px 20px;font:600 clamp(20px,2.4vw,30px)/1.3 var(--head);text-transform:uppercase;letter-spacing:.06em}
.site-footer .pledge small{display:block;font:italic 400 17px var(--serif);text-transform:none;letter-spacing:0;opacity:.9;margin-top:6px}
.site-footer .cols{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:34px;padding:46px 20px}
.site-footer h4{color:#fff;font-size:19px;text-transform:uppercase;letter-spacing:.08em;margin-bottom:14px;padding-bottom:8px;border-bottom:3px solid var(--red);display:inline-block}
.site-footer ul{list-style:none;margin:0;padding:0}
.site-footer li{padding:5px 0}
.site-footer a{color:#fff}
.site-footer .fbrand{font:700 34px/1 var(--head);color:#fff;text-transform:uppercase}
.site-footer .fbrand span{color:#ff6b7d}
.site-footer .bottom{background:#061532;padding:16px 20px;text-align:center;font-size:14px;color:#AFC0DE}
.backtop{position:fixed;right:18px;bottom:18px;width:48px;height:48px;border-radius:50%;background:var(--red);color:#fff;display:grid;place-items:center;box-shadow:0 6px 18px rgba(0,0,0,.25);opacity:0;pointer-events:none;transition:opacity .2s;z-index:60}
.backtop.on{opacity:1;pointer-events:auto}
.backtop:hover{background:var(--navy);color:#fff;text-decoration:none}

/* ---------- WordPress bits ---------- */
.alignleft{float:left;margin:6px 24px 12px 0}
.alignright{float:right;margin:6px 0 12px 24px}
.aligncenter{display:block;margin:12px auto}
.alignwide{margin-left:-40px;margin-right:-40px;max-width:none}
.wp-caption-text,figcaption{font:italic 14px var(--body);color:var(--muted);text-align:center;margin-top:6px}
.sticky .card,.sticky{outline:3px solid var(--gold)}
.page-box{background:#fff;border-radius:var(--r);padding:34px 40px;box-shadow:0 1px 2px rgba(10,31,68,.08)}
.notfound{text-align:center;padding:60px 20px}
.notfound .big{font:700 140px/1 var(--head);color:var(--red)}

/* ---------- WooCommerce ---------- */
.woocommerce ul.products li.product,.woocommerce-page ul.products li.product{background:#fff;border-radius:var(--r);padding:14px;box-shadow:0 1px 2px rgba(10,31,68,.08);border-top:5px solid var(--red);text-align:center}
.woocommerce ul.products li.product .price,.woocommerce div.product p.price{color:var(--red)!important;font:700 20px var(--head)}
.woocommerce a.button,.woocommerce button.button,.woocommerce input.button,.woocommerce #respond input#submit{background:var(--red)!important;color:#fff!important;border-radius:var(--r)!important;font-family:var(--head)!important;text-transform:uppercase;letter-spacing:.06em}
.woocommerce a.button:hover,.woocommerce button.button:hover{background:var(--navy)!important}
.woocommerce .woocommerce-message,.woocommerce .woocommerce-info{border-top-color:var(--navy)}

/* ---------- responsive ---------- */
@media (max-width:1080px){.grid.four{grid-template-columns:repeat(2,minmax(0,1fr))}.site-footer .cols{grid-template-columns:1fr 1fr}}
@media (max-width:960px){.layout{grid-template-columns:1fr}.hero .wrap{grid-template-columns:1fr}.hero .shot{display:none}.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:780px){
  .nav-toggle{display:block}.mainnav .menu-wrap{display:none;width:100%}.mainnav.open .menu-wrap{display:block}
  .mainnav .wrap{flex-wrap:wrap}.mainnav ul{flex-direction:column;width:100%}.mainnav ul ul{position:static;display:flex;box-shadow:none;border:0;padding-left:16px}
  .nav-search{width:100%;margin:0 0 12px}.nav-search input{flex:1;width:auto}
  .header-banner{display:none}.masthead .wrap{justify-content:center;text-align:center}.brand{flex-direction:column}
  .list-item{grid-template-columns:1fr}.list-item .body{padding:0 18px 18px}.list-item .thumb{min-height:200px}
  .donate{grid-template-columns:1fr}.donate .canton{padding:22px}
  .article .head,.article .content,.share,.tags,.comments{padding-left:20px;padding-right:20px}.authorbox{margin:0 20px 26px}
  .alignwide{margin-left:0;margin-right:0}
}
@media (max-width:600px){.grid,.grid.two,.grid.four{grid-template-columns:1fr}.site-footer .cols{grid-template-columns:1fr}.topbar .date{display:none}.postnav{grid-template-columns:1fr}body{font-size:16px}}
@media (prefers-reduced-motion:reduce){.ticker .track,.hero .flagbg::after{animation:none}*{transition:none!important}}

/* ---------- the banner ---------- */
.banner-wrap{position:relative;background:var(--navy);line-height:0}
.banner-link{display:block;position:relative;overflow:hidden}
.aap-banner{display:block;width:100%;height:auto}
.aap-banner-d{min-height:220px;max-height:440px;aspect-ratio:1600/400}
.aap-banner-m{display:none}
.aap-banner .fold{animation:aapfold 7s linear infinite}
.aap-banner .flag{animation:aapflag 6s ease-in-out infinite alternate;transform-origin:0 50%}
.aap-banner .sparkles use{animation:aaptw 2.8s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
.aap-banner .seal{animation:aapseal 5s ease-in-out infinite}
@keyframes aapfold{from{transform:translateX(-50%)}to{transform:translateX(0)}}
@keyframes aapflag{from{transform:skewY(-.6deg)}to{transform:skewY(.6deg)}}
@keyframes aaptw{0%,100%{opacity:.15;transform:scale(.6)}50%{opacity:1;transform:scale(1.15)}}
@keyframes aapseal{0%,100%{filter:drop-shadow(0 0 0 rgba(226,185,59,0))}50%{filter:drop-shadow(0 0 14px rgba(226,185,59,.75))}}
.old-banner{background:#fff;text-align:center;padding:10px;line-height:1}
.old-banner img{max-height:160px;width:auto}
.navlogo .custom-logo{max-height:42px;width:auto;display:block;margin-right:8px;border-radius:4px}
@media (max-width:700px){.aap-banner-d{display:none}.aap-banner-m{display:block}}
@media (prefers-reduced-motion:reduce){.aap-banner *{animation:none!important}}
.sidebar .widget.side-donate{background-color:var(--navy);background-image:radial-gradient(circle at 50% 50%,rgba(255,255,255,.9) 0 1.4px,transparent 1.6px),radial-gradient(circle at 50% 50%,rgba(255,255,255,.55) 0 1px,transparent 1.2px);background-size:34px 34px,34px 34px;background-position:0 0,17px 17px;box-shadow:0 0 0 4px #fff,0 0 0 8px var(--red)}