/*
Theme Name: Book Katta
Theme URI: https://bookkatta.example
Author: Book Katta
Author URI: https://bookkatta.example
Description: मराठी वाचकांसाठी बांधलेली पुस्तक-परीक्षणाची थीम. मूड आणि वेगावर आधारित फिल्टर, शैलीनुसार शोध, निकालाचा शिक्का, डार्क मोड आणि तीन भाषांचा सपोर्ट. A modern book review theme built for Marathi readers, with mood and pace filters, a letterpress verdict stamp, dark mode and three-language support.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: book-katta
Tags: blog, book-review, custom-colors, dark-mode, translation-ready, custom-menu, featured-images, threaded-comments, rtl-language-support
*/

/* =========================================================================
   1. DESIGN TOKENS
   Palette: शाई (ink), कागद (paper), कट्टा (bottle green), हळद (turmeric)
   ========================================================================= */

:root {
  /* Brand */
  --katta: #0E4034;
  --katta-deep: #08281F;
  --katta-soft: #E3EBE5;
  --halad: #F5A623;
  --halad-deep: #C97F0C;
  --shendri: #C2402D;

  /* Semantic surfaces */
  --c-bg: #EFEFE7;
  --c-bg-2: #FAFAF5;
  --c-bg-3: #E5E6DC;
  --c-brand: var(--katta);
  --c-brand-2: var(--katta-deep);
  --c-brand-tint: var(--katta-soft);
  --c-accent: var(--halad);
  --c-accent-2: var(--halad-deep);
  --c-accent-ink: #1C1403;

  /* Text */
  --c-text: #14201C;
  --c-text-2: #5C6A63;
  --c-text-3: #8A968F;
  --c-on-brand: #F2F5F1;
  --c-on-brand-2: #9DB5A9;

  /* Lines */
  --c-line: #D6D8CC;
  --c-line-2: #C2C6B7;
  --c-line-strong: #14201C;

  /* Shadows */
  --sh-xs: 0 1px 2px rgba(20, 32, 28, .06);
  --sh-sm: 0 2px 6px rgba(20, 32, 28, .07), 0 1px 2px rgba(20, 32, 28, .05);
  --sh-md: 0 6px 18px -6px rgba(20, 32, 28, .16), 0 2px 6px -2px rgba(20, 32, 28, .08);
  --sh-lg: 0 22px 46px -18px rgba(20, 32, 28, .28), 0 8px 18px -10px rgba(20, 32, 28, .14);
  --sh-xl: 0 40px 80px -28px rgba(8, 40, 31, .42), 0 12px 28px -14px rgba(20, 32, 28, .2);
  --sh-book: 14px 16px 0 -2px rgba(14, 64, 52, .14), 26px 34px 60px -20px rgba(8, 40, 31, .45);
  --sh-glow: 0 0 0 4px rgba(245, 166, 35, .28);

  /* Type */
  --f-display: "Rozha One", "Tiro Devanagari Marathi", Georgia, serif;
  --f-serif: "Tiro Devanagari Marathi", "Noto Serif Devanagari", Georgia, serif;
  --f-sans: "Mukta", "Noto Sans Devanagari", -apple-system, "Segoe UI", sans-serif;

  --t-xs: .75rem;
  --t-sm: .875rem;
  --t-base: 1.0625rem;
  --t-md: 1.1875rem;
  --t-lg: clamp(1.25rem, 1.1rem + .6vw, 1.5rem);
  --t-xl: clamp(1.5rem, 1.25rem + 1.1vw, 2.1rem);
  --t-2xl: clamp(1.9rem, 1.4rem + 2.1vw, 3rem);
  --t-3xl: clamp(2.5rem, 1.6rem + 3.8vw, 4.6rem);
  --t-4xl: clamp(3rem, 1.6rem + 5.6vw, 6.2rem);

  /* Rhythm */
  --r-xs: 4px;
  --r-sm: 8px;
  --r: 14px;
  --r-lg: 22px;
  --r-xl: 32px;
  --r-full: 999px;

  --wrap: 1240px;
  --wrap-narrow: 760px;
  --gap: clamp(1rem, .6rem + 1.4vw, 1.75rem);
  --sec: clamp(3.5rem, 2rem + 5vw, 7rem);

  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --dur: .45s;

  --header-h: 74px;
}

[data-theme="dark"] {
  --c-bg: #0C1310;
  --c-bg-2: #14201B;
  --c-bg-3: #1B2A24;
  --c-brand: #1B7A63;
  --c-brand-2: #0E4034;
  --c-brand-tint: #16302A;
  --c-accent: #FFB937;
  --c-accent-2: #F5A623;
  --c-accent-ink: #1C1403;

  --c-text: #EDEFE8;
  --c-text-2: #9FAEA6;
  --c-text-3: #75857C;
  --c-on-brand: #F2F5F1;
  --c-on-brand-2: #A8C4B7;

  --c-line: #253630;
  --c-line-2: #32473F;
  --c-line-strong: #466156;

  --katta-soft: #16302A;

  --sh-xs: 0 1px 2px rgba(0, 0, 0, .4);
  --sh-sm: 0 2px 6px rgba(0, 0, 0, .45);
  --sh-md: 0 8px 20px -8px rgba(0, 0, 0, .6);
  --sh-lg: 0 24px 48px -20px rgba(0, 0, 0, .75);
  --sh-xl: 0 44px 84px -30px rgba(0, 0, 0, .85);
  --sh-book: 14px 16px 0 -2px rgba(255, 185, 55, .1), 26px 34px 60px -20px rgba(0, 0, 0, .8);
  --sh-glow: 0 0 0 4px rgba(255, 185, 55, .25);
}

/* =========================================================================
   2. RESET + BASE
   ========================================================================= */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 20px);
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--f-sans);
  font-size: var(--t-base);
  line-height: 1.68;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  transition: background-color .3s var(--ease), color .3s var(--ease);
}

/* Faint paper grain. Keeps flat surfaces from looking like plastic. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: .035;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}
[data-theme="dark"] body::before { mix-blend-mode: screen; opacity: .05; }

img, svg, video { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }

h1, h2, h3, h4, h5 {
  font-family: var(--f-serif);
  font-weight: 400;
  line-height: 1.18;
  letter-spacing: -.005em;
  text-wrap: balance;
}

a { color: inherit; text-decoration: none; }

p { text-wrap: pretty; }

::selection { background: var(--c-accent); color: var(--c-accent-ink); }

:focus-visible {
  outline: 3px solid var(--c-accent);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}

.skip-link {
  position: absolute;
  left: 50%;
  top: -100px;
  transform: translateX(-50%);
  z-index: 10000;
  background: var(--c-brand);
  color: var(--c-on-brand);
  padding: 12px 24px;
  border-radius: 0 0 var(--r) var(--r);
  font-weight: 600;
  transition: top .25s var(--ease);
}
.skip-link:focus { top: 0; }

.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* =========================================================================
   3. LAYOUT PRIMITIVES
   ========================================================================= */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: clamp(1.1rem, .5rem + 2.2vw, 2.5rem);
}
.wrap--narrow { max-width: var(--wrap-narrow); }

.section { padding-block: var(--sec); }
.section--tight { padding-block: calc(var(--sec) * .6); }

.sec-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-bottom: clamp(1.75rem, 1rem + 2vw, 3rem);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-family: var(--f-sans);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--c-text-2);
  margin-bottom: .85rem;
}
.eyebrow::before {
  content: "";
  width: 26px;
  height: 2px;
  background: var(--c-accent);
  flex: none;
}

.sec-title {
  font-size: var(--t-2xl);
  letter-spacing: -.015em;
}
.sec-sub {
  color: var(--c-text-2);
  max-width: 46ch;
  margin-top: .7rem;
  font-size: var(--t-md);
}

/* =========================================================================
   4. BUTTONS + CHIPS
   ========================================================================= */

.btn {
  --btn-bg: var(--c-brand);
  --btn-fg: var(--c-on-brand);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: .85rem 1.6rem;
  border-radius: var(--r-full);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--f-sans);
  font-weight: 700;
  font-size: var(--t-sm);
  letter-spacing: .01em;
  line-height: 1;
  border: 2px solid transparent;
  box-shadow: var(--sh-sm);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), background-color .25s var(--ease);
  will-change: transform;
}
.btn:hover { transform: translateY(-3px); box-shadow: var(--sh-md); }
.btn:active { transform: translateY(-1px); }
.btn svg { width: 18px; height: 18px; flex: none; }

.btn--accent { --btn-bg: var(--c-accent); --btn-fg: var(--c-accent-ink); }
.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--c-text);
  border-color: var(--c-line-2);
  box-shadow: none;
}
.btn--ghost:hover { border-color: var(--c-text); background: var(--c-bg-2); }
.btn--on-dark {
  --btn-bg: transparent;
  --btn-fg: var(--c-on-brand);
  border-color: rgba(255, 255, 255, .28);
  box-shadow: none;
}
.btn--on-dark:hover { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .5); }
.btn--lg { padding: 1.05rem 2rem; font-size: var(--t-base); }
.btn--block { width: 100%; }

/* Link with an underline that draws itself */
.link-draw {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-weight: 700;
  font-size: var(--t-sm);
  color: var(--c-text);
  position: relative;
  padding-bottom: 3px;
}
.link-draw::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 2px;
  background: var(--c-accent);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .4s var(--ease);
}
.link-draw:hover::after { transform: scaleX(1); transform-origin: left; }
.link-draw svg { width: 15px; height: 15px; transition: transform .3s var(--ease); }
.link-draw:hover svg { transform: translateX(4px); }

.chip {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .42rem .9rem;
  border-radius: var(--r-full);
  border: 1.5px solid var(--c-line);
  background: var(--c-bg-2);
  font-size: var(--t-xs);
  font-weight: 600;
  color: var(--c-text-2);
  line-height: 1.4;
  transition: all .22s var(--ease);
  white-space: nowrap;
}
.chip:hover { border-color: var(--c-brand); color: var(--c-brand); transform: translateY(-2px); }
.chip.is-active,
.chip[aria-pressed="true"] {
  background: var(--c-brand);
  border-color: var(--c-brand);
  color: var(--c-on-brand);
}
.chip--accent.is-active { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-accent-ink); }

/* =========================================================================
   5. THE SIGNATURE: निकालाचा शिक्का (the verdict stamp)
   A letterpress roundel, hand-slapped on every review.
   ========================================================================= */

.stamp {
  --stamp-ink: var(--katta);
  position: relative;
  width: var(--stamp-size, 104px);
  height: var(--stamp-size, 104px);
  display: grid;
  place-items: center;
  color: var(--stamp-ink);
  transform: rotate(-8deg);
  flex: none;
  user-select: none;
}
.stamp::before,
.stamp::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2.5px solid currentColor;
}
.stamp::after {
  inset: 6px;
  border-width: 1px;
  opacity: .6;
}
.stamp__inner {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  text-align: center;
  line-height: 1;
  padding: 4px;
}
.stamp__word {
  font-family: var(--f-display);
  font-size: calc(var(--stamp-size, 104px) * .215);
  letter-spacing: -.01em;
  white-space: nowrap;
}
.stamp__score {
  font-family: var(--f-sans);
  font-weight: 700;
  font-size: calc(var(--stamp-size, 104px) * .11);
  letter-spacing: .12em;
  margin-top: .3em;
  opacity: .75;
}
.stamp__arc {
  position: absolute;
  inset: 9px;
  animation: stamp-spin 34s linear infinite;
}
.stamp__arc text {
  font-family: var(--f-sans);
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: .34em;
  fill: currentColor;
  opacity: .55;
}
@keyframes stamp-spin { to { transform: rotate(360deg); } }

/* Verdict inks */
.stamp--5 { --stamp-ink: var(--shendri); }
.stamp--4 { --stamp-ink: var(--katta); }
.stamp--3 { --stamp-ink: var(--halad-deep); }
.stamp--2 { --stamp-ink: var(--c-text-2); }
.stamp--1 { --stamp-ink: var(--c-text-3); }
[data-theme="dark"] .stamp--5 { --stamp-ink: #E8664F; }
[data-theme="dark"] .stamp--4 { --stamp-ink: #45C4A4; }
[data-theme="dark"] .stamp--3 { --stamp-ink: var(--halad); }

.stamp--sm { --stamp-size: 64px; }
.stamp--sm .stamp__arc { display: none; }
.stamp--xs { --stamp-size: 52px; }
.stamp--xs .stamp__arc { display: none; }
.stamp--xs .stamp__score { display: none; }
.stamp--lg { --stamp-size: 138px; }

/* Small star row, used where the stamp is too much */
.stars { display: inline-flex; gap: 2px; color: var(--c-accent-2); }
.stars svg { width: 15px; height: 15px; }
.stars .is-empty { color: var(--c-line-2); }

/* =========================================================================
   6. HEADER
   ========================================================================= */

.site-header {
  position: sticky;
  top: 0;
  z-index: 200;
  background: color-mix(in srgb, var(--c-bg) 82%, transparent);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease), background-color .3s var(--ease);
}
.site-header.is-stuck {
  border-bottom-color: var(--c-line);
  box-shadow: 0 6px 24px -18px rgba(20, 32, 28, .5);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: clamp(.75rem, 2vw, 2rem);
  min-height: var(--header-h);
}

/* Wordmark */
.brand { display: flex; align-items: center; gap: .6rem; flex: none; }
.brand__mark {
  width: 38px; height: 38px;
  border-radius: 10px;
  background: var(--c-brand);
  color: var(--c-accent);
  display: grid;
  place-items: center;
  font-family: var(--f-display);
  font-size: 1.35rem;
  line-height: 1;
  padding-bottom: 3px;
  box-shadow: var(--sh-sm);
  transition: transform .4s var(--ease);
}
.brand:hover .brand__mark { transform: rotate(-7deg) scale(1.06); }
.brand__name {
  font-family: var(--f-display);
  font-size: 1.6rem;
  line-height: 1;
  letter-spacing: -.01em;
  padding-bottom: 4px;
}
.brand__name em {
  font-style: normal;
  color: var(--c-brand);
}
[data-theme="dark"] .brand__name em { color: var(--c-accent); }

/* Nav */
.nav { margin-inline-start: auto; }
.nav ul { list-style: none; display: flex; align-items: center; gap: .3rem; padding: 0; margin: 0; }
.nav li { position: relative; }
.nav a {
  display: block;
  padding: .55rem .85rem;
  border-radius: var(--r-full);
  font-family: var(--f-sans);
  font-weight: 600;
  font-size: var(--t-sm);
  color: var(--c-text-2);
  transition: color .2s var(--ease), background-color .2s var(--ease);
  white-space: nowrap;
}
.nav a:hover,
.nav .current-menu-item > a,
.nav .current_page_item > a { color: var(--c-text); background: var(--c-bg-3); }

/* Dropdowns */
.nav .sub-menu {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  min-width: 210px;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: .5rem;
  background: var(--c-bg-2);
  border: 1px solid var(--c-line);
  border-radius: var(--r);
  box-shadow: var(--sh-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: all .25s var(--ease);
}
.nav li:hover > .sub-menu,
.nav li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.nav .sub-menu a { border-radius: var(--r-sm); }

.header-tools { display: flex; align-items: center; gap: .35rem; flex: none; }

.icon-btn {
  width: 40px; height: 40px;
  display: grid;
  place-items: center;
  border-radius: var(--r-full);
  color: var(--c-text-2);
  border: 1.5px solid transparent;
  transition: all .22s var(--ease);
}
.icon-btn:hover { background: var(--c-bg-3); color: var(--c-text); }
.icon-btn svg { width: 19px; height: 19px; }

/* Language switcher */
.lang { position: relative; }
.lang__btn {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  height: 40px;
  padding: 0 .8rem;
  border-radius: var(--r-full);
  border: 1.5px solid var(--c-line);
  font-size: var(--t-xs);
  font-weight: 700;
  color: var(--c-text-2);
  transition: all .22s var(--ease);
}
.lang__btn:hover { border-color: var(--c-text); color: var(--c-text); }
.lang__btn svg { width: 15px; height: 15px; }
.lang__menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 150px;
  padding: .4rem;
  list-style: none;
  margin: 0;
  background: var(--c-bg-2);
  border: 1px solid var(--c-line);
  border-radius: var(--r);
  box-shadow: var(--sh-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: all .25s var(--ease);
  z-index: 30;
}
.lang.is-open .lang__menu { opacity: 1; visibility: visible; transform: translateY(0); }
.lang__menu a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .5rem .7rem;
  border-radius: var(--r-sm);
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--c-text-2);
}
.lang__menu a:hover { background: var(--c-bg-3); color: var(--c-text); }
.lang__menu .is-current { color: var(--c-brand); }
.lang__menu .is-current::after { content: "✓"; font-weight: 700; }
[data-theme="dark"] .lang__menu .is-current { color: var(--c-accent); }

/* Burger */
.burger { display: none; }
.burger span {
  display: block;
  width: 20px; height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform .35s var(--ease), opacity .2s var(--ease);
}
.burger span + span { margin-top: 5px; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile drawer */
.drawer {
  position: fixed;
  inset: var(--header-h) 0 0 0;
  z-index: 190;
  background: var(--c-bg);
  padding: 2rem clamp(1.1rem, 5vw, 2rem) 3rem;
  overflow-y: auto;
  transform: translateY(-12px);
  opacity: 0;
  visibility: hidden;
  transition: all .35s var(--ease);
}
.drawer.is-open { transform: translateY(0); opacity: 1; visibility: visible; }
.drawer ul { list-style: none; padding: 0; margin: 0; }
.drawer > ul > li { border-bottom: 1px solid var(--c-line); }
.drawer a {
  display: block;
  padding: 1rem 0;
  font-family: var(--f-serif);
  font-size: 1.5rem;
  color: var(--c-text);
}
.drawer .sub-menu { padding-bottom: .6rem; }
.drawer .sub-menu a { font-family: var(--f-sans); font-size: 1rem; padding: .5rem 0 .5rem 1.2rem; color: var(--c-text-2); }
.drawer__foot { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: .6rem; }

/* Search overlay */
.searchbox {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  place-items: start center;
  padding-top: 14vh;
  background: color-mix(in srgb, var(--c-bg) 92%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s var(--ease), visibility .3s;
}
.searchbox.is-open { opacity: 1; visibility: visible; }
.searchbox__panel {
  width: min(620px, 92vw);
  transform: translateY(-16px) scale(.98);
  transition: transform .45s var(--ease);
}
.searchbox.is-open .searchbox__panel { transform: none; }
.searchbox__close { position: absolute; top: 1.5rem; right: 1.5rem; }
.searchbox p { margin-top: 1rem; color: var(--c-text-3); font-size: var(--t-sm); }

/* Search form */
.searchform { display: flex; position: relative; }
.searchform input[type="search"] {
  flex: 1;
  min-width: 0;
  padding: 1.05rem 3.6rem 1.05rem 1.4rem;
  border-radius: var(--r-full);
  border: 2px solid var(--c-line-2);
  background: var(--c-bg-2);
  font-size: var(--t-md);
  font-family: var(--f-serif);
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.searchform input[type="search"]:focus {
  outline: none;
  border-color: var(--c-brand);
  box-shadow: var(--sh-glow);
}
.searchform input::placeholder { color: var(--c-text-3); }
.searchform button {
  position: absolute;
  right: 6px; top: 50%;
  transform: translateY(-50%);
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--c-brand);
  color: var(--c-on-brand);
  display: grid;
  place-items: center;
  transition: background-color .25s var(--ease);
}
.searchform button:hover { background: var(--c-brand-2); }
.searchform button svg { width: 18px; height: 18px; }

/* =========================================================================
   7. मुख्य परीक्षण - पुस्तकाची प्रतिमा
   ========================================================================= */

/* पुस्तकाची त्रिमित प्रतिमा */
.lead__book {
  perspective: 1400px;
}
.book-obj {
  position: relative;
  width: min(320px, 68vw);
  aspect-ratio: 2 / 3;
  border-radius: 4px 12px 12px 4px;
  overflow: hidden;
  background: var(--c-brand-2);
  box-shadow: var(--sh-book);
  transform: rotateY(-14deg) rotateX(3deg);
  transform-style: preserve-3d;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.book-obj img { width: 100%; height: 100%; object-fit: cover; }
/* the spine highlight */
.book-obj::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 22px;
  background: linear-gradient(90deg, rgba(0, 0, 0, .42), rgba(0, 0, 0, .12) 45%, rgba(255, 255, 255, .16) 75%, transparent);
  z-index: 2;
}
/* the page-edge */
.book-obj::after {
  content: "";
  position: absolute;
  right: 0; top: 0; bottom: 0;
  width: 5px;
  background: repeating-linear-gradient(180deg, #EFEAD9 0 2px, #CFC9B6 2px 3px);
  z-index: 2;
}
/* मुख्य परीक्षणाचं पुस्तक. शिक्का कोपऱ्यात उमटतो. */
.lead__book .stamp {
  position: absolute;
  top: -6px;
  right: -10px;
  z-index: 5;
  background: color-mix(in srgb, var(--c-bg) 88%, transparent);
  border-radius: 50%;
  backdrop-filter: blur(3px);
  box-shadow: var(--sh-md);
  animation: stamp-drop .7s var(--ease-out) .35s backwards;
}
@keyframes stamp-drop {
  from { opacity: 0; transform: rotate(-30deg) scale(1.5); }
}

/* मुखपृष्ठ नसेल तर पुस्तकाचं नाव तिथेच छापतो. */
.book-fallback {
  display: grid;
  place-items: center;
  align-content: center;
  width: 100%; height: 100%;
  padding: 2rem 1.5rem;
  background: linear-gradient(150deg, var(--katta) 0%, var(--katta-deep) 100%);
  color: var(--c-on-brand);
  text-align: center;
}
.book-fallback > span {
  font-family: var(--f-display);
  font-size: clamp(1.5rem, 3.4vw, 2rem);
  line-height: 1.25;
}
.book-fallback small {
  display: block;
  margin-top: .8rem;
  font-family: var(--f-sans);
  font-size: .78rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  opacity: .65;
}

/* Ticker of one-line verdicts */
.ticker {
  border-block: 1px solid var(--c-line);
  background: var(--c-bg-2);
  overflow: hidden;
  padding-block: .95rem;
  position: relative;
  z-index: 1;
}
.ticker__track {
  display: flex;
  gap: 3rem;
  width: max-content;
  animation: ticker 46s linear infinite;
}
.ticker:hover .ticker__track { animation-play-state: paused; }
@keyframes ticker { to { transform: translateX(-50%); } }
.ticker__item {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  font-family: var(--f-serif);
  font-size: var(--t-md);
  color: var(--c-text-2);
  white-space: nowrap;
}
.ticker__item b { color: var(--c-text); font-weight: 400; }
.ticker__item::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--c-accent);
  flex: none;
}

/* =========================================================================
   8. CHIPS (टॅग आणि वर्गवारीच्या खुणा)
   ========================================================================= */



/* =========================================================================
   9. REVIEW CARDS
   ========================================================================= */

.grid { display: grid; gap: var(--gap); }
.grid--3 { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fill, minmax(238px, 1fr)); }

/* Bento: one hero card + the rest */
.grid--bento { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--bento > .card--wide { grid-column: span 2; grid-row: span 2; }

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--c-bg-2);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh-xs);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .3s var(--ease);
  will-change: transform;
}
.card:hover {
  transform: translateY(-6px);
  box-shadow: var(--sh-lg);
  border-color: var(--c-line-2);
}

/* The mood spine: a book's spine, colour-coded by mood. */
.card__spine {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 5px;
  z-index: 3;
  display: flex;
  flex-direction: column;
}
.card__spine i { flex: 1; }

.card__media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--c-bg-3);
}
.card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .8s var(--ease), filter .5s var(--ease);
}
.card:hover .card__media img { transform: scale(1.06); }
.card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(8, 40, 31, .55), transparent 55%);
  opacity: 0;
  transition: opacity .4s var(--ease);
}
.card:hover .card__media::after { opacity: 1; }

.card__stamp {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 4;
  background: color-mix(in srgb, var(--c-bg-2) 90%, transparent);
  border-radius: 50%;
  backdrop-filter: blur(4px);
  box-shadow: var(--sh-sm);
  transition: transform .45s var(--ease);
}
.card:hover .card__stamp { transform: rotate(4deg) scale(1.06); }

.card__genre {
  position: absolute;
  left: 16px;
  top: 12px;
  z-index: 4;
  padding: .3rem .75rem;
  border-radius: var(--r-full);
  background: var(--c-accent);
  color: var(--c-accent-ink);
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .04em;
}

.card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 1.4rem 1.5rem 1.5rem 1.75rem;
}
.card__book {
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--c-text-3);
  margin-bottom: .5rem;
}
.card__title {
  font-size: var(--t-lg);
  line-height: 1.28;
  margin-bottom: .55rem;
}
.card__title a { background-image: linear-gradient(var(--c-accent), var(--c-accent)); background-size: 0 2px; background-repeat: no-repeat; background-position: 0 100%; transition: background-size .4s var(--ease); }
.card:hover .card__title a { background-size: 100% 2px; }
.card__excerpt {
  color: var(--c-text-2);
  font-size: var(--t-sm);
  line-height: 1.62;
  margin-bottom: 1.1rem;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.card__moods { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: 1rem; }
.mood-tag {
  font-size: .7rem;
  font-weight: 600;
  padding: .18rem .55rem;
  border-radius: var(--r-xs);
  background: var(--c-brand-tint);
  color: var(--c-brand);
  border: 1px solid transparent;
}
[data-theme="dark"] .mood-tag { color: #6FD8BA; }

.card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px dashed var(--c-line);
  font-size: var(--t-xs);
  color: var(--c-text-3);
}
.card__byline { display: flex; align-items: center; gap: .5rem; }
.card__byline img { width: 26px; height: 26px; border-radius: 50%; }

.card--wide .card__media { aspect-ratio: 16 / 9; }
.card--wide .card__title { font-size: var(--t-xl); }
.card--wide .card__excerpt { -webkit-line-clamp: 4; font-size: var(--t-base); }

/* Compact list card, used in sidebars */
.mini {
  display: flex;
  gap: 1rem;
  align-items: center;
  padding: .7rem 0;
  border-bottom: 1px dashed var(--c-line);
}
.mini:last-child { border-bottom: 0; }
.mini__img {
  width: 58px;
  aspect-ratio: 2/3;
  border-radius: 4px;
  object-fit: cover;
  flex: none;
  box-shadow: var(--sh-sm);
  background: var(--c-bg-3);
}
.mini__t { font-family: var(--f-serif); font-size: 1rem; line-height: 1.35; }
.mini__t a:hover { color: var(--c-brand); }
.mini__m { font-size: var(--t-xs); color: var(--c-text-3); margin-top: .25rem; }
[data-theme="dark"] .mini__t a:hover { color: var(--c-accent); }

/* =========================================================================
   10. GENRE TILES
   ========================================================================= */

.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); gap: .9rem; }
.tile {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 138px;
  padding: 1.1rem;
  border-radius: var(--r);
  background: var(--c-brand);
  color: var(--c-on-brand);
  overflow: hidden;
  isolation: isolate;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.tile::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(140deg, transparent 40%, rgba(245, 166, 35, .22));
  opacity: 0;
  transition: opacity .4s var(--ease);
}
.tile:hover { transform: translateY(-5px); box-shadow: var(--sh-lg); }
.tile:hover::before { opacity: 1; }
/* Big ghost glyph behind, drawn from the genre's own first letter */
.tile__glyph {
  position: absolute;
  right: -.14em;
  top: -.34em;
  font-family: var(--f-display);
  font-size: 7.5rem;
  line-height: 1;
  color: rgba(255, 255, 255, .09);
  z-index: -1;
  transition: transform .55s var(--ease), color .4s var(--ease);
}
.tile:hover .tile__glyph { transform: scale(1.14) rotate(-5deg); color: rgba(245, 166, 35, .2); }
.tile__name { font-family: var(--f-serif); font-size: 1.28rem; line-height: 1.25; }
.tile__count { font-size: var(--t-xs); opacity: .62; margin-top: .2rem; font-weight: 600; }
.tile:nth-child(4n+2) { background: var(--c-brand-2); }
.tile:nth-child(4n+3) { background: var(--katta); }
.tile:nth-child(4n+4) { background: #123A4A; }

/* =========================================================================
   11. READING LISTS (rail)
   ========================================================================= */

.rail {
  display: flex;
  gap: var(--gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 1rem;
  margin-inline: calc(-1 * clamp(1.1rem, .5rem + 2.2vw, 2.5rem));
  padding-inline: clamp(1.1rem, .5rem + 2.2vw, 2.5rem);
  scrollbar-width: thin;
  scrollbar-color: var(--c-line-2) transparent;
}
.rail::-webkit-scrollbar { height: 6px; }
.rail::-webkit-scrollbar-thumb { background: var(--c-line-2); border-radius: 99px; }
.rail > * { scroll-snap-align: start; flex: 0 0 min(340px, 82vw); }

.list-card {
  position: relative;
  display: block;
  padding: 1.5rem;
  border-radius: var(--r-lg);
  background: var(--c-bg-2);
  border: 1px solid var(--c-line);
  overflow: hidden;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.list-card:hover { transform: translateY(-5px); box-shadow: var(--sh-lg); }
.list-card__stack { display: flex; margin-bottom: 1.1rem; }
.list-card__stack img,
.list-card__stack span {
  width: 60px;
  aspect-ratio: 2/3;
  border-radius: 3px;
  object-fit: cover;
  box-shadow: var(--sh-md);
  border: 2px solid var(--c-bg-2);
  background: var(--c-brand);
  transition: transform .4s var(--ease);
}
.list-card__stack > * + * { margin-left: -22px; }
.list-card:hover .list-card__stack > *:nth-child(1) { transform: translateX(-6px) rotate(-4deg); }
.list-card:hover .list-card__stack > *:nth-child(3) { transform: translateX(6px) rotate(4deg); }
.list-card__title { font-size: var(--t-lg); margin-bottom: .4rem; }
.list-card__desc { font-size: var(--t-sm); color: var(--c-text-2); }
.list-card__n {
  display: inline-block;
  margin-top: .9rem;
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--c-accent-2);
}

/* =========================================================================
   12. DARK SECTIONS (quote, newsletter)
   ========================================================================= */

.band {
  position: relative;
  background: var(--c-brand-2);
  color: var(--c-on-brand);
  overflow: hidden;
}
[data-theme="dark"] .band { background: var(--c-bg-2); border-block: 1px solid var(--c-line); }
.band::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(700px 340px at 12% -10%, rgba(245, 166, 35, .16), transparent 70%),
    radial-gradient(600px 300px at 92% 110%, rgba(27, 122, 99, .3), transparent 70%);
  pointer-events: none;
}
.band .wrap { position: relative; z-index: 1; }
.band .eyebrow { color: var(--c-on-brand-2); }
.band .eyebrow::before { background: var(--c-accent); }

.quote {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(1.5rem, 1rem + 2vw, 3rem);
  align-items: start;
}
.quote__glyph {
  font-family: var(--f-display);
  font-size: clamp(5rem, 3rem + 8vw, 10rem);
  line-height: .74;
  color: var(--c-accent);
  opacity: .85;
}
.quote blockquote {
  font-family: var(--f-serif);
  font-size: var(--t-xl);
  line-height: 1.5;
  margin: 0;
  text-wrap: pretty;
}
.quote figcaption {
  margin-top: 1.4rem;
  font-family: var(--f-sans);
  font-size: var(--t-sm);
  color: var(--c-on-brand-2);
}
.quote figcaption b { color: var(--c-accent); font-weight: 700; }

.news {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 1rem + 3vw, 4rem);
  align-items: center;
}
.news__title { font-size: var(--t-2xl); margin-bottom: .8rem; }
.news__copy { color: var(--c-on-brand-2); max-width: 42ch; }
.news form { display: flex; gap: .6rem; flex-wrap: wrap; }
.news input[type="email"] {
  flex: 1;
  min-width: 220px;
  padding: 1rem 1.25rem;
  border-radius: var(--r-full);
  border: 2px solid rgba(255, 255, 255, .2);
  background: rgba(255, 255, 255, .07);
  color: var(--c-on-brand);
  transition: border-color .25s var(--ease), background-color .25s var(--ease);
}
.news input[type="email"]::placeholder { color: var(--c-on-brand-2); }
.news input[type="email"]:focus { outline: none; border-color: var(--c-accent); background: rgba(255, 255, 255, .12); }
.news__note { margin-top: .9rem; font-size: var(--t-xs); color: var(--c-on-brand-2); }

/* Stats strip */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px;
  background: var(--c-line);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.stat { background: var(--c-bg-2); padding: 1.6rem 1.25rem; text-align: center; }
.stat__n {
  font-family: var(--f-display);
  font-size: clamp(2rem, 1.4rem + 1.8vw, 2.9rem);
  line-height: 1;
  color: var(--c-brand);
}
[data-theme="dark"] .stat__n { color: var(--c-accent); }
.stat__l {
  margin-top: .45rem;
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--c-text-3);
}

/* =========================================================================
   13. SINGLE REVIEW / POST
   ========================================================================= */

.progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0%;
  background: var(--c-accent);
  z-index: 400;
  transition: width .12s linear;
}

.entry-hero { padding-block: clamp(2.5rem, 1.5rem + 3vw, 4.5rem) 0; }
.crumbs {
  font-size: var(--t-xs);
  color: var(--c-text-3);
  margin-bottom: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}
.crumbs a:hover { color: var(--c-brand); }
.crumbs span { opacity: .5; }

.entry-title {
  font-size: var(--t-2xl);
  line-height: 1.14;
  letter-spacing: -.015em;
  margin-bottom: 1rem;
}
.entry-dek {
  font-family: var(--f-serif);
  font-size: var(--t-lg);
  color: var(--c-text-2);
  line-height: 1.55;
  max-width: 58ch;
}
.entry-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .6rem 1.5rem;
  margin-top: 1.75rem;
  padding-block: 1.1rem;
  border-block: 1px solid var(--c-line);
  font-size: var(--t-sm);
  color: var(--c-text-2);
}
.entry-meta__author { display: flex; align-items: center; gap: .6rem; }
.entry-meta__author img { width: 34px; height: 34px; border-radius: 50%; }
.entry-meta__author b { color: var(--c-text); font-weight: 700; }

.entry-cover {
  margin-top: 2.5rem;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh-lg);
  aspect-ratio: 21/9;
}
.entry-cover img { width: 100%; height: 100%; object-fit: cover; }

/* The book fact-file */
.factfile {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: clamp(1.25rem, .8rem + 1.5vw, 2.25rem);
  align-items: center;
  padding: clamp(1.25rem, .9rem + 1.4vw, 2rem);
  margin-block: 2.5rem;
  background: var(--c-bg-2);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
}
.factfile__cover {
  width: 108px;
  aspect-ratio: 2/3;
  border-radius: 3px 7px 7px 3px;
  object-fit: cover;
  box-shadow: var(--sh-md);
  background: var(--c-brand);
  flex: none;
}
.factfile__cover { grid-column: 1; }
.factfile__rows {
  grid-column: 2;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  gap: 1rem 1.5rem;
}
.factfile__k {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-text-3);
  margin-bottom: .18rem;
}
.factfile__v { font-family: var(--f-serif); font-size: 1.05rem; line-height: 1.35; }
.factfile__v a:hover { color: var(--c-brand); }
.factfile__verdict { grid-column: 3; display: grid; justify-items: center; gap: .75rem; }

.buybox {
  margin-top: 3rem;
  padding: 1.5rem;
  border-radius: var(--r-lg);
  border: 2px dashed var(--c-line-2);
  text-align: center;
}
.buybox h3 { font-size: var(--t-lg); margin-bottom: .4rem; }
.buybox p { font-size: var(--t-sm); color: var(--c-text-2); margin-bottom: 1.2rem; }
.buybox__links { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; }

/* Share rail */
.share {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--c-line);
}
.share__label { font-size: var(--t-xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--c-text-3); margin-right: .4rem; }
.share a, .share button {
  width: 40px; height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1.5px solid var(--c-line);
  color: var(--c-text-2);
  transition: all .25s var(--ease);
}
.share a:hover, .share button:hover {
  background: var(--c-brand);
  border-color: var(--c-brand);
  color: var(--c-on-brand);
  transform: translateY(-3px);
}
.share svg { width: 17px; height: 17px; }

/* Tag list */
.taglist { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 2rem; }

/* Author box */
.authorbox {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
  margin-top: 3rem;
  padding: 1.6rem;
  background: var(--c-bg-2);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
}
.authorbox img { width: 62px; height: 62px; border-radius: 50%; flex: none; box-shadow: var(--sh-sm); }
.authorbox h4 { font-size: var(--t-md); margin-bottom: .25rem; }
.authorbox p { font-size: var(--t-sm); color: var(--c-text-2); }

/* Prev / next */
.pn {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  margin-top: 3rem;
  background: var(--c-line);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.pn a { padding: 1.5rem; background: var(--c-bg-2); transition: background-color .25s; }
.pn a:hover { background: var(--c-bg-3); }
.pn a:last-child { text-align: right; }
.pn__l { font-size: var(--t-xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--c-text-3); margin-bottom: .5rem; }
.pn__t { font-family: var(--f-serif); font-size: var(--t-md); line-height: 1.35; }

/* =========================================================================
   14. COMMENTS
   ========================================================================= */

.comments { margin-top: 4rem; }
.comments__title { font-size: var(--t-xl); margin-bottom: .5rem; }
.comments__note { color: var(--c-text-2); font-size: var(--t-sm); margin-bottom: 2rem; }
.commentlist, .commentlist .children { list-style: none; padding: 0; margin: 0; }
.commentlist .children { padding-left: clamp(1rem, 3vw, 2.5rem); border-left: 2px solid var(--c-line); margin-top: 1.25rem; }
.commentlist > li { padding-bottom: 1.75rem; margin-bottom: 1.75rem; border-bottom: 1px solid var(--c-line); }
.commentlist > li:last-child { border-bottom: 0; }
.comment-body { display: grid; grid-template-columns: auto 1fr; gap: 1rem; }
.comment-body .avatar { grid-row: span 3; border-radius: 50%; width: 44px; height: 44px; }
.comment-author { font-family: var(--f-sans); font-weight: 700; font-size: var(--t-sm); }
.comment-author .says { display: none; }
.comment-metadata { font-size: var(--t-xs); color: var(--c-text-3); margin-bottom: .5rem; }
.comment-content { font-family: var(--f-serif); line-height: 1.7; }
.comment-content p + p { margin-top: .8rem; }
.reply { margin-top: .6rem; }
.comment-reply-link {
  font-family: var(--f-sans);
  font-size: var(--t-xs);
  font-weight: 700;
  color: var(--c-brand);
  text-transform: uppercase;
  letter-spacing: .08em;
}
[data-theme="dark"] .comment-reply-link { color: var(--c-accent); }

.comment-respond {
  margin-top: 2.5rem;
  padding: clamp(1.25rem, 1rem + 1.5vw, 2rem);
  background: var(--c-bg-2);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
}
.comment-reply-title { font-size: var(--t-lg); margin-bottom: 1.2rem; }
.comment-form p { margin-bottom: 1rem; }
.comment-form label { display: block; font-size: var(--t-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--c-text-3); margin-bottom: .4rem; }
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea,
.wp-block-search__input,
input[type="text"], input[type="email"], input[type="url"], input[type="tel"], input[type="number"], input[type="password"], textarea, select {
  width: 100%;
  padding: .8rem 1rem;
  border-radius: var(--r-sm);
  border: 1.5px solid var(--c-line-2);
  background: var(--c-bg);
  transition: border-color .22s var(--ease), box-shadow .22s var(--ease);
}
textarea { min-height: 130px; resize: vertical; font-family: var(--f-serif); }
.comment-form input:focus, .comment-form textarea:focus, input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--c-brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-brand) 18%, transparent);
}
.comment-form-cookies-consent { display: flex; align-items: flex-start; gap: .6rem; }
.comment-form-cookies-consent input { width: auto; }
.comment-form-cookies-consent label { text-transform: none; letter-spacing: 0; font-weight: 400; font-size: var(--t-sm); color: var(--c-text-2); margin: 0; }
.form-submit input[type="submit"] {
  display: inline-flex;
  padding: .9rem 1.8rem;
  border: 0;
  border-radius: var(--r-full);
  background: var(--c-brand);
  color: var(--c-on-brand);
  font-weight: 700;
  cursor: pointer;
  box-shadow: var(--sh-sm);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
  width: auto;
}
.form-submit input[type="submit"]:hover { transform: translateY(-3px); box-shadow: var(--sh-md); }

/* =========================================================================
   15. ARCHIVE + PAGINATION + 404 + SIDEBAR
   ========================================================================= */

.arch-head {
  padding-block: clamp(2.5rem, 1.5rem + 3vw, 4.5rem);
  border-bottom: 1px solid var(--c-line);
  background: var(--c-bg-2);
  position: relative;
  overflow: hidden;
}
.arch-head::after {
  content: "";
  position: absolute;
  right: -6%;
  top: -60%;
  width: 420px; height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--c-accent) 20%, transparent), transparent 65%);
}
.arch-head .wrap { position: relative; z-index: 1; }
.arch-title { font-size: var(--t-2xl); }
.arch-desc { color: var(--c-text-2); max-width: 60ch; margin-top: .8rem; font-size: var(--t-md); }
.arch-count { font-size: var(--t-sm); color: var(--c-text-3); margin-top: 1rem; font-weight: 600; }

.with-side { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: clamp(2rem, 1rem + 3vw, 4rem); align-items: start; }
.side { position: sticky; top: calc(var(--header-h) + 24px); display: grid; gap: 1.5rem; }
.widget {
  padding: 1.4rem;
  background: var(--c-bg-2);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
}
.widget__title, .widget h2, .widget .wp-block-heading {
  font-family: var(--f-sans);
  font-size: var(--t-xs);
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--c-text-3);
  margin-bottom: 1rem;
  padding-bottom: .7rem;
  border-bottom: 2px solid var(--c-line-strong);
}
.widget ul { list-style: none; padding: 0; margin: 0; }
.widget > ul > li { padding: .5rem 0; border-bottom: 1px dashed var(--c-line); font-size: var(--t-sm); }
.widget > ul > li:last-child { border-bottom: 0; }
.widget a:hover { color: var(--c-brand); }
[data-theme="dark"] .widget a:hover { color: var(--c-accent); }

.pagination { display: flex; justify-content: center; gap: .4rem; margin-top: 3.5rem; flex-wrap: wrap; }
.pagination .page-numbers {
  min-width: 44px; height: 44px;
  padding-inline: .7rem;
  display: grid;
  place-items: center;
  border-radius: var(--r-sm);
  border: 1.5px solid var(--c-line);
  background: var(--c-bg-2);
  font-weight: 700;
  font-size: var(--t-sm);
  transition: all .25s var(--ease);
}
.pagination .page-numbers:hover { border-color: var(--c-brand); color: var(--c-brand); transform: translateY(-2px); }
.pagination .current {
  background: var(--c-brand);
  border-color: var(--c-brand);
  color: var(--c-on-brand);
}
.pagination .dots { border-color: transparent; background: none; }

.empty { text-align: center; padding-block: clamp(3rem, 2rem + 4vw, 6rem); }
.empty__glyph { font-family: var(--f-display); font-size: clamp(5rem, 3rem + 9vw, 11rem); line-height: 1; color: var(--c-line-2); }
.empty h1, .empty h2 { font-size: var(--t-xl); margin-block: 1rem .7rem; }
.empty p { color: var(--c-text-2); max-width: 46ch; margin-inline: auto; margin-bottom: 1.8rem; }
.empty .searchform { max-width: 420px; margin-inline: auto; }

/* =========================================================================
   16. FOOTER
   ========================================================================= */

.site-footer {
  margin-top: var(--sec);
  background: var(--c-brand-2);
  color: var(--c-on-brand);
  position: relative;
  overflow: hidden;
}
[data-theme="dark"] .site-footer { background: var(--c-bg-2); border-top: 1px solid var(--c-line); }
.site-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(900px 400px at 80% -20%, rgba(245, 166, 35, .1), transparent 70%);
  pointer-events: none;
}
.site-footer .wrap { position: relative; z-index: 1; }

.foot-top {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: clamp(1.75rem, 1rem + 2.5vw, 3.5rem);
  padding-block: clamp(3rem, 2rem + 3vw, 4.5rem);
}
.foot-brand__name {
  font-family: var(--f-display);
  font-size: 2.1rem;
  line-height: 1;
  margin-bottom: 1rem;
}
.foot-brand__name em { font-style: normal; color: var(--c-accent); }
.foot-brand p { color: var(--c-on-brand-2); font-size: var(--t-sm); max-width: 34ch; line-height: 1.7; }
.foot-social { display: flex; gap: .5rem; margin-top: 1.4rem; }
.foot-social a {
  width: 38px; height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, .2);
  color: var(--c-on-brand-2);
  transition: all .25s var(--ease);
}
.foot-social a:hover { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-accent-ink); transform: translateY(-3px); }
.foot-social svg { width: 17px; height: 17px; }

.foot-col h4 {
  font-family: var(--f-sans);
  font-size: var(--t-xs);
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--c-accent);
  margin-bottom: 1.1rem;
}
.foot-col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; }
.foot-col a { color: var(--c-on-brand-2); font-size: var(--t-sm); transition: color .2s, padding-left .25s var(--ease); }
.foot-col a:hover { color: var(--c-on-brand); padding-left: 5px; }

.foot-bot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding-block: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, .12);
  font-size: var(--t-xs);
  color: var(--c-on-brand-2);
}
.foot-bot a:hover { color: var(--c-accent); }
.foot-langs { display: flex; gap: 1rem; }
.foot-langs a.is-current { color: var(--c-accent); font-weight: 700; }

/* =========================================================================
   17. MOTION
   ========================================================================= */

[data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
}
[data-reveal].is-in { opacity: 1; transform: none; }
[data-reveal][data-delay="1"] { transition-delay: .08s; }
[data-reveal][data-delay="2"] { transition-delay: .16s; }
[data-reveal][data-delay="3"] { transition-delay: .24s; }
[data-reveal][data-delay="4"] { transition-delay: .32s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
  .ticker__track { animation: none; }
}

/* =========================================================================
   18. WORDPRESS CORE CLASSES
   ========================================================================= */

.alignleft { float: left; margin: .4rem 1.6rem 1rem 0; }
.alignright { float: right; margin: .4rem 0 1rem 1.6rem; }
.aligncenter { margin-inline: auto; display: block; }
.alignwide { width: min(1100px, 92vw); margin-inline: auto; }
.alignfull { width: 100vw; margin-inline: calc(50% - 50vw); max-width: none; }
.wp-caption { max-width: 100%; }
.wp-caption-text { font-family: var(--f-sans); font-size: var(--t-xs); color: var(--c-text-3); text-align: center; margin-top: .6rem; }
.sticky .card__genre::after { content: " ★"; }
.gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: .75rem; }
.gallery img { border-radius: var(--r-sm); }
.wp-block-image img { border-radius: var(--r); }

/* =========================================================================
   19. RESPONSIVE
   ========================================================================= */

@media (max-width: 1080px) {
  .grid--bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--bento > .card--wide { grid-column: span 2; grid-row: auto; }
  .with-side { grid-template-columns: 1fr; }
  .side { position: static; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
}

@media (max-width: 900px) {
  .nav { display: none; }
  .burger { display: grid; place-items: center; }
  .book-obj { transform: rotateY(-8deg); width: min(240px, 60vw); }
  .lead__book .stamp { --stamp-size: 88px; }
  .news { grid-template-columns: 1fr; }
  .foot-top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot-brand { grid-column: span 2; }
  .factfile { grid-template-columns: auto minmax(0, 1fr); }
  .factfile__verdict { grid-column: span 2; justify-items: start; }
}

@media (max-width: 640px) {
  :root { --header-h: 64px; }
  .grid--bento { grid-template-columns: 1fr; }
  .grid--bento > .card--wide { grid-column: span 1; }
  .brand__name { font-size: 1.35rem; }
  .quote { grid-template-columns: 1fr; }
  .quote__glyph { line-height: .6; }
  .pn { grid-template-columns: 1fr; }
  .pn a:last-child { text-align: left; }
  .prose { font-size: 1.12rem; }
  .factfile { grid-template-columns: 1fr; justify-items: start; }
  .factfile__verdict { grid-column: auto; }
  .alignleft, .alignright { float: none; margin-inline: 0; }
  .comment-body { grid-template-columns: 1fr; }
  .comment-body .avatar { grid-row: auto; }
  .foot-top { grid-template-columns: 1fr; }
  .foot-brand { grid-column: auto; }
}

@media (max-width: 420px) {
  .lang__btn span { display: none; }
  .card__body { padding: 1.2rem 1.2rem 1.3rem 1.5rem; }
}

/* =========================================================================
   मुख्य परीक्षण (होमपेज)

   मासिकाचं मुखपृष्ठ. एकच पुस्तक मोठं, बाकी सगळं त्याखाली. वाचकाला निवडावं
   लागत नाही - काय महत्त्वाचं आहे ते मांडणीच सांगते.
   ========================================================================= */

.lead {
  padding: clamp(2rem, 5vw, 4rem) 0 clamp(2.5rem, 5vw, 4.5rem);
  border-bottom: 1px solid var(--c-line);
}

.lead__rule {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: .9rem;
  margin-bottom: clamp(1.75rem, 4vw, 3rem);
  border-bottom: 3px solid var(--c-text);
}
.lead__kicker {
  font-family: var(--f-sans);
  font-size: .8rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-brand);
}
.lead__date {
  font-family: var(--f-sans);
  font-size: .82rem;
  color: var(--c-text-soft);
}

.lead__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

.lead__genre {
  display: inline-block;
  font-family: var(--f-sans);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--c-accent-ink);
  background: var(--c-accent);
  padding: .35rem .8rem;
  border-radius: var(--r-pill);
  margin-bottom: 1.1rem;
  text-decoration: none;
}
.lead__genre:hover { background: var(--c-brand); color: #fff; }

.lead__title {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(2.1rem, 5.2vw, 4rem);
  line-height: 1.08;
  letter-spacing: -.02em;
  margin: 0 0 1.1rem;
}
.lead__title a { color: inherit; text-decoration: none; background-image: none; }
.lead__title a:hover { color: var(--c-brand); }

.lead__standfirst {
  font-family: var(--f-serif);
  font-size: clamp(1.08rem, 1.9vw, 1.32rem);
  line-height: 1.65;
  color: var(--c-text-soft);
  max-width: 40ch;
  margin: 0 0 1.5rem;
}

.lead__byline {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding-bottom: 1.5rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--c-line);
}
.lead__byline img {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 2px solid var(--c-line);
}
.lead__byline span {
  display: flex;
  flex-direction: column;
  font-family: var(--f-sans);
  font-size: .84rem;
  color: var(--c-text-soft);
  line-height: 1.4;
}
.lead__byline b { color: var(--c-text); font-weight: 700; }

/* सारांश. मत नाही, फक्त पुस्तक कशाबद्दल आहे. */
.lead__saransh {
  border-left: 3px solid var(--c-accent);
  padding: .2rem 0 .2rem 1.3rem;
  margin-bottom: 1.6rem;
}
.lead__saransh h2 {
  font-family: var(--f-sans);
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--c-brand);
  margin: 0 0 .5rem;
}
.lead__saransh p {
  font-family: var(--f-serif);
  font-size: 1.02rem;
  line-height: 1.7;
  color: var(--c-text);
  margin: 0;
}

.lead__facts {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.4rem;
  font-family: var(--f-sans);
  font-size: .84rem;
  color: var(--c-text-soft);
  margin-bottom: 1.8rem;
}
.lead__facts b { color: var(--c-text); font-weight: 700; }

.lead__book {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 1rem;
}
.lead__book .stamp {
  position: absolute;
  top: 0; right: 0;
}
.lead__verdict {
  margin: 2.2rem 0 0;
  padding-top: 1.2rem;
  border-top: 1px solid var(--c-line);
  font-family: var(--f-display);
  font-size: 1.22rem;
  line-height: 1.45;
  color: var(--c-text);
  text-align: center;
  max-width: 30ch;
}

@media (max-width: 900px) {
  .lead__grid { grid-template-columns: 1fr; }
  .lead__book { order: -1; align-items: flex-start; }
  .lead__book .stamp { right: 1rem; }
  .lead__verdict { text-align: left; max-width: none; }
}

/* =========================================================================
   सारांशाची चौकट (परीक्षणाच्या पानावर)
   ========================================================================= */

.saransh {
  margin: 2.75rem 0 0;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: var(--c-bg-2);
  border: 1px solid var(--c-line);
  border-left: 4px solid var(--c-accent);
  border-radius: var(--r-md);
  box-shadow: var(--sh-1);
}
.saransh__h {
  font-family: var(--f-sans);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--c-brand);
  margin: 0 0 .9rem;
}
.saransh__body p {
  font-family: var(--f-serif);
  font-size: 1.1rem;
  line-height: 1.8;
  color: var(--c-text);
  margin: 0 0 .9rem;
}
.saransh__body p:last-child { margin-bottom: 0; }
.saransh__note {
  margin: 1.1rem 0 0;
  padding-top: .9rem;
  border-top: 1px dashed var(--c-line);
  font-family: var(--f-sans);
  font-size: .8rem;
  color: var(--c-text-soft);
}

/* "आमचं मत" ही ओळ. इथून परीक्षण सुरू होतं. */
.prose-lede {
  font-family: var(--f-sans);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--c-brand);
  margin: 3rem 0 0;
  padding-bottom: .7rem;
  border-bottom: 2px solid var(--c-text);
}
.prose-lede + .prose { margin-top: 1.75rem; }

/* =========================================================================
   जमा-खर्च: काय जमलं, काय खटकलं
   ========================================================================= */

.ledger {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.25rem;
  margin: 3rem 0 0;
}
.ledger__col {
  padding: 1.5rem 1.6rem;
  border-radius: var(--r-md);
  border: 1px solid var(--c-line);
  background: var(--c-bg-2);
  box-shadow: var(--sh-1);
}
.ledger__col h3 {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--f-sans);
  font-size: .8rem;
  font-weight: 800;
  letter-spacing: .11em;
  text-transform: uppercase;
  margin: 0 0 1rem;
}
.ledger__col h3::before {
  content: "";
  width: 20px; height: 3px;
  border-radius: 2px;
}
.ledger__col--good { border-top: 3px solid var(--katta); }
.ledger__col--good h3 { color: var(--katta); }
.ledger__col--good h3::before { background: var(--katta); }
.ledger__col--bad { border-top: 3px solid var(--shendri); }
.ledger__col--bad h3 { color: var(--shendri); }
.ledger__col--bad h3::before { background: var(--shendri); }

.ledger__col ul { list-style: none; margin: 0; padding: 0; }
.ledger__col li {
  position: relative;
  padding-left: 1.4rem;
  margin-bottom: .8rem;
  font-family: var(--f-serif);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--c-text);
}
.ledger__col li:last-child { margin-bottom: 0; }
.ledger__col li::before {
  content: "";
  position: absolute;
  left: 0; top: .62em;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: currentColor;
  opacity: .35;
}

[data-theme="dark"] .ledger__col--good { border-top-color: #4FA88C; }
[data-theme="dark"] .ledger__col--good h3 { color: #4FA88C; }
[data-theme="dark"] .ledger__col--good h3::before { background: #4FA88C; }
[data-theme="dark"] .ledger__col--bad { border-top-color: #E06B55; }
[data-theme="dark"] .ledger__col--bad h3 { color: #E06B55; }
[data-theme="dark"] .ledger__col--bad h3::before { background: #E06B55; }

/* =========================================================================
   निकालाची चौकट. परीक्षणाचा शेवट.
   ========================================================================= */

.nikaal {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 2.75rem);
  align-items: center;
  margin: 3rem 0 0;
  padding: clamp(1.75rem, 4vw, 2.75rem);
  border-radius: var(--r-lg);
  background: linear-gradient(140deg, var(--katta), var(--katta-deep));
  color: #F2F5F1;
  box-shadow: var(--sh-3);
  overflow: hidden;
  position: relative;
}
.nikaal::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,.06) 1px, transparent 0);
  background-size: 18px 18px;
  pointer-events: none;
}
.nikaal__stamp { position: relative; z-index: 1; }
.nikaal__body { position: relative; z-index: 1; }
.nikaal__body .eyebrow { color: var(--halad); }
.nikaal__body .eyebrow::before { background: var(--halad); }

.nikaal__line {
  font-family: var(--f-display);
  font-size: clamp(1.3rem, 2.6vw, 1.85rem);
  line-height: 1.35;
  margin: .5rem 0 0;
  color: #fff;
}
.nikaal__who {
  margin-top: 1.4rem;
  padding-top: 1.2rem;
  border-top: 1px solid rgba(255,255,255,.16);
}
.nikaal__who h4 {
  font-family: var(--f-sans);
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--halad);
  margin: 0 0 .4rem;
}
.nikaal__who p {
  font-family: var(--f-serif);
  font-size: 1.02rem;
  line-height: 1.7;
  margin: 0;
  color: rgba(255,255,255,.9);
}

@media (max-width: 640px) {
  .nikaal { grid-template-columns: 1fr; text-align: left; }
}

/* गडद हिरव्या पट्टीवरचा शिक्का हळदीच्या रंगात. तिथे शेंदरी बुजतो. */
.nikaal .stamp {
  --stamp-ink: var(--halad);
  --stamp-size: 148px;
}
.nikaal .stamp__score { opacity: .85; }
.nikaal .stamp__arc text { opacity: .5; }

/* =========================================================================
   अनुक्रमणिका. आधीची परीक्षणं क्रमांकासह.
   ========================================================================= */

.index {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 2px solid var(--c-text);
}
.index__row { border-bottom: 1px solid var(--c-line); }
.index__row a {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr) auto;
  gap: 1.25rem;
  align-items: center;
  padding: 1.4rem .5rem;
  text-decoration: none;
  background-image: none;
  color: inherit;
  transition: background var(--t-fast) var(--ease), padding var(--t-fast) var(--ease);
}
.index__row a:hover {
  background: var(--c-bg-2);
  padding-left: 1rem;
  padding-right: 1rem;
}

.index__n {
  font-family: var(--f-display);
  font-size: 1.9rem;
  line-height: 1;
  color: var(--c-line-strong);
  text-align: center;
}
.index__row a:hover .index__n { color: var(--c-accent); }

.index__main { min-width: 0; }
.index__book {
  display: block;
  font-family: var(--f-sans);
  font-size: .78rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--c-text-soft);
  margin-bottom: .3rem;
}
.index__title {
  display: block;
  font-family: var(--f-display);
  font-size: clamp(1.15rem, 2.2vw, 1.5rem);
  line-height: 1.25;
  color: var(--c-text);
  margin-bottom: .35rem;
}
.index__row a:hover .index__title { color: var(--c-brand); }
.index__line {
  display: block;
  font-family: var(--f-serif);
  font-style: italic;
  font-size: .96rem;
  line-height: 1.55;
  color: var(--c-text-soft);
}

.index__verdict {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .15rem;
  padding: .55rem .9rem;
  border-radius: var(--r-sm);
  border: 1.5px solid currentColor;
  min-width: 5.5rem;
  text-align: center;
}
.index__verdict b {
  font-family: var(--f-sans);
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .02em;
}
.index__verdict i {
  font-style: normal;
  font-family: var(--f-sans);
  font-size: .7rem;
  opacity: .7;
}
.index__verdict--5 { color: var(--shendri); }
.index__verdict--4 { color: var(--katta); }
.index__verdict--3 { color: #A87611; }
.index__verdict--2,
.index__verdict--1 { color: var(--c-text-soft); }

[data-theme="dark"] .index__verdict--5 { color: #E06B55; }
[data-theme="dark"] .index__verdict--4 { color: #4FA88C; }
[data-theme="dark"] .index__verdict--3 { color: var(--halad); }

@media (max-width: 700px) {
  .index__row a { grid-template-columns: 2.4rem minmax(0, 1fr); gap: .9rem; }
  .index__n { font-size: 1.4rem; }
  .index__verdict {
    grid-column: 2;
    flex-direction: row;
    align-self: start;
    gap: .45rem;
    min-width: 0;
    margin-top: .5rem;
  }
}

/* ---------------------------------------------------------------
 * उरलेले तुकडे
 * ------------------------------------------------------------- */

/* मेनू किंवा शोध उघडा असेल तर मागचं पान हलू नये. */
body.is-locked { overflow: hidden; }

/* लिंक कॉपी झाली, हे सांगणारी चिठ्ठी. */
.toast {
  position: fixed;
  left: 50%;
  bottom: 2rem;
  z-index: 200;
  transform: translate(-50%, 1.25rem);
  padding: .8rem 1.4rem;
  border-radius: var(--r-pill);
  background: var(--ink);
  color: var(--paper);
  font-family: var(--f-sans);
  font-size: .92rem;
  font-weight: 600;
  box-shadow: var(--sh-3);
  opacity: 0;
  transition: opacity .25s var(--ease), transform .25s var(--ease);
  pointer-events: none;
}
.toast.is-in { opacity: 1; transform: translate(-50%, 0); }

/* बाजूची पट्टी असेल तेव्हाची मांडणी. */
.layout--side {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: calc(var(--gap) * 1.5);
  align-items: start;
}
.layout--side .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 1024px) {
  .layout--side { grid-template-columns: 1fr; }
  .layout--side .grid--3 { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
}

/* चुकीचं पान. */
.e404 { text-align: center; padding: 2rem 0 1rem; }
.e404__num {
  font-family: var(--f-display);
  font-size: clamp(6rem, 22vw, 13rem);
  line-height: .85;
  letter-spacing: -.03em;
  color: transparent;
  -webkit-text-stroke: 2px var(--line);
  margin-bottom: 1.5rem;
  user-select: none;
}
.e404 h1 {
  font-family: var(--f-display);
  font-size: clamp(1.9rem, 4.5vw, 3rem);
  line-height: 1.15;
  margin-bottom: 1rem;
}
.e404 p {
  max-width: 52ch;
  margin: 0 auto;
  color: var(--ink-soft);
  font-size: 1.08rem;
  line-height: 1.75;
}
.e404__cta {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  justify-content: center;
  margin-top: 2rem;
}

/* Print: a review should print like a clipping. */
@media print {
  .site-header, .site-footer, .share, .comments, .buybox, .pn, .ticker, .filters { display: none !important; }
  body { background: #fff; color: #000; }
  .prose { font-size: 11pt; }
}