/*
Theme Name: Jagriti Stays Blog
Theme URI: https://www.jagritistays.com/blog/
Author: Jagriti Stays
Description: Blog theme for jagritistays.com. Shares the landing page's type,
  colour and furniture so /blog/ reads as one site with the rest of the domain.
  Not a general-purpose theme - it is built for this one site.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 8.0
License: Proprietary - all rights reserved
Text Domain: jagriti-stays
*/

/* ─────────────────────────────────────────────────────────────────────
   PART 1 - lifted verbatim from the landing page by build_style.py.
   Do not hand-edit: change index.php and re-run the script.
   ───────────────────────────────────────────────────────────────────── */

@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:300 700;font-display:swap;src:url(/fonts/cormorant-garamond-italic-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:300 700;font-display:swap;src:url(/fonts/cormorant-garamond-italic.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:300 700;font-display:swap;src:url(/fonts/cormorant-garamond-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:300 700;font-display:swap;src:url(/fonts/cormorant-garamond.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Manrope';font-style:normal;font-weight:300 700;font-display:swap;src:url(/fonts/manrope-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Manrope';font-style:normal;font-weight:300 700;font-display:swap;src:url(/fonts/manrope.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
:root{
  --bone:#F4EFE6;--paper:#FBF8F2;--sand:#E8DDC9;--sand-d:#D9CBB1;
  --ink:#171C18;--ink-2:#48504A;--ink-3:#7E857F;
  --moss:#3B5A45;--moss-d:#22382A;--moss-x:#152419;--sage:#9DB29B;--mist:#DCE3D9;
  --terra:#C4613C;--terra-d:#A24D2E;--gold:#B8985F;
  --hair:rgba(23,28,24,.12);
  --ease:cubic-bezier(.16,1,.3,1);--ease-2:cubic-bezier(.65,0,.35,1);
  --gut:clamp(18px,4.5vw,64px);
  --r-xl:28px;--r-lg:20px;--r-md:14px;--r-sm:8px;--nav-h:76px;--frame-pad:12px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 12px)}
body{font-family:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;font-size:17px;line-height:1.6;color:var(--ink);background:var(--bone);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
::selection{background:var(--terra);color:#fff}
.serif,h1,h2,h3{font-family:'Cormorant Garamond',Georgia,'Times New Roman',serif;font-weight:500;line-height:1.06;letter-spacing:-.012em;text-wrap:balance}
h1{font-size:clamp(2.6rem,5.2vw,4.5rem);font-weight:400}
h2{font-size:clamp(2.25rem,4.6vw,3.9rem)}
h3{font-size:clamp(1.5rem,2.5vw,2.1rem)}
em.i{font-style:italic;color:var(--terra)}
p{color:var(--ink-2);text-wrap:pretty}
.lead{font-size:clamp(1.1rem,1.55vw,1.32rem);line-height:1.55;color:var(--ink-2)}
.big{font-family:'Cormorant Garamond',serif;font-weight:500;font-size:clamp(1.5rem,2.5vw,2rem);line-height:1.2;color:var(--ink);letter-spacing:0}
.kicker{display:inline-flex;align-items:center;gap:.7rem;font-size:.72rem;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--moss)}
.kicker i{width:22px;height:1px;background:currentColor;opacity:.6}
.wrap{width:min(1320px,100% - var(--gut)*2);margin-inline:auto}
.sec{padding-block:clamp(84px,11vw,168px)}
.sec-t{padding-top:clamp(84px,11vw,168px)}
.sec-b{padding-bottom:clamp(84px,11vw,168px)}
.mt-1{margin-top:.75rem}
.mt-2{margin-top:1.4rem}
.mt-3{margin-top:2.4rem}
.mt-4{margin-top:3.6rem}
.grain::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.55;mix-blend-mode:multiply;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E")}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;min-height:54px;padding:0 1.6rem;border-radius:999px;border:1px solid transparent;font-size:.93rem;font-weight:600;cursor:pointer;white-space:nowrap;position:relative;overflow:hidden;transition:transform .5s var(--ease),background-color .3s,color .3s,border-color .3s,box-shadow .5s var(--ease)}
.btn:hover{transform:translateY(-2px)}
.btn:focus-visible{outline:2px solid var(--terra);outline-offset:3px}
.btn:disabled{opacity:.6;cursor:wait;transform:none}
.btn-ink{background:var(--ink);color:var(--bone)}
.btn-ink:hover{background:var(--moss-d);box-shadow:0 18px 40px -18px rgba(23,28,24,.6)}
.btn-terra{background:var(--terra);color:#fff;box-shadow:0 16px 36px -18px rgba(196,97,60,.9)}
.btn-terra:hover{background:var(--terra-d)}
.btn-bone{background:var(--bone);color:var(--ink)}
.btn-bone:hover{background:#fff}
.btn-line{background:transparent;border-color:var(--hair);color:var(--ink)}
.btn-line:hover{border-color:var(--ink);background:rgba(23,28,24,.04)}
.btn-glass{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.35);color:#fff;backdrop-filter:blur(10px)}
.btn-glass:hover{background:rgba(255,255,255,.24)}
.btn-wa{background:#1DA851;color:#fff}
.btn-wa:hover{background:#178C43}
.btn .arr{transition:transform .5s var(--ease)}
.btn:hover .arr{transform:translateX(4px)}
.nav{position:fixed;top:0;left:0;right:0;z-index:90;height:calc(var(--nav-h) + var(--frame-pad));display:flex;align-items:center;padding:var(--frame-pad) var(--gut) 0;opacity:0;transition:background-color .45s,box-shadow .45s,backdrop-filter .45s,height .45s,padding .45s,opacity .5s var(--ease);color:#fff}
.nav.in{opacity:1}
.nav.solid{background:rgba(244,239,230,.86);backdrop-filter:blur(16px) saturate(1.3);box-shadow:0 1px 0 var(--hair);color:var(--ink);height:var(--nav-h);padding-top:0}
.nav-in{width:min(1320px,100%);margin-inline:auto;display:flex;align-items:center;justify-content:space-between;gap:1.5rem}
.brand{display:flex;align-items:center;gap:.7rem;line-height:1}
.brand img{height:56px;width:auto;transition:filter .45s}
.nav:not(.solid) .brand img{filter:brightness(0) invert(1)}
.brand small{display:block;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;opacity:.9;font-weight:600;white-space:nowrap}
.menu{display:flex;gap:1.8rem;font-size:.88rem;font-weight:500}
.menu a{position:relative;padding:.3rem 0;opacity:.88}
.menu a::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:0;background:currentColor;transition:width .45s var(--ease)}
.menu a:hover{opacity:1}
.menu a:hover::after{width:100%}
.nav-r{display:flex;align-items:center;gap:.7rem}
.nav .btn{min-height:44px;padding:0 1.2rem;font-size:.85rem}
.nav:not(.solid) .btn-ink{background:var(--bone);color:var(--ink)}
.burger{display:none;width:44px;height:44px;border-radius:50%;border:1px solid currentColor;background:transparent;cursor:pointer;place-items:center;opacity:.9}
.burger span{display:block;width:18px;height:1.5px;background:currentColor;position:relative}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:18px;height:1.5px;background:currentColor;transition:.35s var(--ease)}
.burger span::before{top:-6px}
.burger span::after{top:6px}
.burger[aria-expanded="true"] span{background:transparent}
.burger[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)}
.burger[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)}
@media(max-width:1240px){.menu{display:none}.burger{display:grid}}
@media(max-width:1000px){.nav .btn-ink{display:none}}
@media(max-width:600px){.brand small{font-size:.6rem;letter-spacing:.14em}}
@media(max-width:359px){.brand img{height:46px}.brand small{letter-spacing:.1em;font-size:.52rem}}
.sheet{position:fixed;inset:0;z-index:85;background:var(--moss-x);color:var(--bone);display:flex;flex-direction:column;justify-content:center;padding:var(--gut);transform:translateY(-100%);transition:transform .7s var(--ease-2);visibility:hidden}
.sheet.open{transform:none;visibility:visible}
.sheet a{font-family:'Cormorant Garamond',serif;font-weight:500;font-size:clamp(2.2rem,7.5vw,3.7rem);line-height:1.15;padding:.2rem 0;border-bottom:1px solid rgba(244,239,230,.12);display:flex;justify-content:space-between;align-items:baseline}
.book{margin:12px;border-radius:var(--r-xl);background:var(--moss-x);color:var(--bone);position:relative;overflow:hidden;isolation:isolate}
.book img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.28;z-index:-2}
.book::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(21,36,25,.96) 0%,rgba(21,36,25,.8) 55%,rgba(21,36,25,.5) 100%)}
.book-in{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,5rem);align-items:center;padding:clamp(48px,7vw,104px) clamp(24px,5vw,72px)}
.book h2{color:var(--bone)}
.book h2 em{color:var(--sage)}
.book p{color:rgba(244,239,230,.72)}
.book .kicker{color:var(--sage)}
.form{background:var(--paper);color:var(--ink);border-radius:var(--r-lg);padding:clamp(1.4rem,2.4vw,2rem);box-shadow:0 60px 100px -50px rgba(0,0,0,.6)}
.form h3{font-size:1.85rem}
.f{margin-top:.9rem}
.f label{display:block;font-size:.66rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--moss);margin-bottom:.35rem}
.f input,.f select,.f textarea{width:100%;min-height:50px;padding:.7rem .9rem;border:1px solid var(--sand-d);border-radius:var(--r-sm);background:#fff;font-size:.95rem;transition:border-color .2s,box-shadow .2s}
.f textarea{min-height:88px;resize:vertical}
.f input:focus,.f select:focus,.f textarea:focus{outline:none;border-color:var(--moss);box-shadow:0 0 0 3px rgba(59,90,69,.15)}
.f input::placeholder,.f textarea::placeholder{color:#B4B9B5}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
.book-in>*,.f2>*,.f input,.f select,.f textarea{min-width:0}
@media(max-width:430px){.f2 input[type=date]{padding-inline:.55rem;font-size:.86rem}}
@media(max-width:380px){#custForm .btn{padding-inline:.8rem;font-size:.84rem}}
@media(max-width:340px){#custForm .btn{padding-inline:.6rem;font-size:.8rem}}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form .btn{width:100%;margin-top:1.1rem}
.form .alt{display:flex;align-items:center;gap:.7rem;margin:.9rem 0;font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.form .alt::before,.form .alt::after{content:"";flex:1;height:1px;background:var(--hair)}
.form .fine{display:flex;align-items:center;gap:.4rem;justify-content:center;font-size:.72rem;color:var(--ink-3);margin-top:.8rem}
.form .err{display:none;margin-top:.8rem;padding:.7rem .9rem;border-radius:var(--r-sm);background:#FBE9E3;color:#8A3A22;font-size:.85rem}
.form .err.on{display:block}
.contact-l{display:grid;gap:.9rem;margin-top:2rem}
.contact-l a{display:flex;align-items:center;gap:.9rem;font-size:1.05rem;color:var(--bone)}
.contact-l a i{width:42px;height:42px;border-radius:50%;border:1px solid rgba(244,239,230,.25);display:grid;place-items:center;flex:none;color:var(--sage);font-style:normal}
.contact-l a:hover i{background:var(--sage);color:var(--moss-x);border-color:var(--sage)}
.contact-l a i svg{width:19px;height:19px;display:block}
@media(max-width:900px){.book-in{grid-template-columns:1fr}}
footer{padding:clamp(48px,6vw,80px) 0 clamp(28px,4vw,40px);color:var(--ink-2);font-size:.88rem}
.fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:2rem}
.fgrid h5{font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--moss);margin-bottom:.9rem;font-weight:700}
.fgrid ul{list-style:none;display:grid;gap:.5rem}
.fgrid a:hover{color:var(--terra)}
.reach a{display:inline-flex;align-items:center;gap:.6rem}
.reach svg{width:14px;height:14px;flex:none;opacity:.55;transition:opacity .3s var(--ease)}
.reach a:hover svg{opacity:1}
.fbrand img{height:56px;width:auto}
.soc{display:flex;gap:.5rem;margin-top:1.1rem}
.soc a{width:38px;height:38px;border-radius:50%;border:1px solid var(--hair);display:grid;place-items:center;color:var(--ink-2);transition:.3s;font-size:.8rem;font-weight:700}
.soc a svg{width:16px;height:16px;flex:none}
.soc a.fb svg{width:14px;height:14px}
.soc a.xt svg{width:15px;height:15px}
.soc a.yt svg{width:18px;height:18px}
.soc a:hover{background:var(--ink);color:var(--bone);border-color:var(--ink)}
.fbot{margin-top:2.6rem;padding-top:1.4rem;border-top:1px solid var(--hair);display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.76rem;color:var(--ink-3)}
@media(max-width:900px){.fgrid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.fgrid{grid-template-columns:1fr}}
.fab{position:fixed;right:clamp(12px,1.6vw,20px);bottom:clamp(12px,1.6vw,20px);z-index:75;display:grid;gap:10px}
.fab a,.fab button{position:relative;width:50px;height:50px;border-radius:50%;display:grid;place-items:center;border:0;padding:0;cursor:pointer;color:#fff;box-shadow:0 10px 26px -10px rgba(23,28,24,.5);transition:transform .35s var(--ease),box-shadow .35s var(--ease),opacity .3s var(--ease),visibility .3s}
.fab a:hover,.fab button:hover{transform:translateY(-3px);box-shadow:0 16px 34px -12px rgba(23,28,24,.6)}
.fab a:focus-visible,.fab button:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.fab svg{width:20px;height:20px;flex:none}
.fab-call{background:var(--moss)}
.fab-wa{background:#1DA851}
.fab .fab-top{background:var(--paper);color:var(--ink);border:1px solid var(--hair);opacity:0;visibility:hidden;pointer-events:none}
.fab .fab-top.on{opacity:1;visibility:visible;pointer-events:auto}
.fab-tip{position:absolute;right:calc(100% + 10px);top:50%;transform:translateY(-50%) translateX(6px);white-space:nowrap;background:var(--ink);color:var(--bone);font-size:.7rem;font-weight:600;letter-spacing:.05em;padding:.4rem .68rem;border-radius:999px;opacity:0;pointer-events:none;transition:opacity .3s var(--ease),transform .3s var(--ease)}
.fab a:hover .fab-tip,.fab button:hover .fab-tip{opacity:1;transform:translateY(-50%) translateX(0)}
@media(max-width:860px){.fab .fab-call,.fab .fab-wa{display:none}.fab{bottom:84px}.fab-tip{display:none}}
@media(prefers-reduced-motion:reduce){.fab a,.fab button,.fab-tip{transition:none}}
.dock{position:fixed;left:10px;right:10px;bottom:10px;z-index:80;display:none;grid-template-columns:1fr 1fr 1.3fr;gap:6px;padding:6px;border-radius:999px;background:rgba(23,28,24,.9);backdrop-filter:blur(14px);box-shadow:0 20px 50px -20px rgba(0,0,0,.6)}
.dock a{display:flex;align-items:center;justify-content:center;gap:.4rem;min-height:48px;border-radius:999px;font-size:.78rem;font-weight:600;color:var(--bone)}
.dock a svg{width:15px;height:15px;flex:none}
.dock a.wa{background:#1DA851;color:#fff}
.dock a.go{background:var(--bone);color:var(--ink)}
@media(max-width:860px){.dock{display:grid}body{padding-bottom:76px}}

/* ─────────────────────────────────────────────────────────────────────
   PART 2 - blog-only rules. This is the file to edit by hand.
   ───────────────────────────────────────────────────────────────────── */

/* The landing page holds its bar back until the intro curtain lifts. The blog
   has no curtain, so it is visible immediately. Everything else about how the
   bar looks comes from .nav.solid, which header.php puts on the element - so
   the two sites cannot drift apart here. */
.nav{opacity:1}
body{padding-top:var(--nav-h)}
@media(max-width:860px){body{padding-top:var(--nav-h);padding-bottom:76px}}

/* ── banner across the top of the listing ──────────────────────────── */
/* Framed and inset like the landing page's banner, but a third of the height:
   this one introduces the writing rather than selling the stay. */
.bhero{padding:var(--frame-pad)}
/* Full screen, like the landing page's banner, and stated with the same
   variables so the two stay in step. The nav height comes off as well: the
   landing page's bar floats over its banner, this one sits above it and takes
   up room, so without that subtraction the banner overruns the fold by exactly
   the height of the bar and cuts the standfirst in half on a phone. */
.bhero-frame{position:relative;height:calc(100svh - var(--nav-h) - var(--frame-pad)*2);
             min-height:540px;
             border-radius:var(--r-xl);overflow:hidden;background:var(--moss-x);isolation:isolate}
.bhero-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
/* A wide photograph cropped into a tall phone frame shows its middle, which on
   a landscape shot of a property is sky. Bias the crop downward to keep the
   building and the greenery in view. */
@media(max-width:700px){.bhero-frame img{object-position:50% 72%}}
/* Two layers, as on the landing page: one weighted to the side the copy sits on,
   one to the foot. Measured against the photograph rather than guessed. */
.bhero-frame::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,rgba(21,36,25,.88) 0%,rgba(21,36,25,.58) 42%,rgba(21,36,25,.12) 72%),
             linear-gradient(180deg,rgba(21,36,25,.42) 0%,rgba(21,36,25,.28) 34%,
                             rgba(21,36,25,.62) 66%,rgba(21,36,25,.92) 100%)}
.bhero-in{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;
          padding:clamp(24px,4vw,56px);color:#fff}
.bhero-in .crumbs{color:rgba(244,239,230,.72);margin-bottom:.9rem}
.bhero-in .crumbs a:hover{color:var(--sand)}
.bhero-in .kicker{color:var(--sage)}
.bhero-in h1{color:#fff;font-weight:300;max-width:16ch;
             font-size:clamp(2.2rem,4.6vw,3.8rem);text-shadow:0 2px 30px rgba(0,0,0,.3)}
.bhero-in h1 em{font-style:italic;color:var(--sand)}
.bhero-in .lead{color:rgba(244,239,230,.88);max-width:52ch}
@media(max-width:860px){.bhero-in .lead{font-size:.97rem}}
/* The landing page narrows the frame's inset on phones. That declaration sits
   in a media block full of hero-only rules, which the theme drops - so the one
   token that matters is restated here. Keep the two the same. */
/* Phones also carry the fixed Call/WhatsApp dock across the bottom 76px of the
   screen. Without taking that off too, the banner's own standfirst sits under it. */
@media(max-width:860px){:root{--frame-pad:8px}
  /* min-height would beat the calculation on a short screen and push the banner
     back under the dock, so on phones the calculation governs outright. */
  .bhero-frame{border-radius:20px;min-height:0;
               height:calc(100svh - var(--nav-h) - var(--frame-pad)*2 - 76px)}}
@media(max-width:600px){.bhero-in h1{max-width:none}.bhero-in .crumbs{display:none}}

/* the category pills sit between the banner and the grid */
.cats-wrap{padding-block:clamp(26px,3.4vw,46px)}
.cats-wrap .cats-nav{margin-top:0}

/* ── page head (archives, search, 404) ─────────────────────────────── */
.phead{padding:clamp(48px,7vw,96px) 0 clamp(28px,3.5vw,48px)}
.phead h1{max-width:20ch}
.phead .lead{max-width:60ch;margin-top:1.1rem}
.crumbs{font-size:.78rem;color:var(--ink-3);margin-bottom:1.2rem}
.crumbs a:hover{color:var(--terra)}
.crumbs span{opacity:.5;margin:0 .45rem}

/* ── category pills ────────────────────────────────────────────────── */
.cats-nav{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:2rem}
.cats-nav a{display:inline-flex;align-items:center;min-height:38px;padding:0 1rem;
            border-radius:999px;border:1px solid var(--hair);font-size:.82rem;
            color:var(--ink-2);transition:.3s var(--ease)}
.cats-nav a:hover{border-color:var(--ink);color:var(--ink)}
.cats-nav a[aria-current]{background:var(--ink);border-color:var(--ink);color:var(--bone)}

/* ── post grid ─────────────────────────────────────────────────────
   Ruled editorial cards, after the Jagriti Dham blog: a hairline above each
   one rather than a panel, a 3:2 photograph, date and category, then the
   title, the excerpt and a link out. Six tracks on a wide screen so the
   newest post can run as a lead across four of them.
   ───────────────────────────────────────────────────────────────── */
.pgrid{display:grid;grid-template-columns:minmax(0,1fr);gap:30px 32px}
@media(min-width:768px){.pgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 32px}}
@media(min-width:992px){.pgrid{grid-template-columns:repeat(6,minmax(0,1fr));gap:36px 32px}
  .pgrid>.pcard{grid-column:span 2}}
@media(min-width:1200px){.pgrid{gap:40px 36px}}

.pcard{display:flex;flex-direction:column;min-width:0;
       border-top:1px solid var(--hair);padding-top:20px;background:none}
.pcard .th{display:block;position:relative;overflow:hidden;border-radius:var(--r-md);
           background:var(--mist)}
.pcard .th img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;
               transition:transform 1.1s var(--ease)}
.pcard:hover .th img{transform:scale(1.04)}
.pcard .bd{display:flex;flex-direction:column;flex:1 1 auto;min-width:0;padding-top:16px}

/* the date quiet, the category in the house accent and underlined */
.pmeta{display:flex;flex-wrap:wrap;align-items:baseline;gap:.2rem .9rem;margin-bottom:.55rem;
       font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);font-weight:600}
.pmeta time{color:var(--ink-3)}
.pcats a{color:var(--terra);text-decoration:underline;text-underline-offset:3px;
         text-decoration-thickness:1px;transition:color .3s var(--ease)}
.pcats a:hover{color:var(--terra-d)}

.pcard h3{font-size:1.32rem;line-height:1.18;margin:0 0 .5rem;color:var(--ink)}
.pcard h3 a{color:inherit;transition:color .3s var(--ease)}
.pcard h3 a:hover{color:var(--terra)}

/* four lines, so a row of three keeps one rhythm */
.pex{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;overflow:hidden;
     font-size:.94rem;line-height:1.6;color:var(--ink-2);margin:0}

.pmore{display:inline-flex;align-items:center;gap:.45rem;margin-top:auto;padding-top:1rem;
       min-height:44px;font-size:.84rem;font-weight:600;letter-spacing:.02em;color:var(--terra)}
.pmore .arr{transition:transform .45s var(--ease)}
.pcard:hover .pmore .arr{transform:translateX(4px)}
.pmore:hover{color:var(--terra-d)}

/* ── the lead: the newest post, four tracks by two rows ──────────── */
@media(min-width:992px){
  .pgrid>.pcard.lead-post{grid-column:1/span 4;grid-row:span 2}
  .pgrid>.pcard.lead-post .th img{aspect-ratio:4/3}
  .pgrid>.pcard.lead-post .bd{padding-top:24px}
  .pgrid>.pcard.lead-post h3{font-size:clamp(1.8rem,3vw,2.5rem);line-height:1.14;
                             letter-spacing:-.014em;margin-bottom:.7rem}
  .pgrid>.pcard.lead-post .pex{font-size:1.06rem;line-height:1.65;max-width:62ch;
                               -webkit-line-clamp:5}
  /* the two beside it sit tighter, on a wider crop, so the pair finishes level */
  .pgrid>.pcard:nth-child(2) .th img,
  .pgrid>.pcard:nth-child(3) .th img{aspect-ratio:16/9}
  .pgrid>.pcard:nth-child(2) .pex,
  .pgrid>.pcard:nth-child(3) .pex{-webkit-line-clamp:2}
  /* a lone post should not sit in two thirds of an empty grid */
  .pgrid:has(>.pcard:only-child)>.pcard{grid-column:1/-1;grid-row:auto;
    display:grid;grid-template-columns:minmax(0,3fr) minmax(0,4fr);column-gap:36px;align-items:center}
  .pgrid:has(>.pcard:only-child)>.pcard .bd{padding-top:0}
  .pgrid:has(>.pcard:only-child)>.pcard .th img{aspect-ratio:3/2}
}

/* ── single post ───────────────────────────────────────────────────── */
.post{padding-bottom:clamp(48px,6vw,88px)}
.post-head{max-width:46rem;margin-inline:auto;text-align:center;
           padding:clamp(40px,5.5vw,72px) 0 clamp(24px,3vw,40px)}
.post-head h1{font-size:clamp(2.1rem,4.2vw,3.4rem);margin-top:1rem}
.post-head .pmeta{justify-content:center;margin-top:1.4rem}
.post-cover{width:min(1100px,100% - var(--gut)*2);margin:0 auto clamp(28px,4vw,56px);
            border-radius:var(--r-xl);overflow:hidden;background:var(--mist)}
.post-cover img{width:100%;height:auto}

/* ── post body ─────────────────────────────────────────────────────── */
.prose{display:grid;grid-template-columns:1fr min(44rem,100%) 1fr;
       font-size:1.06rem;line-height:1.75;color:var(--ink-2)}
.prose>*{grid-column:2}
.prose>*+*{margin-top:1.35em}
.prose>.alignwide{grid-column:1/-1;width:min(52rem,100%);margin-inline:auto}
.prose>.alignfull{grid-column:1/-1;width:100%}
.prose h2{font-size:clamp(1.7rem,2.8vw,2.3rem);color:var(--ink);margin-top:2.2em}
.prose h3{font-size:clamp(1.35rem,2.1vw,1.7rem);color:var(--ink);margin-top:1.8em}
.prose h4{font-family:'Manrope',sans-serif;font-size:1.02rem;font-weight:700;
          letter-spacing:.02em;color:var(--ink);margin-top:1.8em}
.prose a{color:var(--terra);text-decoration:underline;text-underline-offset:3px;
         text-decoration-thickness:1px}
.prose a:hover{color:var(--terra-d)}
.prose strong{color:var(--ink);font-weight:700}
.prose ul,.prose ol{padding-left:1.3rem;display:grid;gap:.55rem}
.prose li::marker{color:var(--terra)}
.prose blockquote{border-left:2px solid var(--terra);padding:.2rem 0 .2rem 1.4rem;
                  font-family:'Cormorant Garamond',serif;font-size:1.5rem;
                  line-height:1.35;color:var(--ink);font-style:italic}
.prose blockquote p{color:inherit;font-size:inherit}
.prose img,.prose video{border-radius:var(--r-md)}
.prose figure{margin-inline:0}
.prose figcaption{font-size:.8rem;color:var(--ink-3);margin-top:.6rem;text-align:center}
.prose hr{border:0;border-top:1px solid var(--hair);margin-block:2.4em}
.prose code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.88em;
            background:var(--paper);border:1px solid var(--hair);border-radius:6px;padding:.1em .4em}
.prose pre{background:var(--moss-x);color:var(--bone);padding:1.2rem;border-radius:var(--r-md);
           overflow-x:auto;font-size:.86rem;line-height:1.6}
.prose pre code{background:none;border:0;padding:0;color:inherit}
.prose table{width:100%;border-collapse:collapse;font-size:.94rem}
.prose th,.prose td{text-align:left;padding:.7rem .8rem;border-bottom:1px solid var(--hair)}
.prose th{color:var(--ink);font-weight:700}
.prose .wp-caption{max-width:100%;margin-inline:0}
.prose .wp-caption img{border-radius:var(--r-md)}
.prose .wp-caption-text{font-size:.8rem;color:var(--ink-3);margin-top:.5rem;text-align:center}
.prose .alignleft{float:left;margin:0 1.4rem 1rem 0;max-width:50%}
.prose .alignright{float:right;margin:0 0 1rem 1.4rem;max-width:50%}
.prose .aligncenter{margin-inline:auto}
.prose .alignwide{width:min(52rem,100%);margin-inline:auto}
@media(max-width:640px){.prose .alignleft,.prose .alignright{float:none;max-width:100%;margin:0}}

/* ── tags, share, author ───────────────────────────────────────────── */
.ptags{max-width:44rem;margin:2.6rem auto 0;display:flex;flex-wrap:wrap;gap:.45rem}
.ptags a{font-size:.76rem;color:var(--ink-3);border:1px solid var(--hair);
         border-radius:999px;padding:.32rem .8rem;transition:.3s}
.ptags a:hover{border-color:var(--ink);color:var(--ink)}

/* ── related ───────────────────────────────────────────────────────── */
.related{padding-top:clamp(48px,6vw,88px)}
.related h2{font-size:clamp(1.6rem,2.6vw,2.2rem);margin-bottom:1.8rem}

/* ── the index at the foot of a listing ────────────────────────────
   Recent posts, categories, archives — three ruled rows, the label in the
   left column and the list running in newspaper columns beside it.
   ───────────────────────────────────────────────────────────────── */
.bindex{margin-top:clamp(56px,7vw,96px)}
.bindex-row{padding:20px 0 18px;border-bottom:1px solid var(--hair)}
.bindex-row:first-child{border-top:1px solid var(--hair)}

.bindex-title{margin:0 0 .35rem;font-family:'Manrope',system-ui,sans-serif;
  font-size:.68rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--moss);line-height:1.4}

.bindex-list{list-style:none;margin:0;padding:0;columns:2;column-gap:28px}
.bindex-list li{padding:8px 0;break-inside:avoid;font-size:.95rem;color:var(--ink-3);
  line-height:1.45;list-style:none}
.bindex-list a{display:inline;color:var(--ink-2);transition:color .3s var(--ease)}
.bindex-list a:hover{color:var(--terra);text-decoration:underline;text-underline-offset:4px}

/* the recent stories read as titles, not as index entries */
.bindex-recent{columns:1}
.bindex-recent li{padding:9px 0}
.bindex-recent a{font-family:'Cormorant Garamond',Georgia,serif;font-size:1.12rem;
  font-weight:500;line-height:1.24;color:var(--ink)}

@media(min-width:768px){
  .bindex-row{display:grid;grid-template-columns:150px minmax(0,1fr);
              column-gap:28px;padding:22px 0 20px}
  .bindex-recent{columns:2}
}
@media(min-width:992px){
  .bindex-row{grid-template-columns:190px minmax(0,1fr);column-gap:36px}
  .bindex-list{columns:3}
}
@media(min-width:1200px){
  .bindex-list{column-gap:40px}
  .bindex-cats,.bindex-arch{columns:4}
}

/* ── pagination ────────────────────────────────────────────────────── */
.pnav{display:flex;justify-content:center;gap:.5rem;flex-wrap:wrap;margin-top:clamp(36px,4.5vw,64px)}
.pnav .page-numbers{display:grid;place-items:center;min-width:46px;height:46px;padding:0 .8rem;
                    border-radius:999px;border:1px solid var(--hair);font-size:.9rem;
                    color:var(--ink-2);transition:.3s var(--ease)}
.pnav a.page-numbers:hover{border-color:var(--ink);color:var(--ink)}
.pnav .page-numbers.current{background:var(--ink);border-color:var(--ink);color:var(--bone)}
.pnav .dots{border-color:transparent}

/* ── empty state / search ──────────────────────────────────────────── */
.empty{max-width:40rem;margin-inline:auto;text-align:center;padding-block:clamp(40px,6vw,90px)}
.searchform{display:flex;gap:.6rem;max-width:26rem;margin:1.6rem auto 0}
.searchform input{flex:1;min-height:50px;padding:.7rem 1rem;border:1px solid var(--sand-d);
                  border-radius:var(--r-sm);background:#fff}
.searchform input:focus{outline:none;border-color:var(--moss);box-shadow:0 0 0 3px rgba(59,90,69,.15)}

/* ── skip link, for keyboard users ─────────────────────────────────── */
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--bone);
      padding:.8rem 1.2rem;border-radius:0 0 var(--r-sm) 0;z-index:300}
.skip:focus{left:0}


/* ─────────────────────────────────────────────────────────────────────
   PART 3 - block editor output. WordPress emits these class names; the
   rules below dress them in the site's own clothes.
   ───────────────────────────────────────────────────────────────────── */

/* buttons */
.prose .wp-block-buttons{display:flex;flex-wrap:wrap;gap:.7rem}
.prose .wp-block-button__link{display:inline-flex;align-items:center;justify-content:center;
  min-height:54px;padding:0 1.6rem;border-radius:999px;border:1px solid transparent;
  font-family:'Manrope',sans-serif;font-size:.93rem;font-weight:600;text-decoration:none;
  background:var(--ink);color:var(--bone);transition:.4s var(--ease)}
.prose .wp-block-button__link:hover{background:var(--moss-d);transform:translateY(-2px);color:var(--bone)}
.prose .is-style-outline .wp-block-button__link{background:transparent;border-color:var(--hair);color:var(--ink)}
.prose .is-style-outline .wp-block-button__link:hover{border-color:var(--ink);background:rgba(23,28,24,.04)}

/* quotes */
.prose .wp-block-quote{border-left:2px solid var(--terra);padding:.2rem 0 .2rem 1.4rem;
  font-family:'Cormorant Garamond',serif;font-size:1.5rem;line-height:1.35;color:var(--ink);font-style:italic}
.prose .wp-block-quote cite,.prose blockquote cite{display:block;margin-top:.7rem;
  font-family:'Manrope',sans-serif;font-size:.78rem;font-style:normal;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3)}
.prose .wp-block-pullquote{border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);
  padding:2rem 0;text-align:center;background:none}
.prose .wp-block-pullquote blockquote{border:0;padding:0;font-size:clamp(1.6rem,2.6vw,2.2rem)}

/* images, galleries, embeds */
.prose .wp-block-image{margin-inline:0}
.prose .wp-block-image img{border-radius:var(--r-md);width:100%;height:auto}
.prose .wp-block-image figcaption,.prose .wp-block-embed figcaption{font-size:.8rem;
  color:var(--ink-3);margin-top:.6rem;text-align:center}
.prose .wp-block-gallery{gap:12px}
.prose .wp-block-gallery img{border-radius:var(--r-md)}
.prose .wp-block-embed__wrapper{position:relative;border-radius:var(--r-md);overflow:hidden}
.prose .wp-block-embed iframe{width:100%;aspect-ratio:16/9;height:auto;border:0;display:block}
.prose .wp-block-cover{border-radius:var(--r-lg);overflow:hidden}

/* structure */
.prose .wp-block-columns{gap:clamp(1.2rem,2.4vw,2.4rem)}
@media(max-width:780px){.prose .wp-block-columns{flex-wrap:wrap}
  .prose .wp-block-column{flex-basis:100%!important}}
.prose .wp-block-group.has-background{border-radius:var(--r-lg);
  padding:clamp(1.4rem,2.6vw,2.2rem)}
.prose .wp-block-separator{border:0;border-top:1px solid var(--hair);width:100%;opacity:1}
.prose .wp-block-separator.is-style-dots{border:0;text-align:center}
.prose .wp-block-table table{width:100%;border-collapse:collapse;font-size:.94rem}
.prose .wp-block-table td,.prose .wp-block-table th{border-bottom:1px solid var(--hair);
  border-left:0;border-right:0;border-top:0;padding:.7rem .8rem;text-align:left}
.prose .wp-block-table th{color:var(--ink);font-weight:700}
.prose .wp-block-table figcaption{font-size:.8rem;color:var(--ink-3);margin-top:.6rem}
.prose .wp-block-code{background:var(--moss-x);color:var(--bone);padding:1.2rem;
  border-radius:var(--r-md);overflow-x:auto}
.prose .wp-block-preformatted{white-space:pre-wrap}

/* headings the editor inserts keep the serif scale */
.prose .wp-block-heading{color:var(--ink)}

/* a block given a brand background gets readable text inside it */
.prose .has-moss-x-background-color,.prose .has-moss-background-color,
.prose .has-ink-background-color{color:var(--bone)}
.prose .has-moss-x-background-color a,.prose .has-moss-background-color a,
.prose .has-ink-background-color a{color:var(--sage)}

/* Alignment must have the last word: the block rules above reset figure
   margins, which would otherwise stop a wide block centring in its track. */
.prose>.alignwide{grid-column:1/-1;width:min(52rem,100%);margin-inline:auto}
.prose>.alignfull{grid-column:1/-1;width:100%;margin-inline:0}