/*
Theme Name: PRICHA
Theme URI: https://example.com/pricha
Author: PRICHA Studio
Author URI: https://example.com
Description: A premium, AI-powered publishing theme for blogs, news sites, magazines, and content platforms. Built for speed, SEO, and editorial craft — combining the reading comfort of Medium, the calm of Ghost, and the structure of a print magazine masthead.
Version: 1.0.0
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: pricha
Tags: blog, news, magazine, custom-logo, custom-menu, featured-images, full-width-template, rtl-language-support, translation-ready, threaded-comments, dark-mode

PRICHA — Design system
-----------------------
Signature element: the "masthead rule" — a thick brass line + thin ink hairline,
used under the header and above every section heading, paired with small-caps
mono kickers. Trending posts and "most read" lists use real numbering (01, 02...)
because rank is genuine information there, not decoration.

Color tokens (light): paper #FAF8F3, ink #17181C, brass #B8893B, signal #C0382B, teal #1F5C53
Color tokens (dark):  ink #14151A,  paper #ECEDEF, brass #D9B873, signal #E0584A, teal #4FA398
Type: Fraunces (display/headlines) + Inter (body/UI) + IBM Plex Mono (meta, kickers, numerals)
*/

/* ==========================================================================
   1. TOKENS
   ========================================================================== */
:root{
  --bg: #FAF8F3;
  --bg-dim: #F1ECE1;
  --surface: #FFFFFF;
  --ink: #17181C;
  --ink-soft: #54565F;
  --ink-faint: #8B8D97;
  --border: #E6E0D2;
  --brass: #B8893B;
  --brass-light: #D9B873;
  --brass-dark: #8C6526;
  --signal: #C0382B;
  --signal-bg: #FBEAE7;
  --teal: #1F5C53;
  --teal-bg: #E7F0EE;
  --shadow: 0 1px 2px rgba(23,24,28,.04), 0 8px 24px rgba(23,24,28,.06);
  --radius-sm: 3px;
  --radius-md: 6px;
  --radius-pill: 999px;
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', 'SFMono-Regular', Menlo, monospace;
  --container: 1240px;
  --header-h: 72px;
  --transition: 180ms ease;
}

[data-theme="dark"]{
  --bg: #14151A;
  --bg-dim: #1B1C22;
  --surface: #1E1F26;
  --ink: #ECEDEF;
  --ink-soft: #9B9DA8;
  --ink-faint: #6C6E78;
  --border: #2C2E36;
  --brass: #D9B873;
  --brass-light: #E8CC97;
  --brass-dark: #B8893B;
  --signal: #E0584A;
  --signal-bg: #2E1B19;
  --teal: #4FA398;
  --teal-bg: #15292A;
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.45);
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg: #14151A; --bg-dim: #1B1C22; --surface: #1E1F26; --ink: #ECEDEF;
    --ink-soft: #9B9DA8; --ink-faint: #6C6E78; --border: #2C2E36;
    --brass: #D9B873; --brass-light: #E8CC97; --brass-dark: #B8893B;
    --signal: #E0584A; --signal-bg: #2E1B19; --teal: #4FA398; --teal-bg: #15292A;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.45);
  }
}

/* ==========================================================================
   2. RESET & BASE
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font-body); font-size:16px; line-height:1.65;
  transition:background var(--transition), color var(--transition);
}
img,svg,video{max-width:100%;display:block;height:auto;}
a{color:var(--ink); text-decoration:none;}
a.text-link{color:var(--teal); text-decoration-color:var(--brass); text-underline-offset:3px;}
a.text-link:hover{text-decoration:underline;}
ul,ol{padding-left:1.25em;}
button{font-family:inherit;cursor:pointer;}
:focus-visible{outline:2px solid var(--brass); outline-offset:2px;}
@media (prefers-reduced-motion: reduce){ *{animation:none !important; transition:none !important; scroll-behavior:auto !important;} }

h1,h2,h3,h4{font-family:var(--font-display); font-weight:600; line-height:1.15; margin:0 0 .5em; letter-spacing:-.01em;}
h1{font-size:clamp(2rem,1.4rem + 2.6vw,3.4rem);}
h2{font-size:clamp(1.5rem,1.2rem + 1.4vw,2.2rem);}
h3{font-size:clamp(1.2rem,1.05rem + .6vw,1.5rem);}
p{margin:0 0 1.2em;}

.container{max-width:var(--container); margin-inline:auto; padding-inline:24px;}
.kicker{
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--brass-dark); font-weight:600;
}
[data-theme="dark"] .kicker, [data-theme="light"] .kicker{color:var(--brass);}

.masthead-rule{height:4px; background:var(--brass); position:relative; margin:0;}
.masthead-rule::after{content:"";position:absolute; left:0; right:0; top:4px; height:1px; background:var(--ink); opacity:.7;}
.section-heading{display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin-bottom:20px;}
.section-heading .masthead-rule-mini{flex:1; height:1px; background:var(--border); margin-left:16px;}
.section-heading h2{margin:0;}

.btn{
  display:inline-flex; align-items:center; gap:8px; padding:11px 20px;
  border-radius:var(--radius-sm); font-weight:600; font-size:.92rem;
  border:1px solid var(--ink); background:var(--ink); color:var(--bg);
  transition:transform var(--transition), opacity var(--transition);
}
.btn:hover{transform:translateY(-1px); opacity:.92;}
.btn-outline{background:transparent; color:var(--ink); border-color:var(--border);}
.btn-brass{background:var(--brass); border-color:var(--brass); color:#1A1404;}
.btn-sm{padding:7px 14px; font-size:.82rem;}

.badge{
  display:inline-flex; align-items:center; gap:5px; font-family:var(--font-mono);
  font-size:.68rem; letter-spacing:.06em; text-transform:uppercase; font-weight:600;
  padding:3px 9px; border-radius:var(--radius-pill);
}
.badge-sponsored{background:var(--signal-bg); color:var(--signal);}
.badge-featured{background:var(--brass-light); color:#1A1404;}
.badge-sticky{background:var(--teal-bg); color:var(--teal);}
.badge-video::before{content:"▶";} .badge-audio::before{content:"♪";} .badge-gallery::before{content:"▦";}

/* ==========================================================================
   3. ANNOUNCEMENT BAR + HEADER
   ========================================================================== */
.announcement-bar{background:var(--ink); color:var(--bg); font-size:.85rem; text-align:center; padding:8px 16px;}
.announcement-bar a{color:var(--brass-light); text-decoration:underline;}
.announcement-bar .close-announcement{position:absolute; right:16px; background:none; border:0; color:inherit; font-size:1rem;}

.site-header{
  position:sticky; top:0; z-index:50; background:var(--bg);
  border-bottom:1px solid var(--border); height:var(--header-h);
}
.site-header.is-stuck{box-shadow:var(--shadow);}
.header-inner{display:flex; align-items:center; justify-content:space-between; height:var(--header-h); gap:24px;}
.site-branding{display:flex; align-items:center; gap:10px;}
.site-title{font-family:var(--font-display); font-size:1.5rem; font-weight:700; letter-spacing:-.01em;}
.site-title a{color:var(--ink);}

.primary-nav{display:flex; align-items:center; gap:6px;}
.primary-nav ul{display:flex; list-style:none; margin:0; padding:0; gap:4px;}
.primary-nav li{position:relative;}
.primary-nav a{display:block; padding:10px 14px; font-weight:500; font-size:.94rem; border-radius:var(--radius-sm);}
.primary-nav a:hover{background:var(--bg-dim);}
.primary-nav .menu-item-has-children > a::after{content:"⌄"; margin-left:5px; font-size:.8em; opacity:.6;}

.mega-menu{
  position:absolute; top:100%; left:0; min-width:640px; background:var(--surface);
  border:1px solid var(--border); border-radius:var(--radius-md); box-shadow:var(--shadow);
  padding:24px; display:grid; grid-template-columns:repeat(3,1fr); gap:24px;
  opacity:0; visibility:hidden; transform:translateY(6px); transition:var(--transition);
}
.menu-item-has-children:hover .mega-menu, .menu-item-has-children:focus-within .mega-menu{
  opacity:1; visibility:visible; transform:translateY(0);
}
.mega-menu-col h4{font-size:.78rem; text-transform:uppercase; letter-spacing:.08em; color:var(--brass-dark); margin-bottom:10px;}
.mega-menu-col ul{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:6px;}

.header-actions{display:flex; align-items:center; gap:10px;}
.icon-btn{
  width:38px; height:38px; display:flex; align-items:center; justify-content:center;
  border-radius:var(--radius-pill); border:1px solid var(--border); background:var(--surface); color:var(--ink);
}
.icon-btn:hover{background:var(--bg-dim);}
.theme-toggle .icon-moon{display:none;} [data-theme="dark"] .theme-toggle .icon-sun{display:none;} [data-theme="dark"] .theme-toggle .icon-moon{display:block;}
.mobile-nav-toggle{display:none;}

.search-popup{
  position:fixed; inset:0; background:rgba(20,20,20,.55); z-index:100; display:none;
  align-items:flex-start; justify-content:center; padding-top:12vh;
}
.search-popup.is-open{display:flex;}
.search-popup-inner{background:var(--surface); width:min(680px,90vw); border-radius:var(--radius-md); padding:20px; box-shadow:var(--shadow);}
.search-popup input[type="search"]{
  width:100%; border:none; font-size:1.3rem; font-family:var(--font-display); outline:none;
  background:transparent; color:var(--ink); padding:8px 0; border-bottom:2px solid var(--border);
}
.search-suggestions{margin-top:14px; max-height:50vh; overflow:auto;}
.search-suggestions a{display:flex; gap:10px; padding:8px 4px; border-bottom:1px solid var(--border); align-items:center;}
.search-popup-close{position:absolute; top:18px; right:18px; background:none; border:0; font-size:1.4rem; color:var(--ink-soft);}

/* ==========================================================================
   4. HERO + HOMEPAGE SECTIONS
   ========================================================================== */
.hero-featured{padding:36px 0 12px;}
.hero-grid{display:grid; grid-template-columns:1.5fr 1fr; gap:24px;}
.hero-main{position:relative; border-radius:var(--radius-md); overflow:hidden; background:var(--surface);}
.hero-main img{aspect-ratio:16/10; object-fit:cover; width:100%;}
.hero-main .hero-overlay{position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,0) 35%,rgba(0,0,0,.78) 100%); display:flex; align-items:flex-end; padding:28px;}
.hero-main .hero-overlay .hero-text{color:#fff;}
.hero-main .hero-overlay h2{color:#fff; margin-bottom:8px;}
.hero-main .hero-overlay h2 a{color:#fff;}
.hero-side{display:flex; flex-direction:column; gap:16px;}
.hero-side-item{display:flex; gap:12px; padding-bottom:14px; border-bottom:1px solid var(--border);}
.hero-side-item img{width:96px; height:72px; object-fit:cover; border-radius:var(--radius-sm); flex-shrink:0;}
.hero-side-item h3{font-size:1rem; margin:0 0 4px;}

.trending-section{padding:48px 0;}
.trending-list{list-style:none; padding:0; margin:0; display:grid; gap:0;}
.trending-item{display:grid; grid-template-columns:48px 88px 1fr; gap:16px; align-items:center; padding:16px 0; border-bottom:1px solid var(--border);}
.trending-rank{font-family:var(--font-mono); font-size:1.6rem; color:var(--brass); font-weight:600;}
.trending-item img{width:88px; height:64px; object-fit:cover; border-radius:var(--radius-sm);}
.trending-item h3{font-size:1.02rem; margin:0;}

.categories-section{padding:48px 0; background:var(--bg-dim);}
.category-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:14px;}
.category-pill{
  display:flex; align-items:center; justify-content:space-between; padding:18px 18px;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md);
  font-weight:600; color:var(--ink); transition:var(--transition);
}
.category-pill:hover{border-color:var(--brass); transform:translateY(-2px);}
.category-pill .count{font-family:var(--font-mono); font-size:.78rem; color:var(--ink-faint);}

.author-showcase{padding:48px 0;}
.author-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:18px;}
.author-card{text-align:center; padding:22px; border:1px solid var(--border); border-radius:var(--radius-md); background:var(--surface);}
.author-card img{width:72px; height:72px; border-radius:50%; margin:0 auto 12px; object-fit:cover;}
.author-card .follow-btn{margin-top:10px;}

.newsletter-box{
  background:var(--ink); color:var(--bg); border-radius:var(--radius-md); padding:40px;
  display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap;
}
.newsletter-box h3{color:var(--bg); margin-bottom:6px;}
.newsletter-box p{color:var(--ink-faint); margin-bottom:0; max-width:420px;}
.newsletter-form{display:flex; gap:10px; flex-wrap:wrap;}
.newsletter-form input[type="email"]{
  padding:11px 14px; border-radius:var(--radius-sm); border:1px solid var(--ink-faint);
  background:transparent; color:var(--bg); min-width:240px;
}
.newsletter-form input::placeholder{color:var(--ink-faint);}

/* ==========================================================================
   5. ARTICLE CARDS + LAYOUTS (grid / masonry / list / magazine)
   ========================================================================== */
.posts-wrap{padding:40px 0;}
.layout-grid .posts-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:28px;}
.layout-magazine .posts-grid{display:grid; grid-template-columns:2fr 1fr; gap:28px;}
.layout-magazine .posts-grid .card:first-child{grid-row:span 2;}
.layout-masonry .posts-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; grid-auto-flow:dense;}
.layout-masonry .card:nth-child(3n+1){grid-row:span 2;}
.layout-list .posts-grid{display:flex; flex-direction:column; gap:0;}
.layout-news .posts-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}

.card{position:relative; display:flex; flex-direction:column;}
.card-thumb{position:relative; border-radius:var(--radius-md); overflow:hidden; margin-bottom:14px; background:var(--bg-dim);}
.card-thumb img{aspect-ratio:4/3; object-fit:cover; width:100%; transition:transform .4s ease;}
.card:hover .card-thumb img{transform:scale(1.04);}
.card-thumb .badge{position:absolute; top:10px; left:10px;}
.card .kicker{display:block; margin-bottom:6px;}
.card h3{font-size:1.15rem; margin:0 0 8px;}
.card h3 a{color:var(--ink);}
.card h3 a:hover{color:var(--teal);}
.card .excerpt{color:var(--ink-soft); font-size:.93rem; margin-bottom:10px;}
.card .card-meta{display:flex; align-items:center; gap:10px; font-family:var(--font-mono); font-size:.74rem; color:var(--ink-faint);}
.card .card-meta img.avatar{width:22px; height:22px; border-radius:50%; object-fit:cover;}

.layout-list .card{flex-direction:row; gap:20px; padding:20px 0; border-bottom:1px solid var(--border);}
.layout-list .card-thumb{width:220px; flex-shrink:0; margin-bottom:0;}
.layout-list .card-body{flex:1;}

/* ==========================================================================
   6. SINGLE ARTICLE PAGE
   ========================================================================== */
.reading-progress{position:fixed; top:var(--header-h); left:0; height:3px; background:var(--brass); width:0%; z-index:60; transition:width .1s linear;}
.article-header{padding:40px 0 24px; max-width:760px; margin-inline:auto;}
.article-header .kicker{margin-bottom:14px;}
.article-header h1{margin-bottom:18px;}
.article-subtitle{font-size:1.15rem; color:var(--ink-soft); font-family:var(--font-display); margin-bottom:20px;}
.article-meta-row{display:flex; align-items:center; gap:16px; flex-wrap:wrap; padding-top:18px; border-top:1px solid var(--border);}
.article-meta-row .author{display:flex; align-items:center; gap:10px;}
.article-meta-row .author img{width:42px; height:42px; border-radius:50%; object-fit:cover;}
.article-meta-row .author .name{font-weight:600; font-size:.92rem;}
.article-meta-row .meta-bits{display:flex; gap:14px; font-family:var(--font-mono); font-size:.74rem; color:var(--ink-faint); flex-wrap:wrap;}

.article-featured-image{max-width:1040px; margin:0 auto 32px;}
.article-featured-image img{border-radius:var(--radius-md); aspect-ratio:16/9; object-fit:cover; width:100%;}
.article-featured-image figcaption{font-size:.82rem; color:var(--ink-faint); margin-top:8px; text-align:center;}

.article-layout{display:grid; grid-template-columns:200px 1fr; gap:48px; max-width:1040px; margin-inline:auto;}
.article-toc{position:sticky; top:calc(var(--header-h) + 24px); align-self:start; font-size:.86rem;}
.article-toc h4{font-size:.74rem; text-transform:uppercase; letter-spacing:.08em; color:var(--brass-dark); margin-bottom:12px;}
.article-toc ol{list-style:none; padding:0; margin:0; border-left:2px solid var(--border);}
.article-toc li{padding-left:14px; margin-bottom:10px;}
.article-toc a{color:var(--ink-soft);}
.article-toc a.is-active{color:var(--ink); font-weight:600; border-left:2px solid var(--brass); margin-left:-16px; padding-left:14px;}

.article-content{font-size:1.12rem; line-height:1.8; max-width:680px;}
.article-content h2{margin-top:1.6em;} .article-content h3{margin-top:1.3em;}
.article-content p{margin-bottom:1.4em;}
.article-content blockquote{border-left:3px solid var(--brass); padding-left:20px; margin:1.8em 0; font-family:var(--font-display); font-size:1.25rem; color:var(--ink-soft);}
.article-content img{border-radius:var(--radius-sm); margin:1.6em 0;}
.article-content figure{margin:1.6em 0;}
.article-content pre{background:var(--ink); color:#E7E7E7; padding:18px; border-radius:var(--radius-sm); overflow:auto; font-family:var(--font-mono); font-size:.86rem;}

.tldr-box{background:var(--teal-bg); border:1px solid var(--teal); border-radius:var(--radius-md); padding:20px 22px; margin:0 0 28px; max-width:680px;}
.tldr-box h4{color:var(--teal); font-size:.8rem; text-transform:uppercase; letter-spacing:.08em; margin-bottom:10px;}
.tldr-box ul{margin:0; padding-left:1.2em;}

.share-rail{display:flex; flex-direction:column; gap:10px; position:sticky; top:calc(var(--header-h) + 24px);}
.share-rail .icon-btn{width:42px; height:42px;}
.share-inline{display:flex; gap:10px; margin:32px 0; max-width:680px;}

.author-box{display:flex; gap:18px; background:var(--bg-dim); border-radius:var(--radius-md); padding:24px; max-width:680px; margin:40px 0;}
.author-box img{width:64px; height:64px; border-radius:50%; object-fit:cover; flex-shrink:0;}
.author-box h4{margin:0 0 4px;}
.author-box .bio{color:var(--ink-soft); font-size:.9rem; margin-bottom:10px;}

.faq-block, .quiz-block{max-width:680px; margin:36px 0; border:1px solid var(--border); border-radius:var(--radius-md); padding:24px;}
.faq-item{border-bottom:1px solid var(--border); padding:14px 0;}
.faq-item:last-child{border-bottom:0;}
.faq-question{display:flex; justify-content:space-between; align-items:center; font-weight:600; cursor:pointer;}
.faq-question::after{content:"+"; font-size:1.2rem; color:var(--brass);}
.faq-item.is-open .faq-question::after{content:"–";}
.faq-answer{display:none; padding-top:10px; color:var(--ink-soft);}
.faq-item.is-open .faq-answer{display:block;}

.quiz-question{margin-bottom:18px;}
.quiz-options{list-style:none; padding:0; display:flex; flex-direction:column; gap:8px;}
.quiz-options li{border:1px solid var(--border); border-radius:var(--radius-sm); padding:10px 14px; cursor:pointer;}
.quiz-options li:hover{border-color:var(--brass);}
.quiz-options li.selected{border-color:var(--teal); background:var(--teal-bg);}
.quiz-options li.correct{border-color:var(--teal); background:var(--teal-bg);}
.quiz-options li.incorrect{border-color:var(--signal); background:var(--signal-bg);}
.quiz-result{text-align:center; padding:24px;}
.quiz-result .score{font-family:var(--font-display); font-size:2.4rem; color:var(--brass);}

.related-posts{max-width:1040px; margin:48px auto;}
.post-nav{display:flex; justify-content:space-between; max-width:680px; margin:40px auto; gap:20px;}
.post-nav a{flex:1; padding:18px; border:1px solid var(--border); border-radius:var(--radius-md);}
.post-nav .direction{font-family:var(--font-mono); font-size:.7rem; color:var(--ink-faint); text-transform:uppercase;}
.post-nav .prev{text-align:left;} .post-nav .next{text-align:right;}

.comments-area{max-width:680px; margin:48px auto;}

/* ==========================================================================
   7. SIDEBAR / WIDGETS
   ========================================================================== */
.widget{margin-bottom:36px;}
.widget-title{font-size:.78rem; text-transform:uppercase; letter-spacing:.08em; color:var(--brass-dark); margin-bottom:14px; border-bottom:2px solid var(--border); padding-bottom:8px;}

/* ==========================================================================
   8. FOOTER
   ========================================================================== */
.site-footer{background:var(--bg-dim); border-top:1px solid var(--border); padding:56px 0 28px; margin-top:48px;}
.footer-grid{display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:32px; margin-bottom:40px;}
.footer-col h4{font-size:.78rem; text-transform:uppercase; letter-spacing:.08em; color:var(--brass-dark); margin-bottom:14px;}
.footer-col ul{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px;}
.footer-col ul a{color:var(--ink-soft);}
.footer-social{display:flex; gap:10px; margin-top:14px;}
.footer-bottom{display:flex; justify-content:space-between; padding-top:24px; border-top:1px solid var(--border); font-size:.84rem; color:var(--ink-faint); flex-wrap:wrap; gap:10px;}

/* ==========================================================================
   9. FORMS / COMMENTS / MISC
   ========================================================================== */
input,textarea,select{font-family:inherit; font-size:.95rem; padding:10px 12px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--surface); color:var(--ink); width:100%;}
.breadcrumbs{font-family:var(--font-mono); font-size:.76rem; color:var(--ink-faint); margin-bottom:18px;}
.breadcrumbs a{color:var(--ink-faint);}
.view-counter::before{content:"👁"; margin-right:4px; opacity:.6;}

/* ==========================================================================
   10. RESPONSIVE
   ========================================================================== */
@media (max-width: 980px){
  .article-layout{grid-template-columns:1fr;}
  .article-toc{display:none;}
  .footer-grid{grid-template-columns:1fr 1fr;}
  .layout-grid .posts-grid, .layout-masonry .posts-grid, .layout-news .posts-grid{grid-template-columns:repeat(2,1fr);}
  .layout-magazine .posts-grid{grid-template-columns:1fr;}
}
@media (max-width: 760px){
  .primary-nav{display:none;}
  .mobile-nav-toggle{display:flex;}
  .hero-grid{grid-template-columns:1fr;}
  .layout-grid .posts-grid, .layout-masonry .posts-grid, .layout-news .posts-grid{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr;}
  .layout-list .card{flex-direction:column;}
  .layout-list .card-thumb{width:100%;}
  .share-rail{position:static; flex-direction:row; margin-bottom:20px;}
}

/* ==========================================================================
   11. ACCESSIBILITY HELPERS
   ========================================================================== */
.screen-reader-text{position:absolute; left:-9999px;}
.skip-link{position:absolute; top:-50px; left:0; background:var(--ink); color:var(--bg); padding:10px 16px; z-index:200;}
.skip-link:focus{top:0;}