/*
Theme Name: Dugout
Theme URI: https://atiqujjaman.com/
Author: Ahmed Atiqujjaman
Author URI: https://atiqujjaman.com/
Description: ডাগআউট, ফুটবল ও মতামতের জন্য বাংলা এডিটোরিয়াল থিম। চারকোল ডার্ক, লাল অ্যাকসেন্ট, লাইট/ডার্ক মোড, ব্লগ, বই ও প্রকল্প, পরিচিতি ও নিউজলেটার টেমপ্লেটসহ।
Version: 1.0.2
Requires at least: 6.0
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: dugout
*/
:root{
  --bg:#111312;--bg2:#161917;--surface:#1b1f1d;--surface2:#222724;--line:#2c332f;--line2:#3a423d;
  --fg:#ecebe7;--muted:#a2a9a4;--red:#d3283a;--red-text:#f06471;--on-red:#fff;
  --f-display:"Anek Bangla","Hind Siliguri","Noto Sans Bengali",system-ui,sans-serif;
  --f-body:"Hind Siliguri","Noto Sans Bengali",system-ui,sans-serif;
  --gutter:clamp(18px,4.5vw,56px);--ease:cubic-bezier(.2,.8,.2,1);
  color-scheme:dark;
}
html[data-theme="light"]{
  --bg:#f6f5f1;--bg2:#efede7;--surface:#ffffff;--surface2:#f1efe9;--line:#dcdad3;--line2:#c4c1b8;
  --fg:#151716;--muted:#5c635f;--red:#b5172a;--red-text:#b5172a;color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:5rem;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font:400 1.06rem/1.8 var(--f-body);-webkit-font-smoothing:antialiased;overflow-x:hidden;transition:background .3s,color .3s}
a{color:inherit;text-decoration:none}
img,svg,video{max-width:100%;display:block}
img{height:auto}
:focus-visible{outline:2px solid var(--red-text);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:-999px;top:0;background:var(--fg);color:var(--bg);padding:.6rem 1rem;z-index:100}
.skip:focus{left:1rem;top:1rem}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{max-width:1216px;margin-inline:auto;padding-inline:var(--gutter)}

/* header */
.top{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 86%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid transparent;transition:border-color .3s}
.top.stuck{border-color:var(--line)}
.top__in{display:flex;align-items:center;gap:1.4rem;padding-block:.95rem}
.brand{font:700 1.2rem/1.2 var(--f-display);margin-right:auto;letter-spacing:0}
.brand i{font-style:normal;color:var(--red-text)}
.nav{display:flex;align-items:center;gap:1.6rem}
.nav__list{display:flex;gap:1.6rem;list-style:none;margin:0;padding:0}
.nav__list a{display:block;padding:.2rem 0;color:var(--muted);font-weight:500;border-bottom:2px solid transparent;transition:color .25s,border-color .25s}
.nav__list a:hover{color:var(--fg)}
.nav__list a[aria-current="page"],.nav__list .current-menu-item>a,.nav__list .current_page_item>a{color:var(--fg);font-weight:600;border-color:var(--red)}
.mode{position:relative;width:64px;height:32px;border-radius:99px;border:1px solid var(--line2);background:var(--surface);cursor:pointer;padding:0;display:inline-flex;align-items:center;justify-content:space-between;padding-inline:8px;color:var(--muted);transition:border-color .25s}
.mode:hover{border-color:var(--fg)}
.mode svg{width:16px;height:16px;position:relative;z-index:1}
.mode__thumb{position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:var(--fg);transition:transform .35s var(--ease)}
.mode[aria-checked="true"] .mode__thumb{transform:translateX(32px)}
.mode .sun{color:var(--bg)}
.mode[aria-checked="true"] .sun{color:var(--muted)}
.mode[aria-checked="true"] .moon{color:var(--bg)}
.mode .moon{color:var(--muted)}
.burger{display:none;background:none;border:1px solid var(--line2);color:var(--fg);border-radius:99px;padding:.3rem 1rem;font:500 .95rem var(--f-body);cursor:pointer}

/* masthead */
.mast{border-block:1px solid var(--line2);margin-top:.6rem;overflow:hidden}
.mast__title{margin:0;font:800 clamp(3.6rem,17.5vw,15.5rem)/1.12 var(--f-display);letter-spacing:-.02em;text-align:center;padding-block:.02em .06em;animation:rise 1s var(--ease) both}
.mast--long .mast__title{font-size:clamp(2.8rem,10vw,8.6rem);line-height:1.2}
.mast--name .mast__title{font-size:clamp(2.6rem,9.4vw,8.2rem);line-height:1.2}
.mast__sub{margin:0;text-align:center;color:var(--muted);padding-bottom:1.2rem}
@keyframes rise{from{transform:translateY(45%);opacity:0}to{transform:none;opacity:1}}

/* sections */
.sec{padding-block:clamp(1.8rem,4vw,3rem) 0}
.sec__title{font:600 1.3rem/1.3 var(--f-display);margin:0 0 1.3rem}
.eyebrow{font:600 .95rem var(--f-body);color:var(--red-text);margin:0 0 .4rem}

/* cards */
.card{position:relative;min-width:0;display:flex;flex-direction:column;gap:.9rem}
.card__media{display:block;position:relative;overflow:hidden;border-radius:.35rem;background:var(--surface);aspect-ratio:16/10}
.card__media img,.card__media .ph{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.card:hover .card__media img,.card:hover .card__media .ph{transform:scale(1.05)}
.ph{display:block;background:linear-gradient(160deg,var(--surface2),var(--surface))}
.ph svg{width:100%;height:100%}
.meta{margin:0;font:600 .88rem/1.4 var(--f-body);color:var(--red-text)}
.card__title{display:flex;justify-content:space-between;gap:.8rem;align-items:flex-start;margin:0;font:600 clamp(1.2rem,2vw,1.45rem)/1.4 var(--f-display)}
.card__title a::after{content:"";position:absolute;inset:0;z-index:1}
.card__title a:hover{color:var(--red-text)}
.arr{flex:none;display:inline-block;transition:transform .3s var(--ease);color:var(--muted);margin-top:.1rem}
.card:hover .arr{transform:translate(3px,-3px);color:var(--red-text)}
.card__ex{margin:0;color:var(--muted);font-size:.98rem;line-height:1.7}
.pills{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:auto;padding-top:.2rem;position:relative;z-index:2}
.pill{font:500 .82rem/1 var(--f-body);padding:.38rem .8rem;border-radius:99px;border:1px solid var(--line2);color:var(--muted);transition:all .25s}
.pill:hover{color:var(--fg);border-color:var(--fg)}
.pill.h0{color:var(--red-text);border-color:color-mix(in srgb,var(--red) 55%,transparent)}
.pill.h1{color:#d8b25a;border-color:rgba(216,178,90,.45)}
.pill.h2{color:#6fc08f;border-color:rgba(111,192,143,.45)}
.pill.h3{color:#7fa8e8;border-color:rgba(127,168,232,.45)}
.pill.h4{color:var(--muted)}
html[data-theme="light"] .pill.h1{color:#8a6a14;border-color:rgba(138,106,20,.5)}
html[data-theme="light"] .pill.h2{color:#1f7a47;border-color:rgba(31,122,71,.5)}
html[data-theme="light"] .pill.h3{color:#2b57a8;border-color:rgba(43,87,168,.5)}

.recent{display:grid;grid-template-columns:1.08fr 1fr;gap:2rem 2.2rem;align-items:start}
.recent__side{display:grid;gap:1.6rem}
.card--row{flex-direction:row;gap:1.2rem;align-items:flex-start}
.card--row .card__media{flex:0 0 42%;aspect-ratio:4/3}
.card--row .card__body{display:flex;flex-direction:column;gap:.6rem;min-width:0;flex:1}
.card--row .card__title{font-size:1.15rem}
.card--feature .card__media{aspect-ratio:16/9}
.card--wide{grid-column:1/-1;flex-direction:row;gap:2.2rem;align-items:center}
.card--wide .card__media{flex:0 0 48%;aspect-ratio:16/9}
.card--wide .card__body{display:flex;flex-direction:column;gap:.8rem;flex:1;min-width:0}
.card--wide .card__title{font-size:1.5rem}
.card__body{display:flex;flex-direction:column;gap:.7rem;flex:1;min-width:0}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2.4rem 1.8rem}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.4rem}
.empty{padding:3rem 0;color:var(--muted)}

/* pagination */
.pagination{margin-top:3rem;padding-top:1.6rem;border-top:1px solid var(--line)}
.nav-links{display:flex;align-items:center;justify-content:center;gap:.4rem;flex-wrap:wrap}
.page-numbers{display:inline-flex;min-width:2.1rem;height:2.1rem;align-items:center;justify-content:center;padding:0 .7rem;border-radius:.4rem;color:var(--muted);font-weight:500;transition:all .25s}
a.page-numbers:hover{color:var(--fg);background:var(--surface2)}
.page-numbers.current{background:var(--surface2);color:var(--red-text);font-weight:600}
.page-numbers.prev{margin-right:auto}.page-numbers.next{margin-left:auto}

/* single & prose */
.entry{max-width:780px;margin-inline:auto;padding-block:clamp(2rem,5vw,4rem) 2rem}
.entry__head{margin-bottom:1.6rem}
.entry__title{font:700 clamp(2rem,5.2vw,3.6rem)/1.3 var(--f-display);margin:.8rem 0;text-wrap:balance}
.entry__img{margin:0 auto 2rem;max-width:1100px;border-radius:.4rem;overflow:hidden}
.prose{font-size:1.14rem;line-height:1.95}
.prose>*{max-width:780px;margin-inline:auto}
.prose p{margin:0 0 1.3rem}
.prose h2,.prose h3,.prose h4{font-family:var(--f-display);line-height:1.4;margin:2.2rem 0 .8rem}
.prose h2{font-size:1.75rem}.prose h3{font-size:1.4rem}
.prose a{color:var(--red-text);border-bottom:1px solid color-mix(in srgb,var(--red) 50%,transparent)}
.prose a:hover{border-color:var(--red-text)}
.prose ul,.prose ol{padding-left:1.4rem;margin:0 0 1.3rem}
.prose li{margin:.3rem 0}
.prose blockquote{margin:1.8rem 0;padding:.4rem 0 .4rem 1.3rem;border-left:3px solid var(--red);font:400 1.3rem/1.8 var(--f-display);color:var(--fg)}
.prose img{border-radius:.35rem}
.prose figure{margin:1.8rem auto}
.prose figcaption{font-size:.9rem;color:var(--muted);margin-top:.5rem}
.prose hr{border:0;border-top:1px solid var(--line);margin:2.4rem auto}
.prose pre,.prose code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.92em}
.prose pre{background:var(--surface);border:1px solid var(--line);padding:1rem;border-radius:.4rem;overflow:auto}
.prose table{width:100%;border-collapse:collapse;margin:0 0 1.4rem}
.prose th,.prose td{border-bottom:1px solid var(--line);padding:.6rem .5rem;text-align:left}
.prose iframe{max-width:100%}
.alignwide{max-width:1100px!important}.alignfull{max-width:none!important}
.wp-caption{max-width:100%}
.entry__tags{display:flex;gap:.5rem;flex-wrap:wrap;margin:2.4rem 0 1.6rem}
.author{display:flex;gap:1.2rem;align-items:flex-start;border:1px solid var(--line);border-radius:.5rem;padding:1.3rem;background:var(--surface);margin:2rem 0}
.author__mark{flex:none;width:52px;height:52px;border-radius:50%;background:var(--red);color:var(--on-red);display:grid;place-items:center;font:700 1.3rem var(--f-display)}
.author h2{margin:0 0 .2rem;font:600 1.15rem var(--f-display)}
.author p{margin:0 0 .5rem;color:var(--muted);font-size:.98rem}
.post-nav .nav-links{justify-content:space-between;align-items:flex-start;padding-top:1.4rem;border-top:1px solid var(--line);gap:1.5rem}
.post-nav a{display:block;max-width:46%;color:var(--muted)}
.post-nav a:hover{color:var(--fg)}
.post-nav .nav-next{text-align:right;margin-left:auto}
.post-nav span.t{display:block;font:600 .85rem var(--f-body);color:var(--red-text)}

/* comments */
.comments{margin-top:2.4rem}
.comments h2,.comment-reply-title{font:600 1.3rem var(--f-display)}
.comment-list{list-style:none;padding:0;margin:0 0 2rem}
.comment-list .comment{border-top:1px solid var(--line);padding:1.1rem 0}
.comment-list .children{list-style:none;padding-left:1.4rem}
.comment-author{display:flex;gap:.7rem;align-items:center}
.comment-author img{border-radius:50%}
.comment-meta{font-size:.85rem;color:var(--muted)}
.comment-form label{display:block;font-weight:500;margin:.8rem 0 .3rem}
.comment-form input[type=text],.comment-form input[type=email],.comment-form input[type=url],.comment-form textarea,.search-form input[type=search]{width:100%;background:var(--surface);color:var(--fg);border:1px solid var(--line2);border-radius:.35rem;padding:.7rem .9rem;font:inherit}
.comment-form input:focus,.comment-form textarea:focus,.search-form input:focus{border-color:var(--red)}
.submit,.btn{display:inline-flex;align-items:center;gap:.5rem;background:var(--fg);color:var(--bg);border:1px solid var(--fg);border-radius:.35rem;padding:.7rem 1.3rem;font:500 1rem var(--f-body);cursor:pointer;transition:transform .3s var(--ease),background .3s,color .3s}
.submit:hover,.btn:hover{transform:translateY(-2px)}
.btn--ghost{background:transparent;color:var(--fg)}
.btn--red{background:var(--red);border-color:var(--red);color:var(--on-red)}
.search-form{display:flex;gap:.6rem;max-width:520px;margin-inline:auto}
.search-form label{flex:1}

/* about */
.portrait{margin:2.2rem 0 0;border-radius:.4rem;overflow:hidden;aspect-ratio:21/9;background:var(--surface)}
.portrait img{width:100%;height:100%;object-fit:cover}
.about{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:2rem 4rem;padding-top:2.4rem}
.about>aside{align-self:start;position:sticky;top:5.5rem}
.about h2{font:600 1.35rem/1.3 var(--f-display);margin:0 0 .7rem}
.about section{margin-bottom:2.4rem}
.about .lead{font:400 1.35rem/1.8 var(--f-display)}
.about ul{margin:0;padding-left:1.2rem;color:var(--muted)}
.about li{margin:.4rem 0}
.about li b{color:var(--fg);font-weight:600}
.tl{list-style:none;padding:0!important;border-left:1px solid var(--line2);margin-left:.3rem!important}
.tl li{position:relative;padding:0 0 1.2rem 1.4rem;margin:0}
.tl li::before{content:"";position:absolute;left:-5px;top:.7rem;width:9px;height:9px;border-radius:50%;background:var(--bg);border:1px solid var(--muted)}
.tl li.now::before{background:var(--red);border-color:var(--red)}
.tl time{display:block;font:600 .88rem var(--f-body);color:var(--red-text)}
.facts{display:grid;gap:.9rem;margin:0;padding:0;list-style:none}
.facts li{border-top:1px solid var(--line);padding-top:.7rem}
.facts b{display:block;font:600 .85rem var(--f-body);color:var(--red-text)}
.facts span{font-size:1.02rem}
.linkrow{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:1rem}

/* books */
.cover{aspect-ratio:2/3;width:100%;max-width:170px;border-radius:.2rem .5rem .5rem .2rem;position:relative;overflow:hidden;isolation:isolate;display:flex;flex-direction:column;justify-content:space-between;padding:.8rem .7rem;box-shadow:0 22px 40px -18px rgba(0,0,0,.8),inset 5px 0 0 rgba(0,0,0,.28);transition:transform .6s var(--ease);color:#fff}
.cover small{font:600 .72rem var(--f-body);opacity:.85}
.cover strong{font:800 1.8rem/1.15 var(--f-display)}
.cover.reds{background:linear-gradient(160deg,#c3132b,#590713 72%)}
.cover.reds::after{content:"";position:absolute;right:-30%;bottom:-18%;width:130%;aspect-ratio:1;border-radius:50%;border:1px solid rgba(255,255,255,.2);box-shadow:0 0 0 22px transparent,0 0 0 23px rgba(255,255,255,.12),0 0 0 52px transparent,0 0 0 53px rgba(255,255,255,.08);z-index:-1}
.cover.nar{background:linear-gradient(160deg,#1c2420,#060807 78%)}
.cover.nar::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0 6px,rgba(255,255,255,.035) 6px 7px);z-index:-1}
.cover.side{background:linear-gradient(160deg,#2b332f,#0e1110 80%);border-top:4px solid var(--red)}
.cover.blog{background:linear-gradient(160deg,#d3283a,#7c1020);}
.card:hover .cover{transform:translateY(-4px) rotate(-1.2deg)}
.bookcard{flex-direction:row;gap:1.5rem;border:1px solid var(--line);background:var(--surface);border-radius:.5rem;padding:1.4rem;transition:border-color .3s,transform .4s var(--ease)}
.bookcard:hover{border-color:var(--line2);transform:translateY(-4px)}
.bookcard .card__body{gap:.6rem}
.bookcard h3{margin:0;font:600 1.35rem/1.35 var(--f-display)}
.bookcard p{margin:0;color:var(--muted);font-size:.98rem}
.status{align-self:flex-start;font:600 .8rem var(--f-body);border:1px solid var(--red);color:var(--red-text);border-radius:99px;padding:.15rem .8rem}
.links{display:flex;gap:.9rem;flex-wrap:wrap;margin-top:auto;padding-top:.5rem;position:relative;z-index:2}
.lk{font:500 .95rem var(--f-body);border-bottom:1px solid var(--red);padding-bottom:.1rem;transition:color .25s}
.lk:hover{color:var(--red-text)}
.lk.ext::after{content:" ↗"}
.note{font-size:.88rem;color:var(--muted);margin-top:1.2rem}

/* newsletter */
.nl{max-width:680px;margin:0 auto;padding:clamp(3rem,7vw,5.5rem) 0 2rem;text-align:center}
.nl h1{font:700 clamp(2.2rem,6vw,3.6rem)/1.3 var(--f-display);margin:.2rem 0 1rem}
.nl p{color:var(--muted);font-size:1.12rem}
.nl .wp-block-jetpack-subscriptions,.nl form{margin-top:1.6rem;text-align:left}
.nl input[type=email],.nl input[type=text]{width:100%;background:var(--surface);color:var(--fg);border:1px solid var(--line2);border-radius:.35rem;padding:.8rem 1rem;font:inherit}
.nl button,.nl input[type=submit],.nl .wp-block-button__link{background:var(--red)!important;color:#fff!important;border:0!important;border-radius:.35rem!important;padding:.8rem 1.4rem!important;font:500 1rem var(--f-body)!important;cursor:pointer}
.nl .linkrow{justify-content:center;align-items:stretch}
.nl .linkrow .btn{justify-content:center;min-height:3rem;flex:1 1 11rem;max-width:16rem}
.nl input[type=email],.nl input[type=text]{min-width:0;text-overflow:ellipsis}

/* footer */
.foot{margin-top:clamp(3rem,7vw,5rem);border-top:1px solid var(--line);padding-block:1.8rem 2.6rem}
.foot__in{display:flex;gap:1rem 1.6rem;flex-wrap:wrap;align-items:baseline}
.foot__links{display:flex;gap:.4rem 1.3rem;flex-wrap:wrap;list-style:none;margin:0;padding:0}
.foot__links a:hover{color:var(--red-text)}
.foot__links ul{display:contents}
.foot__links li{list-style:none}

/* reveal (only when script is running) */
.js .rv.pre{opacity:0;transform:translateY(22px)}
.rv{transition:opacity .8s var(--ease),transform .8s var(--ease);transition-delay:calc(var(--d,0) * 80ms)}

@media (max-width:980px){
  .grid3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .about{grid-template-columns:1fr}
  .about>aside{position:static}
  .card--wide{flex-direction:column;align-items:stretch;gap:.9rem}
  .card--wide .card__media{flex:none}
  .recent{grid-template-columns:1fr}
}
@media (max-width:760px){
  .burger{display:inline-block}
  .nav{position:absolute;left:0;right:0;top:100%;background:var(--bg);border-bottom:1px solid var(--line);padding:.8rem var(--gutter) 1.2rem;flex-direction:column;align-items:flex-start;gap:1rem;display:none}
  .nav.open{display:flex}
  .nav__list{flex-direction:column;gap:.2rem;width:100%}
  .nav__list a{padding:.55rem 0;font-size:1.08rem}
  .grid3,.grid2{grid-template-columns:1fr}
  .card--row{flex-direction:column}
  .card--row .card__media{flex:none;width:100%}
  .bookcard{flex-direction:column}
  .post-nav a{max-width:48%}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important;transition-delay:0s!important}
  .js .rv.pre{opacity:1;transform:none}
}

/* about page v1.0.2 */
.about__h{font:600 1.1rem var(--f-display);margin:0 0 .8rem}
.about .soft{color:var(--muted);font-size:1.05rem;line-height:1.9}
.about .soft b{color:var(--fg);font-weight:600}
.about .linkrow{margin-top:1.1rem}
.about .lk{color:var(--fg);text-decoration:underline;text-decoration-color:var(--red);text-underline-offset:.2em}
.about .lk.ext::after{content:" ↗";color:var(--muted)}
.about .lk+.lk{margin-left:1rem}
.minibooks{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.minibooks article{border:1px solid var(--line);background:var(--surface);border-radius:.5rem;padding:1.2rem}
.minibooks h3{font:600 1.15rem/1.4 var(--f-display);margin:.7rem 0 .3rem}
.minibooks p{color:var(--muted);margin:0 0 .7rem;font-size:.98rem}
.minibooks .lk{display:inline-block;margin:.15rem 1rem .15rem 0}
.social{list-style:none;margin:0!important;padding:0!important;display:grid;grid-template-columns:repeat(auto-fill,minmax(10rem,1fr));gap:.7rem}
.social a{display:flex;align-items:center;justify-content:center;min-height:3rem;border:1px solid var(--line2);border-radius:.4rem;color:var(--fg);text-decoration:none;transition:transform .3s var(--ease),border-color .3s}
.social a:hover{transform:translateY(-2px);border-color:var(--red)}
@media (max-width:760px){.minibooks{grid-template-columns:1fr}}