/*
Theme Name:   Vidya Mandir — Education Desk
Theme URI:    https://www.maharishividyamandir.com/
Description:  Astra child theme for an independent education news publication. Colour-coded desks, verified notice board, sticky section nav, zero JS-dependent content. Yoast and Rank Math compatible.
Author:       Vidya Mandir Education Desk
Author URI:   https://www.maharishividyamandir.com/about/
Template:     astra
Version:      1.5.0
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:  vmed
*/

/* =====================================================================
   0. LAYOUT RESET — READ BEFORE EDITING

   These rules use !important, normally a bad habit. It is justified here
   for one narrow reason: Astra prints dynamic inline CSS in wp_head, which
   lands after an enqueued child stylesheet, so on equal specificity Astra
   wins. That inline CSS sets widths and padding on #content, .site-content
   and .ast-container. Without these overrides the page renders flush-left
   inside an Astra container this theme does not use.

   Scope is limited to layout containers. No !important appears anywhere
   below this block.
   ===================================================================== */
body.vmed #page,
body.vmed .site,
body.vmed .site-content,
body.vmed #content:not(.wrap),
body.vmed #primary:not(.wrap),
body.vmed .ast-container:not(.wrap),
body.vmed .entry-content:not(.vm-content){
  max-width:none !important;
  width:auto !important;
  margin:0 !important;
  padding:0 !important;
  float:none !important;
  border:0 !important;
  background:none !important;
}
body.vmed .ast-separate-container,
body.vmed .ast-plain-container{background:#fff !important}

/* Our own container. :not(.wrap) above guarantees nothing can strip these. */
body.vmed .wrap{
  width:100% !important;
  max-width:1240px !important;
  margin-left:auto !important;
  margin-right:auto !important;
  padding-left:24px !important;
  padding-right:24px !important;
}
body.vmed .vm-site{width:100%;max-width:none;margin:0;padding:0}
body.vmed .wrap-read{max-width:760px;margin-left:auto;margin-right:auto}

/* =====================================================================
   1. TOKENS
   ===================================================================== */
:root{
  --ink:#0C1330;
  --ink-2:#4A5470;
  --ink-3:#666F8A;
  --paper:#FFFFFF;
  --tint:#F6F7FB;
  --tint-2:#EDF0F7;
  --hair:#E4E8F2;
  --hair-2:#CFD6E6;

  --c-exam:#2B3A8F;
  --c-result:#BE3A26;
  --c-admit:#0B6E6D;
  --c-board:#6B3391;
  --c-schol:#8A5A00;
  --c-abroad:#1B6B3F;
  --c-policy:#3B4763;
  --c-jobs:#9A3412;
  --gold:#E0A32E;

  --k:var(--c-policy);

  --disp:'Bitter',Georgia,'Times New Roman',serif;
  --body:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,'SF Mono',monospace;

  --r:14px;
  --r-sm:9px;
  --sh-1:0 1px 2px rgba(12,19,48,.05);
  --sh-2:0 6px 22px -6px rgba(12,19,48,.16);
}

.k-exam{--k:var(--c-exam)}
.k-result{--k:var(--c-result)}
.k-admit{--k:var(--c-admit)}
.k-board{--k:var(--c-board)}
.k-schol{--k:var(--c-schol)}
.k-abroad{--k:var(--c-abroad)}
.k-policy{--k:var(--c-policy)}
.k-jobs{--k:var(--c-jobs)}

/* =====================================================================
   2. BASE
   ===================================================================== */
body.vmed{
  font-family:var(--body);
  font-size:17px;
  line-height:1.6;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
.vmed *,.vmed *::before,.vmed *::after{box-sizing:border-box}
.vmed p{margin:0 0 1em}
.vmed a{color:inherit;text-decoration:none}
.vmed a:hover{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px}
.vmed a:focus-visible,.vmed button:focus-visible,.vmed input:focus-visible{
  outline:3px solid var(--gold);outline-offset:3px;border-radius:4px
}
.vmed img{max-width:100%;height:auto;display:block}
.vmed ul.plain,.vmed .plain{margin:0;padding:0;list-style:none}
.vmed svg{display:block;flex:none}
.vmed h1,.vmed h2,.vmed h3,.vmed h4{margin:0}

/* A lazy-load plugin can inject a sourceless placeholder <img> next to the
   real one. Collapse it rather than letting it break card layout. */
.vmed img:not([src]),.vmed img[src=""],.vmed img[src="data:,"]{display:none}

.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
}
.skip-link:focus{
  position:fixed;top:12px;left:12px;z-index:9999;background:var(--ink);
  color:#fff;padding:11px 18px;border-radius:8px;width:auto;height:auto;
  clip:auto;clip-path:none;font-weight:600
}

/* =====================================================================
   3. NOTICE
   ===================================================================== */
.vm-notice{
  font-size:12.5px;line-height:1.6;color:var(--ink-2);
  background:#FCF8F7;border:1px solid #EFDCD7;border-left:3px solid var(--c-result);
  border-radius:var(--r-sm);padding:11px 15px;margin:16px 0 18px;
  display:flex;gap:11px;align-items:flex-start
}
.vm-notice strong{color:var(--c-result);font-weight:600}
.vm-notice svg{margin-top:2px}

/* =====================================================================
   4. MASTHEAD
   ===================================================================== */
.vm-mast{
  background:var(--ink);
  border-radius:var(--r);
  padding:26px 32px;
  color:#fff;
  display:flex;align-items:center;justify-content:space-between;
  gap:24px;flex-wrap:wrap;position:relative;overflow:hidden;
  box-shadow:var(--sh-2);
}
/* One soft light source, not a rainbow gradient. Restraint reads as premium. */
.vm-mast::before{
  content:"";position:absolute;top:-60%;right:-8%;width:420px;height:420px;
  background:radial-gradient(circle,rgba(224,163,46,.16) 0%,transparent 62%);
  pointer-events:none
}
.vm-mast::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:linear-gradient(90deg,var(--gold),transparent 62%)
}
.vm-mast > *{position:relative;z-index:1}
.vm-kicker{
  font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.26em;
  text-transform:uppercase;color:var(--gold);margin:0 0 8px
}
.vm-wordmark{
  font-family:var(--disp);font-weight:800;font-size:clamp(30px,5vw,46px);
  letter-spacing:-.028em;line-height:.96;margin:0;color:#fff
}
.vm-wordmark a{color:#fff}
.vm-wordmark a:hover{text-decoration:none;opacity:.88}
.vm-mast-right{display:flex;align-items:center;gap:22px}
.vm-dateline{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;
  color:rgba(255,255,255,.62);text-align:right;line-height:1.8;white-space:nowrap
}
.vm-search{position:relative}
.vm-search input[type=search]{
  font-family:var(--body);font-size:14px;color:#fff;
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.18);
  border-radius:100px;padding:10px 16px 10px 40px;width:200px;
  transition:width .22s ease,background .22s ease,border-color .22s ease
}
.vm-search input[type=search]::placeholder{color:rgba(255,255,255,.55)}
.vm-search input[type=search]:focus{width:250px;background:rgba(255,255,255,.17);border-color:rgba(255,255,255,.35)}
.vm-search svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:rgba(255,255,255,.6)}
.vm-search button{position:absolute;left:-9999px}

/* =====================================================================
   5. SECTION STRIP — sticky, no JavaScript
   ===================================================================== */
.vm-strip-outer{
  position:sticky;top:0;z-index:40;
  background:rgba(255,255,255,.94);
  backdrop-filter:saturate(180%) blur(12px);
  -webkit-backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--hair);
  margin:18px 0 0
}
.vm-strip{display:flex;gap:2px;font-size:14px;font-weight:600;overflow-x:auto;scrollbar-width:none}
.vm-strip::-webkit-scrollbar{display:none}
.vm-strip a{
  color:var(--ink-2);padding:15px 15px 13px;white-space:nowrap;
  border-bottom:3px solid transparent;transition:color .15s,border-color .15s
}
.vm-strip a:hover{text-decoration:none;color:var(--k)}
.vm-strip a[aria-current=page]{color:var(--k);border-bottom-color:var(--k)}

/* =====================================================================
   6. QUICK TILES
   ===================================================================== */
.vm-tiles{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px;margin:28px 0 0}
.vm-tile{
  border:1px solid var(--hair);border-radius:var(--r-sm);padding:17px 15px 15px;
  background:#fff;display:block;position:relative;overflow:hidden;box-shadow:var(--sh-1);
  transition:transform .18s cubic-bezier(.2,.7,.3,1),box-shadow .18s,border-color .18s
}
.vm-tile::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--k);
  transform:scaleY(0);transform-origin:bottom;transition:transform .2s ease
}
.vm-tile:hover{text-decoration:none;transform:translateY(-4px);box-shadow:var(--sh-2);border-color:var(--hair-2)}
.vm-tile:hover::before{transform:scaleY(1)}
.vm-tile-ico{
  width:36px;height:36px;border-radius:9px;display:flex;align-items:center;justify-content:center;
  background:var(--tint-2);color:var(--k);margin-bottom:12px
}
.vm-tile b{display:block;font-size:15px;font-weight:600;line-height:1.3;letter-spacing:-.008em}
.vm-tile span{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink-3);display:block;margin-top:3px
}

/* =====================================================================
   7. EDITORIAL ATOMS
   ===================================================================== */
.vm-eyebrow{
  display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);
  font-size:9.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:#fff;background:var(--k);border-radius:4px;padding:4px 9px;line-height:1.4
}
.vm-eyebrow:hover{text-decoration:none;filter:brightness(1.15)}

.vm-byline{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.05em;color:var(--ink-3);
  margin:0;display:flex;flex-wrap:wrap;gap:3px 7px;align-items:center
}
.vm-byline a{color:var(--ink-2);border-bottom:1px solid var(--hair-2)}
.vm-updated{color:var(--c-abroad);font-weight:600}

.vm-band{padding:52px 0 0}
.vm-band-hd{
  font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;margin:0 0 24px;padding-bottom:12px;
  border-bottom:2px solid var(--ink);display:flex;justify-content:space-between;
  align-items:baseline;gap:14px;position:relative
}
/* A short gold tick riding on the rule. Small, but it is the detail that
   separates a section heading from a horizontal line with text above it. */
.vm-band-hd::after{
  content:"";position:absolute;left:0;bottom:-2px;width:56px;height:2px;background:var(--gold)
}
.vm-band-hd a{color:var(--c-exam);letter-spacing:.09em;font-size:10.5px}

.vm-ph{
  background:
    radial-gradient(circle at 24% 26%,rgba(255,255,255,.34) 0 40%,transparent 40%),
    repeating-linear-gradient(135deg,rgba(255,255,255,.07) 0 14px,transparent 14px 28px),
    var(--k);
  width:100%;display:block
}
.r-16-9{aspect-ratio:16/9}
.r-16-10{aspect-ratio:16/10}
.r-4-3{aspect-ratio:4/3}
.vm-thumb{width:100%;object-fit:cover}

/* =====================================================================
   8. HOMEPAGE
   ===================================================================== */
.vm-h1{
  font-family:var(--disp);font-weight:700;font-size:clamp(19px,2.4vw,24px);
  letter-spacing:-.017em;line-height:1.3;margin:44px 0 9px;max-width:26ch;color:var(--ink)
}
.vm-stand{color:var(--ink-2);font-size:16px;line-height:1.65;max-width:66ch;margin:0 0 34px}

.vm-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:52px;align-items:start}

/* ---- HERO ------------------------------------------------------------
   Headline over the image. The scrim is load-bearing: white text on an
   arbitrary editorial photo fails contrast without it, so it runs to 92%
   ink at the base and is never reduced for aesthetics.
   ---------------------------------------------------------------------- */
.vm-hero{
  position:relative;border-radius:var(--r);overflow:hidden;margin:0 0 26px;
  background:var(--k);box-shadow:var(--sh-2);isolation:isolate;
  min-height:340px;display:flex;align-items:flex-end
}
.vm-hero-media{position:absolute;inset:0;z-index:0}
.vm-hero-media img,.vm-hero-media .vm-ph{
  width:100%;height:100%;object-fit:cover;aspect-ratio:auto;
  transition:transform .5s cubic-bezier(.2,.7,.3,1)
}
.vm-hero:hover .vm-hero-media img{transform:scale(1.03)}
.vm-hero::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(
    180deg,
    rgba(12,19,48,.10) 0%,
    rgba(12,19,48,.30) 42%,
    rgba(12,19,48,.78) 78%,
    rgba(12,19,48,.92) 100%)
}
.vm-hero-body{position:relative;z-index:2;padding:32px 34px 28px;width:100%}
.vm-hero .vm-eyebrow{
  background:rgba(255,255,255,.16);color:#fff;
  border:1px solid rgba(255,255,255,.30);backdrop-filter:blur(6px)
}
.vm-hero .vm-hed{
  font-family:var(--disp);font-weight:800;font-size:clamp(26px,3.5vw,40px);
  line-height:1.08;letter-spacing:-.03em;margin:14px 0 12px;
  color:#fff;text-wrap:balance;max-width:20ch;
  text-shadow:0 1px 24px rgba(12,19,48,.5)
}
.vm-hero .vm-hed a{color:#fff}
.vm-hero .vm-hed a:hover{text-decoration:none;color:#fff;opacity:.92}
.vm-hero .vm-dek{
  font-size:16.5px;line-height:1.55;color:rgba(255,255,255,.88);
  max-width:52ch;margin:0 0 14px
}
.vm-hero .vm-byline{color:rgba(255,255,255,.68)}
.vm-hero .vm-byline a{color:rgba(255,255,255,.9);border-bottom-color:rgba(255,255,255,.35)}

.vm-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.vm-cards .vm-card:nth-child(-n+3) .vm-card-body .vm-hed{font-size:18px}
.vm-card{
  border:1px solid var(--hair);border-radius:var(--r-sm);overflow:hidden;
  display:flex;flex-direction:column;background:#fff;box-shadow:var(--sh-1);
  transition:transform .18s cubic-bezier(.2,.7,.3,1),box-shadow .18s,border-color .18s
}
.vm-card:hover{transform:translateY(-4px);box-shadow:var(--sh-2);border-color:var(--hair-2)}
.vm-card-media{display:block;background:var(--tint-2)}
.vm-card-body{padding:15px 17px 16px;flex:1;display:flex;flex-direction:column;gap:8px}
.vm-card .vm-hed{
  font-family:var(--disp);font-weight:700;font-size:17px;line-height:1.28;
  letter-spacing:-.016em;margin:0
}
.vm-card .vm-hed a:hover{text-decoration:none;color:var(--k)}
.vm-card p{font-size:14px;line-height:1.55;color:var(--ink-2);margin:0}
.vm-card .vm-byline{margin-top:auto;padding-top:4px}

/* notice board */
.vm-board{
  border:1px solid var(--hair);border-radius:var(--r);overflow:hidden;
  background:#fff;position:sticky;top:76px;box-shadow:var(--sh-1)
}
.vm-board-hd{
  background:var(--ink);color:#fff;padding:15px 18px;display:flex;align-items:center;gap:10px;
  font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;margin:0;position:relative
}
.vm-board-hd::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:linear-gradient(90deg,var(--gold),transparent 70%)
}
.vm-board li{
  padding:14px 18px;border-bottom:1px solid var(--hair);
  border-left:3px solid var(--k);transition:background .15s
}
.vm-board li:hover{background:var(--tint)}
.vm-board li:last-of-type{border-bottom:0}
.vm-b-name{display:block;font-size:14.5px;font-weight:600;line-height:1.36;margin-bottom:8px;letter-spacing:-.008em}
.vm-b-meta{
  font-family:var(--mono);font-size:10px;letter-spacing:.06em;color:var(--ink-3);
  display:flex;align-items:center;gap:8px;flex-wrap:wrap
}
.vm-chip{
  font-family:var(--mono);font-size:9px;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;padding:3px 7px;border-radius:4px;white-space:nowrap;font-style:normal
}
.vm-chip-open{background:#E8F4ED;color:#155F35;border:1px solid #C0E0CD}
.vm-chip-soon{background:#FCEBE7;color:#94301E;border:1px solid #F0C9BF}
.vm-chip-tba{background:var(--tint-2);color:var(--ink-3);border:1px solid var(--hair)}
.vm-board-foot{
  padding:13px 18px;background:var(--tint);border-top:1px solid var(--hair);
  font-family:var(--mono);font-size:10px;letter-spacing:.05em;color:var(--ink-3);
  line-height:1.7;margin:0
}

/* latest — numbered. The rank is a real signal on a news index (this is the
   order the desk filed them), and big numerals give the list graphic weight
   that a bullet list does not have. */
.vm-latest{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 52px;counter-reset:vmrank}
.vm-latest li{
  display:flex;gap:16px;padding:15px 0;border-bottom:1px solid var(--hair);
  align-items:flex-start;counter-increment:vmrank;position:relative
}
.vm-latest li::before{
  content:counter(vmrank,decimal-leading-zero);
  font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.04em;
  color:var(--k);opacity:.55;flex:0 0 auto;width:22px;padding-top:4px
}
.vm-latest li:hover::before{opacity:1}
.vm-latest li:hover .vm-hed a{color:var(--k)}
.vm-latest time{
  font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.05em;
  color:var(--k);background:var(--tint);border:1px solid var(--hair);
  border-radius:5px;padding:5px 8px;flex:0 0 auto;min-width:62px;
  text-align:center;margin-top:1px
}
.vm-latest .vm-hed{font-family:var(--body);font-weight:600;font-size:15.5px;line-height:1.45;margin:0;flex:1}
.vm-latest .vm-hed a:hover{text-decoration:none}

/* desks */
.vm-desks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.vm-desk{
  border:1px solid var(--hair);border-radius:var(--r);overflow:hidden;
  background:#fff;box-shadow:var(--sh-1);display:flex;flex-direction:column
}
.vm-desk-hd{
  display:flex;align-items:center;gap:12px;padding:20px 22px 16px;
  background:var(--tint);border-bottom:1px solid var(--hair);border-top:3px solid var(--k)
}
.vm-desk-ico{
  width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;
  background:var(--k);color:#fff;flex:none
}
.vm-desk h3{font-family:var(--disp);font-weight:700;font-size:19px;letter-spacing:-.016em;line-height:1.2}
.vm-desk h3 a:hover{text-decoration:none;color:var(--k)}
.vm-desk .vm-desc{font-size:13.5px;line-height:1.55;color:var(--ink-2);margin:0;padding:15px 22px 0}
.vm-desk ul{padding:8px 22px 16px;margin:0;flex:1}
.vm-desk li{
  padding:10px 0;font-size:14.5px;line-height:1.45;font-weight:600;
  display:flex;gap:10px;align-items:baseline;border-bottom:1px solid var(--hair)
}
.vm-desk li:last-child{border-bottom:0}
.vm-desk li::before{content:"";width:6px;height:6px;border-radius:2px;background:var(--k);flex:none;transform:translateY(-1px)}
.vm-desk li a:hover{text-decoration:none;color:var(--k)}
.vm-desk-more{
  padding:13px 22px;border-top:1px solid var(--hair);background:var(--tint);
  font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--k);font-weight:600;display:block
}
.vm-desk-more:hover{text-decoration:none;background:var(--tint-2)}

/* about */
.vm-about{
  display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:48px;
  margin-top:52px;padding:34px 36px;border-radius:var(--r);
  background:var(--tint);border:1px solid var(--hair)
}
.vm-about h2{font-family:var(--disp);font-weight:700;font-size:22px;letter-spacing:-.017em;margin:0 0 15px}
.vm-about p{font-size:15.5px;line-height:1.68;color:var(--ink-2);max-width:60ch}
.vm-links li{
  padding:11px 0;border-bottom:1px solid var(--hair);font-size:14.5px;font-weight:600;
  display:flex;justify-content:space-between;gap:12px;align-items:baseline
}
.vm-links li:last-child{border-bottom:0}
.vm-links li span{font-family:var(--mono);font-size:10px;color:var(--ink-3);font-weight:400;letter-spacing:.06em}

/* =====================================================================
   9. SINGLE POST
   ===================================================================== */
.vm-crumbs{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;color:var(--ink-3);
  padding:24px 0 0;display:flex;flex-wrap:wrap;gap:7px;align-items:center
}
.vm-crumbs a{color:var(--ink-2);border-bottom:1px solid var(--hair-2)}
.vm-crumbs .sep{color:var(--hair-2)}

.vm-article-head{padding:16px 0 26px;border-bottom:1px solid var(--hair);margin-bottom:30px}
.vm-title{
  font-family:var(--disp);font-weight:800;font-size:clamp(29px,4.2vw,46px);
  line-height:1.08;letter-spacing:-.03em;margin:16px 0;max-width:20ch
}
.vm-subtitle{font-size:19.5px;line-height:1.52;color:var(--ink-2);margin:0 0 20px;max-width:58ch;font-weight:400}
.vm-meta-row{display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center;justify-content:space-between}
.vm-readtime{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-3);display:flex;align-items:center;gap:7px
}

.vm-figure{margin:0 0 32px;border-radius:var(--r);overflow:hidden;border:1px solid var(--hair)}
.vm-figure img{width:100%}
.vm-figure figcaption{
  font-family:var(--mono);font-size:10.5px;line-height:1.6;letter-spacing:.02em;
  color:var(--ink-3);padding:11px 16px;background:var(--tint);border-top:1px solid var(--hair)
}

.vm-article-grid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:56px;align-items:start;padding-bottom:52px}

.vm-content{font-size:18px;line-height:1.75;max-width:70ch;color:#1A2244}
.vm-content > * + *{margin-top:1.2em}
.vm-content p{margin:0}
.vm-content > p:first-of-type{font-size:19px;line-height:1.7}
.vm-content h2{
  font-family:var(--disp);font-weight:700;font-size:26px;line-height:1.24;
  letter-spacing:-.02em;margin-top:2em;padding-top:.6em;border-top:2px solid var(--k);color:var(--ink)
}
.vm-content h3{
  font-family:var(--disp);font-weight:700;font-size:20.5px;line-height:1.3;
  letter-spacing:-.014em;margin-top:1.8em;color:var(--ink)
}
.vm-content h4{font-family:var(--body);font-weight:600;font-size:17.5px;margin-top:1.6em}
.vm-content a{color:var(--k);border-bottom:1.5px solid var(--hair-2);font-weight:600}
.vm-content a:hover{text-decoration:none;border-bottom-color:var(--k);background:var(--tint)}
.vm-content ul,.vm-content ol{padding-left:1.4em;margin-top:1.15em}
.vm-content li{margin-bottom:.6em}
.vm-content ul li::marker{color:var(--k)}
.vm-content ol li::marker{color:var(--k);font-family:var(--mono);font-size:.85em;font-weight:600}
.vm-content blockquote{
  margin:1.8em 0;padding:6px 0 6px 24px;border-left:4px solid var(--k);
  font-family:var(--disp);font-size:21px;line-height:1.45;font-weight:600;letter-spacing:-.014em
}
.vm-content blockquote cite{
  display:block;font-family:var(--mono);font-size:11px;font-weight:400;font-style:normal;
  letter-spacing:.07em;color:var(--ink-3);margin-top:14px
}
.vm-content figure{margin:1.8em 0}
.vm-content figcaption{font-family:var(--mono);font-size:10.5px;color:var(--ink-3);padding-top:9px;line-height:1.6}
.vm-content img{border-radius:var(--r-sm)}
.vm-content code{font-family:var(--mono);font-size:.88em;background:var(--tint-2);padding:2px 6px;border-radius:4px}
.vm-content hr{border:0;border-top:1px solid var(--hair);margin:2.6em 0}

/* tables — the workhorse element on an exam-news site.
   Highlights tables on these posts run wide, so every table is wrapped in
   .vm-tablewrap by a the_content filter and scrolls horizontally on mobile
   instead of forcing the whole page wider. */
.vm-content .wp-block-table,
.vm-content .vm-tablewrap{
  overflow-x:auto;-webkit-overflow-scrolling:touch;
  border-radius:var(--r-sm);border:1px solid var(--hair);margin:1.8em 0
}
.vm-content .vm-tablewrap table{margin:0;border:0;border-radius:0;min-width:520px}
.vm-content table{
  width:100%;border-collapse:separate;border-spacing:0;font-size:15.5px;margin:1.8em 0;
  border:1px solid var(--hair);border-radius:var(--r-sm);overflow:hidden
}
.vm-content th,.vm-content td{padding:12px 15px;text-align:left;vertical-align:top;border-bottom:1px solid var(--hair)}
.vm-content thead th{
  background:var(--k);color:#fff;font-weight:600;font-size:13.5px;
  letter-spacing:.03em;text-transform:uppercase;border-bottom:0
}
.vm-content tbody tr:last-child td{border-bottom:0}
.vm-content tbody tr:nth-child(even){background:var(--tint)}


/* ---- FAQ blocks -------------------------------------------------------
   Posts on this site end with a run of h3 questions each followed by one
   paragraph. Left alone they look identical to every other subheading, so
   the most scannable part of the article reads as undifferentiated body
   text. .vm-faq turns the run into cards.

   Add class="vm-faq" to a Group block wrapping the questions, or let the
   the_content filter detect the "FAQ" heading and wrap what follows.
   ---------------------------------------------------------------------- */
.vm-content .vm-faq{
  margin-top:2em;padding-top:.2em;display:grid;gap:12px
}
.vm-content .vm-faq > h3{
  font-family:var(--body);font-size:16.5px;font-weight:600;line-height:1.45;
  letter-spacing:-.008em;margin:0;padding:16px 20px 0;
  border:1px solid var(--hair);border-bottom:0;
  border-radius:var(--r-sm) var(--r-sm) 0 0;background:var(--tint);
  position:relative;padding-left:50px
}
.vm-content .vm-faq > h3::before{
  content:"?";position:absolute;left:18px;top:15px;
  width:22px;height:22px;border-radius:6px;background:var(--k);color:#fff;
  font-family:var(--mono);font-size:12px;font-weight:600;
  display:flex;align-items:center;justify-content:center
}
.vm-content .vm-faq > h3 + p{
  margin:0 0 0;padding:12px 20px 18px;font-size:15.5px;line-height:1.65;
  color:var(--ink-2);background:var(--tint);
  border:1px solid var(--hair);border-top:0;
  border-radius:0 0 var(--r-sm) var(--r-sm)
}
.vm-faq-hd{
  font-family:var(--disp);font-weight:700;font-size:24px;letter-spacing:-.02em;
  margin-top:2.2em;padding-top:.6em;border-top:2px solid var(--k);
  display:flex;align-items:center;gap:11px
}

.vm-source{
  font-family:var(--mono);font-size:12.5px;line-height:1.65;letter-spacing:.01em;
  background:var(--tint);border:1px solid var(--hair);border-left:4px solid var(--c-abroad);
  border-radius:var(--r-sm);padding:14px 17px;color:var(--ink-2)
}
.vm-source strong{color:var(--c-abroad)}

.vm-aside{position:sticky;top:76px;display:flex;flex-direction:column;gap:22px}
.vm-aside-box{border:1px solid var(--hair);border-radius:var(--r);overflow:hidden;background:#fff;box-shadow:var(--sh-1)}
.vm-aside-hd{
  font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;padding:13px 17px;background:var(--k);color:#fff;margin:0
}
.vm-aside-box li{padding:13px 17px;border-bottom:1px solid var(--hair);font-size:14.5px;font-weight:600;line-height:1.42}
.vm-aside-box li:last-child{border-bottom:0}
.vm-aside-box li a:hover{text-decoration:none;color:var(--k)}

.vm-tags{display:flex;flex-wrap:wrap;gap:8px;padding:26px 0;border-top:1px solid var(--hair)}
.vm-tags a{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
  background:var(--tint);border:1px solid var(--hair);border-radius:100px;
  padding:7px 14px;color:var(--ink-2)
}
.vm-tags a:hover{text-decoration:none;border-color:var(--k);color:var(--k);background:#fff}

.vm-author{
  display:flex;gap:20px;padding:24px 26px;background:var(--tint);
  border:1px solid var(--hair);border-radius:var(--r);border-left:4px solid var(--k);margin:8px 0 34px
}
.vm-author-avatar{flex:none;width:72px;height:72px}
.vm-author img{border-radius:50%;width:72px;height:72px}
.vm-author h3{font-family:var(--disp);font-size:19px;font-weight:700;margin:0 0 5px;letter-spacing:-.014em}
.vm-author .role{
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--k);margin:0 0 10px;font-weight:600
}
.vm-author p{font-size:14.5px;line-height:1.6;color:var(--ink-2);margin:0}

.vm-corrections{
  font-family:var(--mono);font-size:11px;line-height:1.7;color:var(--ink-3);
  border-top:1px solid var(--hair);padding:20px 0 0;margin-bottom:36px
}
.vm-corrections a{color:var(--ink-2);border-bottom:1px solid var(--hair-2)}

.vm-adjacent{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;padding-bottom:52px}
.vm-adjacent a{
  border:1px solid var(--hair);border-radius:var(--r);padding:18px 20px;display:block;
  background:#fff;box-shadow:var(--sh-1);
  transition:box-shadow .18s,transform .18s,border-color .18s
}
.vm-adjacent a:hover{text-decoration:none;transform:translateY(-3px);box-shadow:var(--sh-2);border-color:var(--hair-2)}
.vm-adjacent span{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.17em;text-transform:uppercase;
  color:var(--ink-3);display:block;margin-bottom:8px
}
.vm-adjacent b{font-family:var(--disp);font-size:16.5px;font-weight:700;line-height:1.32;letter-spacing:-.016em}
.vm-adjacent .next{text-align:right}


/* =====================================================================
   9b. COMMENTS

   single.php calls comments_template(), which falls back to Astra's markup
   because this theme ships no comments.php. That is deliberate — Astra's
   markup is accessible and well tested — but it arrives unstyled, so the
   form has to be dressed here or it looks like a different website.
   ===================================================================== */
.vmed .comments-area{max-width:70ch;padding-bottom:52px}
.vmed .comments-title,
.vmed .comment-reply-title{
  font-family:var(--disp);font-weight:700;font-size:22px;letter-spacing:-.017em;
  margin:0 0 20px;padding-bottom:12px;border-bottom:2px solid var(--ink)
}
.vmed .comment-reply-title small{font-family:var(--mono);font-size:11px;font-weight:400;letter-spacing:.06em;margin-left:10px}
.vmed .comment-list{list-style:none;margin:0 0 36px;padding:0}
.vmed .comment-list li{padding:0}
.vmed .comment-body{
  border:1px solid var(--hair);border-radius:var(--r);padding:18px 20px;
  margin-bottom:16px;background:#fff;box-shadow:var(--sh-1)
}
.vmed .comment-list .children{list-style:none;margin:0 0 0 26px;padding:0;border-left:2px solid var(--hair)}
.vmed .comment-list .children .comment-body{margin-left:18px}
.vmed .comment-author{display:flex;align-items:center;gap:11px;font-size:15px;font-weight:600}
.vmed .comment-author img{border-radius:50%;flex:none}
.vmed .comment-metadata{
  font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-3);margin:7px 0 11px
}
.vmed .comment-content{font-size:15.5px;line-height:1.65;color:var(--ink-2)}
.vmed .reply a{
  font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;
  font-weight:600;color:var(--c-exam)
}
.vmed .comment-form{display:grid;gap:16px}
.vmed .comment-form p{margin:0}
.vmed .comment-form label{
  display:block;font-family:var(--mono);font-size:10px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-2);font-weight:600;margin-bottom:7px
}
.vmed .comment-form input[type=text],
.vmed .comment-form input[type=email],
.vmed .comment-form input[type=url],
.vmed .comment-form textarea{
  width:100%;font-family:var(--body);font-size:15.5px;color:var(--ink);
  padding:12px 14px;border:1px solid var(--hair-2);border-radius:var(--r-sm);background:#fff
}
.vmed .comment-form textarea{min-height:150px;resize:vertical}
.vmed .comment-form input:focus,.vmed .comment-form textarea:focus{border-color:var(--c-exam)}
.vmed .comment-form-cookies-consent{display:flex;align-items:center;gap:9px}
.vmed .comment-form-cookies-consent label{margin:0;text-transform:none;letter-spacing:0;font-family:var(--body);font-size:13.5px;font-weight:400}
.vmed .comment-form .submit,
.vmed .comment-form input[type=submit]{
  font-family:var(--body);font-weight:600;font-size:15px;padding:13px 28px;
  background:var(--ink);color:#fff;border:0;border-radius:var(--r-sm);cursor:pointer;justify-self:start
}
.vmed .comment-form .submit:hover,
.vmed .comment-form input[type=submit]:hover{background:var(--c-exam)}
.vmed .comment-notes,.vmed .form-allowed-tags{font-size:13px;color:var(--ink-3)}
.vmed .comment-form-comment{order:-1}

@media (max-width:720px){
  .vmed .comment-list .children{margin-left:12px}
  .vmed .comment-list .children .comment-body{margin-left:10px}
}

/* =====================================================================
   10. ARCHIVES / SEARCH / 404
   ===================================================================== */
.vm-archive-head{
  border-radius:var(--r);padding:34px 36px;margin:22px 0 32px;color:#fff;
  background:var(--k);position:relative;overflow:hidden;box-shadow:var(--sh-2)
}
.vm-archive-head::before{
  content:"";position:absolute;top:-70%;right:-6%;width:400px;height:400px;
  background:radial-gradient(circle,rgba(255,255,255,.13) 0%,transparent 62%);pointer-events:none
}
.vm-archive-head::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:linear-gradient(90deg,rgba(255,255,255,.5),transparent 60%)
}
.vm-archive-head > *{position:relative;z-index:1}
.vm-archive-head .label{
  font-family:var(--mono);font-size:10px;letter-spacing:.24em;text-transform:uppercase;
  color:rgba(255,255,255,.66);margin:0 0 10px
}
.vm-archive-head h1{
  font-family:var(--disp);font-weight:800;font-size:clamp(28px,4.2vw,42px);
  letter-spacing:-.028em;line-height:1.05;margin:0 0 12px;color:#fff
}
.vm-archive-head p{font-size:16px;line-height:1.6;color:rgba(255,255,255,.84);max-width:64ch;margin:0}
.vm-archive-head .count{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(255,255,255,.66);margin-top:14px;display:block
}

.vm-archive-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;padding-bottom:38px}

.vm-subcats{display:flex;flex-wrap:wrap;gap:9px;margin:0 0 30px}
.vm-subcats a{
  font-size:13.5px;font-weight:600;color:var(--k);background:#fff;
  border:1px solid var(--hair);border-radius:100px;padding:7px 15px;box-shadow:var(--sh-1)
}
.vm-subcats a:hover{text-decoration:none;border-color:var(--k)}

.vm-pagination{display:flex;justify-content:center;gap:8px;padding:14px 0 56px;flex-wrap:wrap}
.vm-pagination .page-numbers{
  font-family:var(--mono);font-size:13px;min-width:42px;height:42px;display:flex;
  align-items:center;justify-content:center;border:1px solid var(--hair);border-radius:var(--r-sm);
  padding:0 13px;color:var(--ink-2);background:#fff
}
.vm-pagination .page-numbers:hover{text-decoration:none;border-color:var(--k);color:var(--k)}
.vm-pagination .page-numbers.current{background:var(--ink);border-color:var(--ink);color:#fff;font-weight:600}

.vm-searchbig{display:flex;gap:11px;margin:0 0 32px}
.vm-searchbig input[type=search]{
  flex:1;font-family:var(--body);font-size:17px;padding:15px 19px;
  border:1px solid var(--hair-2);border-radius:var(--r-sm);background:#fff;color:var(--ink)
}
.vm-searchbig button{
  font-family:var(--body);font-weight:600;font-size:15px;padding:0 26px;
  background:var(--ink);color:#fff;border:0;border-radius:var(--r-sm);cursor:pointer
}
.vm-searchbig button:hover{background:var(--c-exam)}

.vm-404{text-align:center;padding:80px 0 60px;max-width:660px;margin:0 auto}
.vm-404 .code{
  font-family:var(--mono);font-size:82px;font-weight:600;letter-spacing:-.05em;
  color:var(--c-result);line-height:1;margin:0 0 16px
}
.vm-404 h1{font-family:var(--disp);font-weight:800;font-size:33px;letter-spacing:-.026em;margin:0 0 14px}
.vm-404 p{color:var(--ink-2);font-size:16.5px;line-height:1.65}

.vm-empty{
  border:1px dashed var(--hair-2);border-radius:var(--r);padding:52px 32px;
  text-align:center;color:var(--ink-2);margin-bottom:44px;background:var(--tint)
}
.vm-empty h2{font-family:var(--disp);font-size:21px;color:var(--ink);margin:0 0 9px}

/* =====================================================================
   11. PAGE
   ===================================================================== */
.vm-page-head{padding:26px 0 22px;border-bottom:2px solid var(--ink);margin-bottom:32px}
.vm-page-head h1{
  font-family:var(--disp);font-weight:800;font-size:clamp(29px,4vw,42px);
  letter-spacing:-.028em;line-height:1.08
}

/* =====================================================================
   12. FOOTER
   ===================================================================== */
.vm-footer{background:var(--ink);color:rgba(255,255,255,.74);margin-top:64px;padding:52px 0 30px;font-size:14.5px}
.vm-footer a{color:rgba(255,255,255,.74)}
.vm-footer a:hover{color:#fff}
.vm-footer-grid{
  display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px;
  padding-bottom:36px;border-bottom:1px solid rgba(255,255,255,.13)
}
.vm-footer h2{
  font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;color:var(--gold);margin:0 0 16px
}
.vm-footer li{padding:6px 0}
.vm-footer .vm-wordmark{font-size:28px;margin-bottom:14px}
.vm-footer .blurb{font-size:14px;line-height:1.7;color:rgba(255,255,255,.55);max-width:40ch}
.vm-footer-legal{
  padding-top:24px;font-family:var(--mono);font-size:10.5px;line-height:1.85;
  letter-spacing:.02em;color:rgba(255,255,255,.42)
}

/* =====================================================================
   13. RESPONSIVE
   ===================================================================== */
/* Breakpoint ladder: 1240 (narrow rail) → 1040 (rail drops under) →
   860 (cards go 2-up) → 640 (everything single column).
   Four steps, not two — a 3-up card grid at 900px gives 260px columns,
   which is too narrow for a headline, and that is the width most tablets
   land on in portrait. */
@media (max-width:1240px){
  .vm-grid{grid-template-columns:minmax(0,1fr) 300px;gap:40px}
  .vm-article-grid{grid-template-columns:minmax(0,1fr) 290px;gap:40px}
  .vm-tiles{gap:12px}
}
@media (max-width:1100px){
  .vm-tiles{grid-template-columns:repeat(3,minmax(0,1fr))}
  .vm-grid,.vm-article-grid{grid-template-columns:1fr;gap:44px}
  .vm-hero{min-height:320px}
  .vm-board,.vm-aside{position:static}
  .vm-desks{grid-template-columns:1fr}
  .vm-archive-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .vm-about{grid-template-columns:1fr;gap:32px}
  .vm-footer-grid{grid-template-columns:1fr 1fr;gap:32px}
  .vm-title{max-width:none}
}
@media (max-width:860px){
  .vm-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .vm-archive-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .vm-hero{min-height:300px}
  .vm-hero .vm-hed{font-size:clamp(24px,4.6vw,32px)}
  .vm-latest{gap:0 32px}
  .vm-about{padding:28px 24px}
}
@media (max-width:720px){
  body.vmed{font-size:16px}
  body.vmed .wrap{padding-left:16px !important;padding-right:16px !important}
  .vm-mast{padding:20px;border-radius:var(--r-sm)}
  .vm-mast::before{width:240px;height:240px}
  .vm-mast-right{width:100%;justify-content:space-between;gap:14px}
  .vm-dateline{text-align:left;font-size:9.5px}
  .vm-search{flex:1}
  .vm-search input[type=search],
  .vm-search input[type=search]:focus{width:100%}
  .vm-strip-outer{margin-left:-16px;margin-right:-16px;padding:0 16px}
  .vm-strip a{padding:13px 12px 11px;font-size:13.5px}
  .vm-tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}
  .vm-tile{padding:14px 13px 12px}
  .vm-tile-ico{width:32px;height:32px;margin-bottom:10px}
  .vm-h1{margin-top:32px}
  .vm-cards,.vm-archive-grid{grid-template-columns:1fr}
  .vm-hero{min-height:280px}
  .vm-hero-body{padding:22px 20px 20px}
  .vm-hero .vm-hed{max-width:none}
  .vm-hero .vm-dek{display:none}
  .vm-latest{grid-template-columns:1fr;gap:0}
  .vm-content{font-size:17px}
  .vm-content h2{font-size:23px}
  .vm-article-head{padding-bottom:20px}
  .vm-adjacent{grid-template-columns:1fr}
  .vm-adjacent .next{text-align:left}
  .vm-about{padding:24px 20px}
  .vm-author{flex-direction:column;gap:15px}
  .vm-archive-head{padding:24px 22px}
  .vm-footer-grid{grid-template-columns:1fr;gap:28px}
  .vm-band{padding-top:40px}
}

/* =====================================================================
   14. MOTION + PRINT
   ===================================================================== */
/* Touch targets. Anything tappable clears 44px on coarse pointers — the
   section strip and pagination were both under that at phone sizes. */
@media (pointer:coarse){
  .vm-strip a{padding-top:15px;padding-bottom:13px}
  .vm-pagination .page-numbers{min-width:46px;height:46px}
  .vm-tags a{padding:9px 15px}
  .vm-subcats a{padding:9px 16px}
  .vm-links li a,.vm-desk li a{padding:2px 0;display:inline-block}
}

@media (prefers-reduced-motion:reduce){
  .vmed *,.vmed *::before,.vmed *::after{
    animation-duration:.01ms !important;transition-duration:.01ms !important
  }
  .vm-tile:hover,.vm-card:hover,.vm-adjacent a:hover{transform:none}
}
@media print{
  .vm-mast,.vm-strip-outer,.vm-tiles,.vm-aside,.vm-footer,.vm-adjacent,.vm-notice,.vm-tags,.vm-board{display:none}
  .vm-article-grid{grid-template-columns:1fr}
  .vm-content{font-size:12pt;max-width:none}
  .vm-content a{border:0;color:#000}
  .vm-content a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;color:#555}
  .vm-figure{border:0}
}