@charset "UTF-8";
/* ============================================================================
   shokrzad.com/math — dark theme layer
   ----------------------------------------------------------------------------
   Loaded AFTER the vendor bundle (css.min.css: animate + font-awesome + style +
   responsive + rtl + flexslider + prettyPhoto + slick). Nothing here edits the
   vendor bundle; this file only overrides it, so the theme can be dropped or
   swapped by removing one <link>.

   Design tokens are shared with the shokrzad.com landing page so the two sites
   read as one product.

   !important is used deliberately and only on colour/background properties.
   The homepage renders DB-driven widgets, each emitting its own <style> block
   into <body> with hard-coded light colours. Those blocks come after this file
   in the cascade and would otherwise win at equal specificity. The view no
   longer emits colour (see application/views/home/index.php), but the
   !important flags stay as a backstop for any widget row still carrying one.

   Sections:
     01 tokens      06 sections/widgets   11 forms
     02 fonts       07 typography         12 tables
     03 base        08 cards/posts        13 footer
     04 layout      09 buttons            14 motion
     05 header      10 comments           15 responsive + a11y
   ========================================================================== */

/* == 01 tokens ============================================================= */
:root{
  --ink:#050F1B;        /* page base            */
  --ink2:#071427;       /* raised base          */
  --sheet:#0B2136;      /* card                 */
  --sheet2:#0D2740;     /* card, lighter face   */
  --hi:#122E48;         /* hover / inset        */

  --cyan:#3FE0D0;       /* primary accent (math)*/
  --violet:#9B87F5;     /* secondary accent     */
  --amber:#FFB454;      /* attention            */
  --danger:#FF6B6B;

  --paper:#EAF2F9;      /* primary text         */
  --soft:#B9CFE2;       /* secondary text       */
  --muted:#7A93AC;      /* tertiary text        */

  --hair:rgba(120,190,215,.16);   /* hairline border      */
  --hair2:rgba(63,224,208,.30);   /* accented hairline    */

  --radius:16px;
  --radius-sm:10px;
  --shadow:0 22px 50px -30px #000;

  --f-fa:'Vazirmatn',system-ui,-apple-system,sans-serif;
  --f-mono:'JetBrains Mono',ui-monospace,monospace;

  --ease:cubic-bezier(.2,.7,.2,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
}

/* == 02 fonts ============================================================== */
/* Loaded via <link> in templates/Header.php, not @import. An @import is only
   valid before any other rule — sitting below :root above, it was silently
   dropped and Vazirmatn never loaded, so the whole site fell back to
   system-ui. The <link> also fetches in parallel instead of waiting for this
   stylesheet to parse first. Weights there must cover the ones used below:
   400 body, 600, 700, 800, 900, plus JetBrains Mono 400 for .comment-date. */

/* == 03 base =============================================================== */
html{background:var(--ink)}
body{
  background:var(--ink) !important;
  color:var(--paper) !important;
  font-family:var(--f-fa) !important;
  font-size:15px;
  line-height:1.9;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
/* ambient wash behind everything, fixed so it doesn't scroll away */
body::before{
  content:'';position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(1200px 620px at 78% -8%, rgba(63,224,208,.07), transparent 62%),
    radial-gradient(1000px 560px at 12% 4%, rgba(155,135,245,.06), transparent 60%),
    linear-gradient(180deg,#071427 0%,#050F1B 42%,#04101D 100%);
}
.pageWrapper{position:relative;z-index:1}

a{color:var(--cyan);transition:color .22s var(--ease)}
a:hover,a:focus{color:var(--amber)}
p{color:var(--soft)}
hr{border-color:var(--hair)}
img{max-width:100%;height:auto}
::selection{background:rgba(63,224,208,.28);color:#fff}

/* focus visibility — the vendor theme strips outlines in places */
a:focus-visible,button:focus-visible,input:focus-visible,
textarea:focus-visible,select:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--cyan);outline-offset:3px;border-radius:4px;
}

/* scrollbar */
*{scrollbar-color:rgba(63,224,208,.35) transparent;scrollbar-width:thin}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--ink2)}
::-webkit-scrollbar-thumb{background:rgba(63,224,208,.28);border-radius:99px;border:2px solid var(--ink2)}
::-webkit-scrollbar-thumb:hover{background:rgba(63,224,208,.5)}

/* == 04 layout ============================================================= */
.container{max-width:1180px}
#headWrapper,.pageWrapper,#footWrapper{background:transparent !important}

/* == 05 header ============================================================= */
/* The whole wrapper pins, not just .top-head. A sticky element is clipped by
   its own containing block, and .top-head's parent (#headWrapper) is only
   ~95px tall — sticking the child alone unpins it after 95px of scroll. */
#headWrapper{position:sticky;top:0;z-index:200}

.top-bar{
  background:rgba(4,12,22,.72) !important;
  border-bottom:1px solid var(--hair);
  font-size:12.5px;
}
.top-bar a{color:var(--muted) !important;transition:color .2s var(--ease)}
.top-bar a:hover{color:var(--cyan) !important}
.top-bar i{color:var(--cyan);opacity:.85}

/* main bar — glassy. Pinning is handled by #headWrapper above.
   Selector must match the vendor's `header.top-head` (0,1,1); a bare
   `.top-head` (0,1,0) loses to it and the border/position are dropped. */
.top-head,
header.top-head{
  background:rgba(5,15,27,.82) !important;
  -webkit-backdrop-filter:saturate(150%) blur(14px);
  backdrop-filter:saturate(150%) blur(14px);
  border-bottom:1px solid var(--hair);
  position:relative;z-index:60;
  box-shadow:0 10px 30px -24px #000;
}
.top-head .logo img{max-height:46px;width:auto}
/* brand mark — square SVG badge, no wordmark */
.top-head .logo{display:flex;align-items:center}
.brand-mark{display:inline-flex;align-items:center;line-height:0;
  transition:transform .28s var(--ease-spring),filter .28s var(--ease)}
.brand-mark img{width:44px;height:44px;display:block}
.brand-mark:hover{transform:translateY(-1px) scale(1.04);
  filter:drop-shadow(0 6px 16px rgba(63,224,208,.35))}
.brand-mark:focus-visible{outline:2px solid var(--cyan);outline-offset:4px;border-radius:14px}

/* nav */
.top-nav>ul>li>a{
  color:var(--soft) !important;
  font-family:var(--f-fa);font-size:14px;font-weight:600;
  position:relative;transition:color .22s var(--ease);
}
.top-nav>ul>li>a:hover,.top-nav>ul>li.active>a{color:var(--cyan) !important}
.top-nav>ul>li>a i{color:var(--cyan);opacity:.8;transition:opacity .22s var(--ease)}
.top-nav>ul>li>a:hover i{opacity:1}
/* underline that grows from the centre on hover */
.top-nav>ul>li>a::after{
  content:'';position:absolute;left:50%;right:50%;bottom:6px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--cyan),var(--violet));
  transition:left .28s var(--ease),right .28s var(--ease);
}
.top-nav>ul>li>a:hover::after,.top-nav>ul>li.active>a::after{left:12%;right:12%}

/* dropdown / mega menu panels */
.top-nav ul ul,.mega-menu .mega-menu-content,.top-nav .sub-menu{
  background:var(--sheet) !important;
  border:1px solid var(--hair) !important;
  border-radius:var(--radius-sm);
  box-shadow:var(--shadow);
  overflow:hidden;
}
.top-nav ul ul li a{
  color:var(--soft) !important;border-color:var(--hair) !important;
  transition:background .2s var(--ease),color .2s var(--ease),padding .2s var(--ease);
}
.top-nav ul ul li a:hover{
  background:var(--hi) !important;color:var(--cyan) !important;
}

/* search — the toggle itself is an <a> the vendor paints #eee, so it needs
   its own rule; styling only the .top-search wrapper leaves a light chip. */
.search-btn,.top-search,.top-search>a{background:var(--hi) !important;border-color:var(--hair) !important}
.search-btn i,.top-search i,.top-search>a span{color:var(--cyan)}
.top-search>a{transition:background .22s var(--ease)}
.top-search>a:hover{background:rgba(63,224,208,.14) !important}
.top-search input{
  background:var(--ink2) !important;border:1px solid var(--hair) !important;
  color:var(--paper) !important;
}

/* mobile menu.
   .mobile-menu is only the class on the duplicated <li>s Header.php hides at
   desktop width — it is NOT the drawer. The actual off-canvas panel is
   .responsive-nav with a .menuBtn toggle, and both shipped in the vendor's
   orange (#E7512F): a full-height 234px slab plus white-on-orange labels at
   3.7:1. Theming only .mobile-menu left all of that untouched. */
.mobile-menu,.mobile-menu ul,.mobile-menu li{
  background:var(--sheet) !important;border-color:var(--hair) !important;
}
.mobile-menu a{color:var(--soft) !important}
.mobile-menu a:hover{color:var(--cyan) !important;background:var(--hi) !important}

.menuBtn{
  background:rgba(11,33,54,.92) !important;
  border:1px solid var(--hair) !important;
  border-radius:var(--radius-sm);
  color:var(--cyan) !important;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
}
.menuBtn:hover{background:rgba(63,224,208,.14) !important;border-color:var(--hair2) !important}

.responsive-nav{
  background:linear-gradient(180deg,var(--sheet2) 0%,var(--ink) 100%) !important;
  border-inline-start:1px solid var(--hair);
  box-shadow:0 0 60px -10px #000;
}
.responsive-nav h3{
  color:var(--paper) !important;font-weight:800;font-size:15px;
  border-bottom:1px solid var(--hair);padding-bottom:10px;
}
.responsive-nav ul,.responsive-nav li{background:transparent !important;border-color:var(--hair) !important}
.responsive-nav li{border-bottom:1px solid var(--hair)}
.responsive-nav a{
  color:var(--soft) !important;
  transition:color .2s var(--ease),background .2s var(--ease),padding-inline-start .2s var(--ease);
}
.responsive-nav a:hover,.responsive-nav a:focus-visible{
  color:var(--cyan) !important;background:rgba(63,224,208,.08) !important;
}
.responsive-nav i{color:var(--cyan);opacity:.85}

/* == 06 sections / widgets ================================================= */
/* Neutralise the per-widget backgrounds the CMS emits — both the flat fills
   and the raster tiles. The tiles were previously left in place, which only
   looked survivable because the even-band rule below uses the `background`
   shorthand and happened to reset background-image on every other section.
   The odd ones still tiled: تابلوی اعلانات and مصاحبه با رتبه های برتر each
   repeated a ~0.98-luminance opaque bitmap across the band, and معرفی کتاب a
   dark 12%-alpha texture. Rhythm now comes from the gradient bands and the
   ambient wash below, so nothing depends on a CMS upload. */
.sectionWrapper,
[class*="widget"].sectionWrapper,
.sectionWrapper[class*="widget"]{
  background-color:transparent !important;
  background-image:none !important;
  color:var(--paper) !important;
  position:relative;
}
.sectionWrapper{padding:clamp(34px,5vw,60px) 0}
/* alternating bands so long pages keep rhythm without hard edges */
.sectionWrapper:nth-of-type(even){
  background:linear-gradient(180deg,transparent,rgba(11,33,54,.45) 12%,rgba(11,33,54,.45) 88%,transparent) !important;
}

/* Ambient accent replacing the raster tiles: one soft radial wash per band,
   alternating corner and hue, echoing the landing page's glows. Purely
   decorative — sits behind content and never takes pointer events. */
.sectionWrapper::before{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(58% 118% at 88% 0%,rgba(63,224,208,.07),transparent 68%);
}
.sectionWrapper:nth-of-type(even)::before{
  background:radial-gradient(58% 118% at 12% 100%,rgba(155,135,245,.07),transparent 68%);
}
.sectionWrapper>*{position:relative;z-index:1}
.main-bg{background:var(--sheet) !important;color:var(--paper) !important}

/* page title band (inner pages + webinars) */
.page-title,.title-1{
  background:linear-gradient(160deg,var(--sheet2),var(--sheet) 55%,#081B2D) !important;
  border-bottom:1px solid var(--hair);
  color:var(--paper) !important;
  padding:clamp(30px,5vw,54px) 0;
}
.page-title h1,.title-1 h1{color:var(--paper) !important;font-weight:900;letter-spacing:-.01em}
.breadcrumbs{
  background:rgba(5,15,27,.5) !important;border:1px solid var(--hair);
  border-radius:999px;padding:6px 16px;display:inline-block;font-size:12.5px;
}
.breadcrumbs a{color:var(--muted) !important}
.breadcrumbs a:hover{color:var(--cyan) !important}
.line-separate{color:var(--muted);opacity:.6}

/* == 07 typography ========================================================= */
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6{
  color:var(--paper) !important;font-family:var(--f-fa);font-weight:800;line-height:1.55;
}
.block-head{
  color:var(--paper) !important;
  font-size:clamp(17px,2vw,22px);font-weight:800;
  position:relative;padding-bottom:12px;margin-bottom:22px;
}
.block-head i{color:var(--cyan);margin-inline-end:8px}
/* accent rule under every section heading */
.block-head::after{
  content:'';position:absolute;bottom:0;inset-inline-start:0;
  width:54px;height:3px;border-radius:3px;
  background:linear-gradient(90deg,var(--cyan),var(--violet));
}
.block-head.center::after{inset-inline-start:50%;transform:translateX(50%)}
.text-truncate{color:var(--soft) !important}

/* Years of CMS content carry inline colours authored against the old light
   theme — #000000, #800000, #333399, #0000ff — landing between 1.1:1 and
   2.2:1 on the dark page. Some elements inherit a bad colour from an ancestor
   span rather than declaring one, so matching [style*="color"] alone misses
   them; every descendant is forced to inherit from the themed container
   instead. Links are re-accented afterwards so they stay distinguishable. */
.post-content,.comment-content,.entry,.single-content{color:var(--soft) !important}
.post-content *:not(a),
.comment-content *:not(a),
.entry *:not(a),
.single-content *:not(a){color:inherit !important;background-color:transparent !important}
.post-content strong,.comment-content strong,
.entry strong,.single-content strong{color:var(--paper) !important}
.post-content a,.comment-content a,.entry a,.single-content a,
#contentWrapper a[style*="color"]{color:var(--cyan) !important}
.post-content a:hover,.comment-content a:hover,.entry a:hover,.single-content a:hover,
#contentWrapper a[style*="color"]:hover{color:var(--amber) !important}

/* breadcrumb bar — vendor paints .main-bg a mid grey (#777) */
.breadcrumbs,.breadcrumbs.main-bg{
  background:rgba(255,255,255,.04) !important;
  border:1px solid var(--hair);
  border-radius:999px;
  padding:6px 16px;
}
.breadcrumbs a{color:var(--soft) !important}
.breadcrumbs a:hover{color:var(--cyan) !important}
.breadcrumbs .line-separate{color:var(--muted) !important;opacity:.7}

/* == 08 cards / post items ================================================= */
.post-item,.small_items,.news-item,.blog-item{
  background:linear-gradient(158deg,var(--sheet2) 0%,var(--sheet) 46%,#081B2D 100%) !important;
  border:1px solid var(--hair) !important;
  border-radius:var(--radius);
  padding:16px 18px;
  color:var(--soft) !important;
  transition:transform .3s var(--ease),border-color .3s var(--ease),box-shadow .3s var(--ease);
}
.post-item:hover,.small_items:hover,.news-item:hover,.blog-item:hover{
  transform:translateY(-3px);
  border-color:var(--hair2) !important;
  box-shadow:var(--shadow);
}
.post-item a,.small_items a{color:var(--paper) !important}
.post-item a:hover,.small_items a:hover{color:var(--cyan) !important}
.post-item .h3,.post-item h3{font-size:15px;font-weight:700;line-height:1.8}
.post-item i,.small_items i{color:var(--cyan);opacity:.9}
.post-item img,.small_items img{border-radius:var(--radius-sm)}

/* thumbnails / media boxes */
.thumb,.image-box,.post-thumb{border-radius:var(--radius-sm);overflow:hidden;background:var(--hi)}

/* service / book cards — the vendor paints .box-top a 61% white panel, which
   stayed as a bright slab over the dark page. */
.box-top{
  background:linear-gradient(158deg,var(--sheet2) 0%,var(--sheet) 46%,#081B2D 100%) !important;
  border:1px solid var(--hair);
  border-radius:var(--radius);
  overflow:hidden;
  transition:transform .3s var(--ease),border-color .3s var(--ease),box-shadow .3s var(--ease);
}
.box-top:hover{transform:translateY(-3px);border-color:var(--hair2);box-shadow:var(--shadow)}
.box-top h1,.box-top h2,.box-top h3,.box-top h4,.box-top a{color:var(--paper) !important}
.box-top p,.box-top .text{color:var(--soft) !important}

/* "بیشتر بخوانید" — shipped solid white */
.more-btn{
  background:transparent !important;
  border:1px solid var(--hair2) !important;
  color:var(--cyan) !important;
  border-radius:999px;
  transition:background .25s var(--ease),color .25s var(--ease),box-shadow .25s var(--ease);
}
.more-btn:hover{
  background:rgba(63,224,208,.12) !important;
  color:var(--paper) !important;
  box-shadow:0 14px 30px -18px rgba(63,224,208,.5);
}

/* tab strips — light grey rows with a vendor-orange active pill */
.tabs ul li,.tabs>ul>li{
  background:rgba(255,255,255,.03) !important;
  border:1px solid var(--hair) !important;
  border-radius:var(--radius-sm);
  transition:background .22s var(--ease),border-color .22s var(--ease);
}
.tabs ul li a{color:var(--soft) !important}
.tabs ul li:hover{background:rgba(63,224,208,.08) !important;border-color:var(--hair2) !important}
.tabs ul li.active,.tabs>ul>li.active{
  background:linear-gradient(90deg,rgba(63,224,208,.18),rgba(155,135,245,.18)) !important;
  border-color:var(--hair2) !important;
}
.tabs ul li.active a{color:var(--paper) !important}

/* comment avatars sit on a white square until the image paints */
.comment-avatar{background:var(--hi) !important;border-radius:50%}

/* slider arrows ship solid white */
.tp-arr-allwrapper,.tparrows{
  background:rgba(8,24,40,.72) !important;
  border:1px solid var(--hair);
  border-radius:var(--radius-sm);
}

/* == 09 buttons ============================================================ */
.btn,button,input[type="submit"],input[type="button"]{
  font-family:var(--f-fa) !important;font-weight:700;
  border-radius:12px !important;
  border:1px solid var(--hair2) !important;
  background:rgba(63,224,208,.10) !important;
  color:var(--paper) !important;
  transition:transform .25s var(--ease),background .25s var(--ease),
             border-color .25s var(--ease),box-shadow .25s var(--ease),color .25s var(--ease);
}
.btn:hover,button:hover,input[type="submit"]:hover,input[type="button"]:hover{
  background:rgba(63,224,208,.18) !important;
  border-color:var(--cyan) !important;
  color:var(--cyan) !important;
  transform:translateY(-2px);
  box-shadow:0 16px 34px -20px rgba(63,224,208,.6);
}
.btn:active,button:active{transform:translateY(0)}
/* the vendor theme's skewed buttons — unskew, they fight this design */
.btn.skew-15,.skew-15{transform:none !important}
.skew15,.skew25{transform:none !important;display:inline-block}
.btn-large{padding:11px 22px !important;font-size:14px}
.wit-btn{background:rgba(255,255,255,.06) !important}

/* == 10 comments =========================================================== */
.comment{
  background:var(--sheet) !important;
  border:1px solid var(--hair) !important;
  border-radius:var(--radius);
  padding:16px 18px;margin-bottom:14px;
  transition:border-color .3s var(--ease);
}
.comment:hover{border-color:var(--hair2) !important}
.comment-avatar img{border-radius:50%;border:2px solid var(--hair2)}
.comment-content{color:var(--soft) !important}
.comment-author,.author-name{color:var(--paper) !important;font-weight:700}
.comment-date{color:var(--muted) !important;font-family:var(--f-mono);font-size:11.5px}
.comment-reply a,.reply a{color:var(--cyan) !important;font-weight:600}
.comment-reply a:hover,.reply a:hover{color:var(--amber) !important}
.comment .comment{background:var(--ink2) !important;margin-inline-start:22px}

/* == 11 forms ============================================================== */
input[type="text"],input[type="email"],input[type="password"],input[type="number"],
input[type="search"],input[type="tel"],input[type="url"],textarea,select{
  background:var(--ink2) !important;
  border:1px solid var(--hair) !important;
  color:var(--paper) !important;
  border-radius:var(--radius-sm) !important;
  font-family:var(--f-fa) !important;
  padding:10px 14px;
  transition:border-color .22s var(--ease),box-shadow .22s var(--ease),background .22s var(--ease);
}
input::placeholder,textarea::placeholder{color:var(--muted);opacity:1}
input:focus,textarea:focus,select:focus{
  border-color:var(--cyan) !important;
  background:var(--hi) !important;
  box-shadow:0 0 0 3px rgba(63,224,208,.14);
  outline:none;
}
label{color:var(--soft)}
select option{background:var(--sheet);color:var(--paper)}

/* == 12 tables ============================================================= */
table{border-color:var(--hair) !important;color:var(--soft);width:100%}
th{
  background:var(--hi) !important;color:var(--paper) !important;
  border-color:var(--hair) !important;font-weight:700;
}
td{border-color:var(--hair) !important}
tr:nth-child(even) td{background:rgba(11,33,54,.4)}
/* numeric columns line up when digits share a width */
td,th{font-variant-numeric:tabular-nums}

/* == 13 footer ============================================================= */
#footWrapper{
  background:linear-gradient(180deg,transparent,#04101D 30%) !important;
  border-top:1px solid var(--hair);
  margin-top:40px;
}
#footWrapper .block-head{font-size:15px}
#footWrapper a{color:var(--soft) !important}
#footWrapper a:hover{color:var(--cyan) !important}
.footer-menu li{
  border-bottom:1px solid var(--hair);
  transition:padding-inline-start .22s var(--ease);
}
.footer-menu li:last-child{border-bottom:none}
.footer-menu li:hover{padding-inline-start:6px}
.footer-menu i{color:var(--cyan);opacity:.8;margin-inline-end:6px}
.footer-bottom,.copyright{
  background:#030B14 !important;border-top:1px solid var(--hair);
  color:var(--muted) !important;font-size:12px;
}
.footer-bottom a,.copyright a{color:var(--muted) !important}
.footer-bottom a:hover,.copyright a:hover{color:var(--cyan) !important}

/* back-to-top */
#toTop,.to-top,.scrollup{
  background:var(--sheet) !important;border:1px solid var(--hair2) !important;
  color:var(--cyan) !important;border-radius:12px !important;
  transition:transform .25s var(--ease),background .25s var(--ease);
}
#toTop:hover,.to-top:hover,.scrollup:hover{transform:translateY(-3px);background:var(--hi) !important}

/* == 14 motion ============================================================= */
/* The vendor theme marks animatable blocks with .fx + data-animate and adds
   .animated when they scroll into view. Where that never fires, elements must
   still be visible — so the reveal is opt-in via .rv (added by theme-dark.js)
   and never hides content on its own. */
.rv{opacity:0;transform:translateY(14px)}
.rv.rv-in{
  opacity:1;transform:none;
  transition:opacity .55s var(--ease),transform .55s var(--ease);
}
/* stagger children of a revealed row */
.rv-stagger>*{opacity:0;transform:translateY(12px)}
.rv-stagger.rv-in>*{opacity:1;transform:none;transition:opacity .5s var(--ease),transform .5s var(--ease)}
.rv-stagger.rv-in>*:nth-child(1){transition-delay:.04s}
.rv-stagger.rv-in>*:nth-child(2){transition-delay:.10s}
.rv-stagger.rv-in>*:nth-child(3){transition-delay:.16s}
.rv-stagger.rv-in>*:nth-child(4){transition-delay:.22s}
.rv-stagger.rv-in>*:nth-child(5){transition-delay:.28s}
.rv-stagger.rv-in>*:nth-child(6){transition-delay:.34s}
.rv-stagger.rv-in>*:nth-child(n+7){transition-delay:.40s}

/* == 15 responsive + a11y ================================================== */
@media (max-width:900px){
  .top-head{position:static}          /* free the viewport on small screens */
  .top-head .logo img{max-height:38px}
  .sectionWrapper{padding:26px 0}
}
@media (max-width:560px){
  body{font-size:14.5px}
  .post-item,.comment{padding:13px 14px}
  .comment .comment{margin-inline-start:10px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important;
  }
  .rv,.rv-stagger>*{opacity:1 !important;transform:none !important}
}

/* printing — drop the dark ink so it doesn't waste toner */
@media print{
  body::before{display:none}
  body{background:#fff !important;color:#000 !important}
}
