/*
Theme Name: Heritage Magazine
Theme URI: https://heritagemagazine.heritagesociety.mv/
Description: Custom Dhivehi (RTL) magazine theme for the Maldives Heritage Society. Native WordPress templates — home, category and single — with no page builder. Matches the main heritagesociety.mv design system (MV Typewriter / gold + cream palette).
Author: Maldives Heritage Society
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: mhs-magazine
*/

/* ============================================================= fonts === */
@font-face{font-family:'MV Typewriter';src:url('/wp-content/uploads/2024/01/mvtyper.woff') format('woff');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'MV Typewriter';src:url('/wp-content/uploads/2024/01/mvtypebold.woff') format('woff');font-weight:600 700;font-style:normal;font-display:swap;}

/* ============================================================ tokens === */
:root{
  --mhs-gold:#C2A368;--mhs-gold-d:#A98842;--mhs-ink:#1b1a16;
  --mhs-bar:120px;--mhs-bg:#f6f2ea;--mhs-line:#e3ddcd;
  --mhs-mut:#8a8472;--mhs-body:#2f2d27;--mhs-dark:#14150f;
}
*,*::before,*::after{box-sizing:border-box;}
html{overflow-x:clip;-webkit-text-size-adjust:100%;}
body{
  margin:0;overflow-x:clip;background:var(--mhs-bg);color:var(--mhs-body);
  font-family:'MV Typewriter','Inter',system-ui,sans-serif;
  font-size:16px;line-height:1.9;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;}
a{color:var(--mhs-gold-d);}
::selection{background:rgba(194,163,104,.28);}

/* ============================================================ header === */
/* contain:layout keeps the bar's own resize from invalidating the page's layout */
.mhs-th{position:absolute;top:0;left:0;right:0;z-index:9000;contain:layout style;
  transition:background .45s ease,box-shadow .45s ease;}
.mhs-th.is-solid{position:fixed;background:rgba(16,17,14,.94);backdrop-filter:blur(8px);box-shadow:0 10px 30px -18px rgba(0,0,0,.8);}
.mhs-th__in{max-width:1180px;margin:0 auto;padding:0 26px;display:flex;align-items:center;justify-content:space-between;gap:18px;}
.mhs-th__top{border-bottom:1px solid rgba(255,255,255,.12);}
.mhs-th__top .mhs-th__in{justify-content:flex-start;gap:26px;height:44px;}
.mhs-th__pills{margin-inline-start:auto;display:flex;align-items:center;gap:10px;}
/* compact logo + burger in the top bar — mobile only, and only once stuck */
.mhs-th__minilogo,.mhs-th__burger--top{display:none;}
/* pills — identical to the main website's gold header buttons */
.mhs-th__pill{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;
  background:var(--mhs-gold);text-decoration:none;font-size:12px;font-weight:600;line-height:1;
  padding:7px 12px;border-radius:6px;white-space:nowrap;text-shadow:0 1px 2px rgba(0,0,0,.18);transition:box-shadow .2s;}
.mhs-th__pill,.mhs-th__pill:link,.mhs-th__pill:visited{color:#fff;}
.mhs-th__pill::before{content:"";position:absolute;inset:0;background:#4a4a4a;transform:translateY(-101%);transition:transform .3s ease;}
.mhs-th__pill:hover::before{transform:translateY(0);}
.mhs-th__pill:hover{box-shadow:0 8px 18px -10px rgba(0,0,0,.45);}
.mhs-th__pill-t{position:relative;z-index:1;color:#fff;}
/* login / account pill — black background (gold reveal on hover) */
.mhs-th__pill--dark{background:#14150f;}
.mhs-th__pill--dark::before{background:var(--mhs-gold-d);}
.mhs-th__main .mhs-th__in{height:98px;}
.mhs-th__logo{display:block;}
.mhs-th__logo img{height:86px;width:auto;display:block;} /* matches the main website header */
.mhs-th__nav{display:flex;align-items:center;gap:30px;}
.mhs-th__link{position:relative;text-decoration:none;font-size:16px;font-weight:700;line-height:2;padding-bottom:8px;white-space:nowrap;}
.mhs-th__link,.mhs-th__link:link,.mhs-th__link:visited,.mhs-th__link.is-on,.mhs-th__link.is-on:visited{color:#fff;}
.mhs-th__link:hover,.mhs-th__link:focus{color:var(--mhs-gold);}
.mhs-th__link.is-on:after{content:"";position:absolute;inset-inline:0;bottom:0;height:3px;background:var(--mhs-gold);border-radius:2px;}
.mhs-th__burger{display:none;background:none;border:0;cursor:pointer;padding:8px;}
.mhs-th__burger span{display:block;width:26px;height:2px;background:#fff;margin:5px 0;}

/* --- desktop: the header condenses as it sticks ------------------------- *
 * The nav lives in the tall row here, so that row can't collapse the way it
 * does on mobile. Instead the pill bar folds away and the logo row shrinks —
 * same easing and duration as the mobile transition, so they feel related. */
@media(min-width:721px){
  /* Only the two bar heights animate. Everything inside moves with transform +
     opacity, which the compositor handles without re-running layout on each
     frame — animating font-size/padding/width here made the scroll stutter. */
  .mhs-th__top{overflow:hidden;height:44px;
    transition:height .45s cubic-bezier(.4,0,.2,1),opacity .3s ease;}
  .mhs-th.is-solid .mhs-th__top{height:0;opacity:0;border-bottom-color:transparent;}
  .mhs-th__main .mhs-th__in{transition:height .45s cubic-bezier(.4,0,.2,1);}
  .mhs-th.is-solid .mhs-th__main .mhs-th__in{height:64px;}
  /* scale, don't resize: 86px × .56 ≈ 48px, with no layout pass */
  .mhs-th__logo{transform-origin:right center;transition:transform .45s cubic-bezier(.4,0,.2,1);}
  [dir="ltr"] .mhs-th__logo{transform-origin:left center;}
  .mhs-th.is-solid .mhs-th__logo{transform:scale(.56);}
}

/* ============================================================== hero === */
.mhs-hero{position:relative;width:100vw;margin-left:calc(50% - 50vw);min-height:64vh;display:flex;align-items:flex-end;
  background:#14150f center/cover no-repeat;background-attachment:fixed;padding:calc(var(--mhs-bar) + 40px) 0 60px;}
.mhs-hero__ov{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,12,8,.5),rgba(10,12,8,.7) 55%,rgba(10,12,8,.9));}
/* same container as the header (.mhs-th__in) so the columns line up exactly */
.mhs-hero__in{position:relative;z-index:2;max-width:1180px;margin:0 auto;width:100%;padding:0 26px;}
.mhs-hero__title{color:#fff;font-weight:700;font-size:clamp(28px,4.4vw,50px);line-height:1.55;margin:0;}
.mhs-hero__meta{margin:16px 0 0;color:#e2d9c2;font-size:15px;display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;}
.mhs-hero__meta .dot{width:4px;height:4px;border-radius:50%;background:var(--mhs-gold);display:inline-block;}
/* byline: date | ✎ name */
.mhs-hero__bar{color:var(--mhs-gold);opacity:.65;}
.mhs-byline{display:inline-flex;align-items:center;gap:7px;}
.mhs-byline__ico{flex:0 0 auto;color:var(--mhs-gold);}
.mhs-eyebrow{display:inline-block;color:var(--mhs-gold);font-size:14px;font-weight:600;letter-spacing:.02em;margin:0 0 12px;}
.mhs-eyebrow,.mhs-eyebrow:link,.mhs-eyebrow:visited{color:var(--mhs-gold);text-decoration:none;}
.mhs-eyebrow:hover{color:#fff;}
/* shorter hero for content pages (account, plans, checkout, login) */
.mhs-hero--page{min-height:42vh;}
.mhs-page{padding-bottom:72px;}

/* breadcrumbs (inside the hero) */
.mhs-crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:9px;font-size:13.5px;margin:0 0 14px;}
.mhs-crumbs,.mhs-crumbs b{color:#e6dfcc;font-weight:400;}
.mhs-crumbs a,.mhs-crumbs a:link,.mhs-crumbs a:visited{color:#cfc5aa;text-decoration:none;transition:color .15s;}
.mhs-crumbs a:hover,.mhs-crumbs a:focus{color:#fff;}
.mhs-crumbs span{opacity:.6;color:#cfc5aa;}

/* ========================================================= home lead === */
/* the cinematic lead hero: big featured article + a strip of recent pieces */
/* content sits at the bottom, headline aligned to the right (RTL start) */
.mhs-hero--lead{min-height:100vh;align-items:stretch;padding-bottom:52px;}
.mhs-hero--lead .mhs-hero__in{display:flex;flex-direction:column;justify-content:flex-end;}
.mhs-lead__body{max-width:820px;margin-inline-start:0;text-align:right;}
.mhs-lead__title{font-weight:700;font-size:clamp(30px,4.6vw,54px);line-height:1.5;margin:0;}
/* the headline is a link but must never show the browser's underline */
.mhs-lead__title a,.mhs-lead__title a:link,.mhs-lead__title a:visited{color:var(--mhs-gold);text-decoration:none;}
.mhs-lead__title a:hover{color:#e4c987;}
/* hero excerpt: exactly two lines (hidden on mobile — see responsive) */
.mhs-lead__excerpt{color:rgba(255,255,255,.82);font-size:clamp(15px,1.4vw,17px);line-height:2.05;margin:18px 0 0;max-width:64ch;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.mhs-lead__body{will-change:opacity,transform;}
.mhs-lead__foot{padding-top:30px;}
.mhs-lead__divider{height:1px;background:rgba(255,255,255,.28);margin:0 0 24px;}

/* rotating hero — crossfading background layers */
.mhs-hs{overflow:hidden;}
.mhs-hs__bg{position:absolute;inset:0;z-index:0;background:#14150f center/cover no-repeat;background-attachment:fixed;opacity:0;will-change:opacity;}
.mhs-hs__bg.is-active{opacity:1;}
.mhs-hs .mhs-hero__ov{z-index:1;}
.mhs-hs .mhs-hero__in{z-index:2;}
/* card rail — an infinite centred carousel: the active card sits in the middle
   with cards always on both sides, and the highlight moves right → left (RTL).
   Edges fade so cards dissolve in/out. */
.mhs-hs__rail{overflow:hidden;position:relative;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 9%,#000 91%,transparent);
  mask-image:linear-gradient(to right,transparent,#000 9%,#000 91%,transparent);}
.mhs-hs__rail.is-scroll{overflow-x:auto;scrollbar-width:none;-webkit-mask-image:none;mask-image:none;}
.mhs-hs__rail.is-scroll::-webkit-scrollbar{display:none;}
.mhs-hs__track{display:flex;flex-wrap:nowrap;width:max-content;gap:14px;direction:rtl;will-change:transform;}
.mhs-hs__card{flex:0 0 auto;direction:rtl;display:flex;align-items:center;gap:12px;width:236px;padding:9px;border-radius:12px;cursor:pointer;
  background:rgba(255,255,255,.05);opacity:.42;transition:opacity .45s ease,background .3s,box-shadow .3s;}
.mhs-hs__card,.mhs-hs__card:link,.mhs-hs__card:visited{text-decoration:none;color:inherit;}
.mhs-hs__card:hover{opacity:1;background:rgba(255,255,255,.12);}
.mhs-hs__card.is-active{opacity:1;background:rgba(255,255,255,.14);box-shadow:inset 0 0 0 1px rgba(194,163,104,.55);}
.mhs-hs__thumbimg{width:72px;height:72px;flex:0 0 auto;border-radius:9px;background:#2a2a22 center/cover no-repeat;box-shadow:0 6px 18px -8px rgba(0,0,0,.7);}
.mhs-hs__thumbcap{font-size:13px;line-height:1.7;color:#e6dfcc;transition:color .2s;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
.mhs-hs__card:hover .mhs-hs__thumbcap,.mhs-hs__card.is-active .mhs-hs__thumbcap{color:#fff;}

/* ============================================================ layout === */
.mhs-wrap{max-width:1180px;margin:0 auto;padding:64px 26px 0;}
.mhs-wrap--tight{max-width:820px;}
.mhs-sec{margin-bottom:16px;}
.mhs-h{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-size:clamp(21px,2.4vw,28px);font-weight:700;color:var(--mhs-ink);margin:0 0 24px;}
.mhs-h__link,.mhs-h__link:link,.mhs-h__link:visited{color:inherit;text-decoration:none;transition:color .15s;}
.mhs-h__link:hover,.mhs-h__link:focus{color:var(--mhs-gold-d);}
.mhs-h__more{font-size:14px;font-weight:600;}
.mhs-h__more,.mhs-h__more:link,.mhs-h__more:visited{color:var(--mhs-gold-d);text-decoration:none;}
.mhs-h__more:hover{color:var(--mhs-ink);}

/* category quick-filter pills (link to the category pages) */
.mhs-catpills{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 40px;}
.mhs-catpill{display:inline-flex;align-items:center;border:1px solid var(--mhs-line);background:#fff;border-radius:999px;
  padding:8px 18px;font-size:14px;font-weight:600;line-height:1.7;text-decoration:none;transition:all .16s;}
.mhs-catpill,.mhs-catpill:link,.mhs-catpill:visited{color:var(--mhs-ink);}
.mhs-catpill:hover{border-color:var(--mhs-gold-d);box-shadow:0 4px 14px rgba(35,32,27,.08);transform:translateY(-1px);}
.mhs-catpill.is-on{background:var(--mhs-ink);border-color:var(--mhs-ink);color:#fff;}

/* ========================================================= book cards === */
/* the "ފޮތްއަލަމާރި" section — portrait covers, 5 per row, no category/date */
.mhs-bookgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:26px 22px;}
.mhs-bcard{display:block;text-decoration:none;transition:transform .2s;}
.mhs-bcard,.mhs-bcard:link,.mhs-bcard:visited{color:inherit;}
.mhs-bcard:hover{transform:translateY(-5px);}
.mhs-bcard__cover{position:relative;display:block;aspect-ratio:3/4;border-radius:10px;overflow:hidden;background:#ded8c8 center/cover no-repeat;
  box-shadow:0 12px 28px -14px rgba(35,32,27,.55);transition:box-shadow .2s;}
.mhs-bcard:hover .mhs-bcard__cover{box-shadow:0 22px 42px -16px rgba(35,32,27,.6);}
/* title hidden by default — reveals over the cover on hover with a dark gradient */
.mhs-bcard__title{position:absolute;inset-inline:0;bottom:0;padding:44px 14px 15px;color:#fff;font-size:14px;font-weight:700;line-height:1.65;text-align:center;
  background:linear-gradient(transparent,rgba(0,0,0,.5) 42%,rgba(0,0,0,.9));
  opacity:0;transform:translateY(10px);transition:opacity .28s ease,transform .28s ease;
  display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;}
.mhs-bcard:hover .mhs-bcard__title,.mhs-bcard:focus-visible .mhs-bcard__title{opacity:1;transform:translateY(0);}
@media(max-width:1100px){.mhs-bookgrid{grid-template-columns:repeat(4,1fr);}}
@media(max-width:820px){.mhs-bookgrid{grid-template-columns:repeat(3,1fr);}}
@media(max-width:520px){.mhs-bookgrid{grid-template-columns:repeat(2,1fr);gap:20px 16px;}}

/* ============================================== mobile slide-out menu === */
/* mirrors the main website's off-canvas: backdrop + right-hand panel */
.mhs-offcanvas{position:fixed;inset:0;z-index:10000;visibility:hidden;transition:visibility 0s linear .36s;}
.mhs-offcanvas.is-open{visibility:visible;transition:visibility 0s;}
.mhs-offcanvas__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.5);opacity:0;transition:opacity .3s;}
.mhs-offcanvas.is-open .mhs-offcanvas__backdrop{opacity:1;}
.mhs-offcanvas__panel{position:absolute;top:0;right:0;height:100%;width:86%;max-width:370px;direction:rtl;color:#fff;
  background:var(--mhs-dark);display:flex;flex-direction:column;align-items:stretch;padding:26px 22px 40px;overflow-y:auto;
  transform:translateX(100%);transition:transform .34s cubic-bezier(.4,0,.2,1);}
.mhs-offcanvas.is-open .mhs-offcanvas__panel{transform:translateX(0);}
.mhs-offcanvas__close{position:absolute;top:16px;left:16px;width:44px;height:44px;display:flex;align-items:center;justify-content:center;
  color:#fff;background:rgba(255,255,255,.12);border:0;border-radius:50%;cursor:pointer;-webkit-appearance:none;appearance:none;
  -webkit-tap-highlight-color:transparent;transition:background .2s,transform .25s;}
.mhs-offcanvas__close:hover,.mhs-offcanvas__close:focus{background:rgba(255,255,255,.24);outline:none;transform:rotate(90deg);}
.mhs-offcanvas__close svg{width:26px;height:26px;display:block;}
.mhs-oc-logo{align-self:center;margin:14px 0 26px;}
.mhs-oc-logo img{height:92px;width:auto;display:block;}
.mhs-oc-nav{display:flex;flex-direction:column;align-items:stretch;gap:0;width:100%;}
.mhs-oc-nav a,.mhs-oc-nav a:link,.mhs-oc-nav a:visited{color:#fff;text-decoration:none;font-size:20px;line-height:1.75;text-align:right;
  padding:7px 14px;transition:color .15s;}
.mhs-oc-nav a:hover,.mhs-oc-nav a:focus,.mhs-oc-nav a.is-on{color:var(--mhs-gold);}
.mhs-oc-ctas{display:flex;flex-wrap:wrap;justify-content:flex-start;gap:10px;width:100%;margin-top:26px;
  padding-top:22px;border-top:1px solid rgba(255,255,255,.14);}
.mhs-oc-ctas .mhs-th__pill{font-size:13px;padding:11px 16px;}
body.mhs-lock{overflow:hidden;}

/* ------------------------------------------------- single book page --- */
/* the cover is portrait, so the hero carries only the centred title and the
   cover is shown whole below it — beside the write-up on desktop, above it
   on narrow screens */
.mhs-hero--book{min-height:46vh;}
.mhs-hero--book .mhs-hero__in{text-align:center;padding-bottom:34px;}
.mhs-hero--book .mhs-crumbs{justify-content:center;}
.mhs-hero--book .mhs-hero__title{margin-inline:auto;max-width:24ch;}
.mhs-hero--book .mhs-hero__meta{justify-content:center;}
.mhs-bookcover{display:flex;justify-content:center;}
.mhs-bookcover img{display:block;width:100%;max-width:360px;height:auto;border-radius:14px;
  box-shadow:0 30px 60px -24px rgba(35,32,27,.62);background:#ded8c8;}
/* book details above the write-up — "label: value" rows in a tinted panel */
.mhs-bookmeta{margin:0 0 26px;padding:16px 20px;background:#faf7ef;border:1px solid #ece0c8;border-radius:12px;
  display:flex;flex-direction:column;gap:9px;}
.mhs-bookmeta__row{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 10px;}
.mhs-bookmeta dt{flex:0 0 auto;color:var(--mhs-mut);font-size:13.5px;font-weight:600;line-height:1.95;}
.mhs-bookmeta dt::after{content:":";}
.mhs-bookmeta dd{margin:0;color:var(--mhs-ink);font-size:15.5px;font-weight:600;line-height:1.95;}
/* the share row sits straight under the write-up — no rule, no big gap */
.mhs-wrap--book .mhs-share{justify-content:flex-start;margin-top:22px;padding-top:0;border-top:0;}

/* desktop: two columns. RTL puts column 1 on the right, so the write-up and
   share sit right and the cover + details sit left. */
@media(min-width:901px){
  .mhs-wrap--book{max-width:960px;display:grid;grid-template-columns:500px minmax(240px,360px);
    grid-template-rows:auto auto 1fr;   /* row 3 soaks up the aside's extra height */
    gap:0 48px;align-items:start;padding-top:48px;}
  .mhs-wrap--book .mhs-bookside{grid-column:2;grid-row:1/span 3;}
  .mhs-wrap--book .mhs-article{grid-column:1;grid-row:1;}
  .mhs-wrap--book .mhs-share{grid-column:1;grid-row:2;}
}
/* stacked: cover + details first, then the write-up, in a 500px measure */
@media(max-width:900px){
  .mhs-wrap--book{max-width:552px;}
  .mhs-wrap--book .mhs-bookside{margin:0 auto 30px;max-width:340px;}
  .mhs-wrap--book .mhs-bookcover img{max-width:min(300px,100%);}
}
@media(max-width:720px){
  .mhs-hero--book{min-height:38vh;}
  .mhs-wrap--book{max-width:536px;}   /* gutters drop to 18px */
}

/* ====================================================== article cards === */
.mhs-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;}
.mhs-acard{display:flex;flex-direction:column;background:#fff;border:1px solid #d7cdb6;border-radius:16px;overflow:hidden;padding:2px;
  text-decoration:none;box-shadow:0 10px 26px -20px rgba(35,32,27,.5);transition:transform .2s,box-shadow .2s,border-color .2s;}
.mhs-acard,.mhs-acard:link,.mhs-acard:visited{color:inherit;}
.mhs-acard:hover{transform:translateY(-5px);box-shadow:0 26px 46px -22px rgba(35,32,27,.55);border-color:#c9bd9e;}
.mhs-acard__img{position:relative;display:block;aspect-ratio:16/10;background:#ded8c8 center/cover no-repeat;border-radius:14px 14px 0 0;}
.mhs-acard__body{display:flex;flex-direction:column;gap:9px;padding:20px 22px 24px;flex:1;}
.mhs-acard__cat{color:var(--mhs-gold-d);font-size:12.5px;font-weight:600;letter-spacing:.02em;}
.mhs-acard__title{color:var(--mhs-ink);font-size:18px;font-weight:700;line-height:1.75;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
.mhs-acard__date{margin-top:auto;padding-top:4px;color:var(--mhs-mut);font-size:13px;}

/* wide/feature card variant (first item on archives) */
.mhs-grid--feat .mhs-acard:first-child{grid-column:1/-1;flex-direction:row;}
.mhs-grid--feat .mhs-acard:first-child .mhs-acard__img{flex:0 0 52%;aspect-ratio:auto;}
.mhs-grid--feat .mhs-acard:first-child .mhs-acard__body{justify-content:center;gap:12px;padding:34px 40px;}
.mhs-grid--feat .mhs-acard:first-child .mhs-acard__title{font-size:clamp(22px,2.2vw,30px);-webkit-line-clamp:4;}
.mhs-grid--feat .mhs-acard:first-child .mhs-acard__cat{font-size:13.5px;}

/* ========================================================= single art === */
.mhs-article{font-size:18px;line-height:2.15;color:var(--mhs-body);}
.mhs-article > *:first-child{margin-top:0;}
.mhs-article p{margin:0 0 1.5em;}
.mhs-article h2{font-size:24px;font-weight:700;color:var(--mhs-ink);line-height:1.7;margin:1.8em 0 .7em;}
.mhs-article h3{font-size:20px;font-weight:700;color:var(--mhs-ink);line-height:1.7;margin:1.6em 0 .6em;}
.mhs-article a:link,.mhs-article a:visited{color:var(--mhs-gold-d);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;}
.mhs-article a:hover{color:var(--mhs-ink);}
.mhs-article img,.mhs-article figure img{border-radius:12px;cursor:zoom-in;}
.mhs-article figure{margin:1.8em 0;}
.mhs-article figcaption{margin-top:10px;font-size:14px;color:var(--mhs-mut);text-align:center;}
.mhs-article blockquote{margin:1.8em 0;padding:6px 24px;border-inline-start:3px solid var(--mhs-gold);color:#4a463c;font-size:19px;}
.mhs-article ul,.mhs-article ol{margin:0 0 1.5em;padding-inline-start:1.4em;}
.mhs-article li{margin:0 0 .5em;}
.mhs-article hr{border:0;border-top:1px solid var(--mhs-line);margin:2.2em 0;}
.mhs-share{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:44px 0 0;padding-top:26px;border-top:1px solid var(--mhs-line);}
.mhs-share__l{color:var(--mhs-mut);font-size:14px;}
.mhs-share a{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;
  border:1px solid var(--mhs-line);color:var(--mhs-ink);transition:all .16s;}
.mhs-share a:hover{border-color:var(--mhs-gold-d);color:var(--mhs-gold-d);transform:translateY(-2px);}
.mhs-share svg{width:18px;height:18px;}
/* copy-link button — swaps a link icon for a tick on success */
.mhs-copylink{position:relative;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;
  border:1px solid var(--mhs-line);background:none;color:var(--mhs-ink);cursor:pointer;transition:all .16s;}
.mhs-copylink:hover{border-color:var(--mhs-gold-d);color:var(--mhs-gold-d);transform:translateY(-2px);}
.mhs-copylink svg{position:absolute;width:18px;height:18px;transition:opacity .2s,transform .2s;}
.mhs-copylink__ok{opacity:0;transform:scale(.4);color:#1f8a5a;}
.mhs-copylink.is-ok{border-color:#1f8a5a;color:#1f8a5a;transform:none;}
.mhs-copylink.is-ok .mhs-copylink__link{opacity:0;transform:scale(.4);}
.mhs-copylink.is-ok .mhs-copylink__ok{opacity:1;transform:scale(1);}
/* universal share — gold-filled primary action (native share sheet) */
.mhs-nshare{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;
  border:1px solid var(--mhs-gold-d);background:var(--mhs-gold-d);color:#fff;cursor:pointer;transition:all .16s;}
.mhs-nshare:hover{background:#93712f;border-color:#93712f;color:#fff;transform:translateY(-2px);}
.mhs-nshare svg{width:18px;height:18px;}
.mhs-nshare.is-ok{background:#1f8a5a;border-color:#1f8a5a;}
/* gold focus ring instead of the browser's blue */
.mhs-share a:focus-visible,.mhs-copylink:focus-visible,.mhs-nshare:focus-visible{outline:2px solid var(--mhs-gold);outline-offset:2px;}

/* scroll-to-top button — matches the gold pill/CTA style */
.mhs-totop{position:fixed;bottom:24px;right:24px;z-index:8000;width:46px;height:46px;border-radius:50%;border:0;
  background:var(--mhs-gold-d);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;
  box-shadow:0 12px 30px -8px rgba(35,32,27,.55);opacity:0;visibility:hidden;transform:translateY(14px);
  transition:opacity .25s,transform .25s,background .2s,visibility .25s;}
.mhs-totop.is-on{opacity:1;visibility:visible;transform:translateY(0);}
.mhs-totop:hover{background:#93712f;transform:translateY(-3px);}
.mhs-totop:focus-visible{outline:2px solid var(--mhs-gold);outline-offset:3px;}
@media(max-width:600px){.mhs-totop{bottom:18px;right:18px;width:42px;height:42px;}}

/* ========================================================= pagination === */
.mhs-pag{margin-top:48px;}
.mhs-pag .nav-links{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;}
.mhs-pag .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:42px;height:42px;padding:0 12px;
  border:1px solid var(--mhs-line);border-radius:10px;background:#fff;color:var(--mhs-ink);text-decoration:none;font-size:15px;font-weight:600;transition:all .15s;}
.mhs-pag a.page-numbers:hover{border-color:var(--mhs-gold-d);color:var(--mhs-gold-d);}
.mhs-pag .page-numbers.current{background:var(--mhs-ink);border-color:var(--mhs-ink);color:#fff;}
.mhs-pag .page-numbers.dots{border:0;background:none;}

/* ============================================================ empty === */
.mhs-empty{text-align:center;color:var(--mhs-mut);padding:70px 20px;font-size:16px;}

/* =========================================================== footer === */
.mhs-tf{margin-top:80px;background:#eee7d5;border-top:1px solid #e0d8c4;color:#5b5647;}
.mhs-tf__in{max-width:1180px;margin:0 auto;padding:38px 30px 26px;display:flex;flex-direction:row;align-items:center;gap:34px;direction:ltr;}
.mhs-tf__logo{flex:0 0 72%;max-width:72%;text-align:left;}
.mhs-tf__logo img{display:block;width:100%;max-width:560px;height:auto;}
.mhs-tf__side{flex:1 1 28%;min-width:0;display:flex;flex-direction:column;}
.mhs-tf__nav{display:grid;grid-template-columns:1fr 1fr;gap:9px 16px;direction:rtl;}
.mhs-tf__nav a,.mhs-tf__nav a:link,.mhs-tf__nav a:visited{display:block;text-align:right;color:#4a4636;text-decoration:none;font-size:13px;line-height:1.7;}
.mhs-tf__nav a:hover,.mhs-tf__nav a:focus{color:var(--mhs-gold-d);}
.mhs-tf__copy{max-width:1180px;margin:0 auto;padding:15px 30px 2px;border-top:1px solid #e4dcc8;text-align:center;direction:rtl;font-size:12px;color:#9b937f;}
@media(max-width:768px){
  .mhs-tf__in{flex-direction:column;align-items:center;gap:22px;direction:rtl;padding:34px 22px 24px;}
  .mhs-tf__logo{flex:none;max-width:100%;text-align:center;}
  .mhs-tf__logo img{max-width:340px;}
  .mhs-tf__side{width:100%;max-width:360px;margin-inline:auto;align-items:center;}
  /* a centred wrap, not a 2-col grid — an odd last link would otherwise sit in
     the right-hand column and pull the whole block off-centre */
  .mhs-tf__nav{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 20px;width:100%;}
  .mhs-tf__nav a{text-align:center;}
}

/* ========================================================= lightbox === */
.mhs-lb{position:fixed;inset:0;z-index:100000;display:none;align-items:center;justify-content:center;background:rgba(8,10,12,.93);}
.mhs-lb.is-open{display:flex;}
.mhs-lb__img{max-width:92vw;max-height:88vh;border-radius:8px;box-shadow:0 20px 60px rgba(0,0,0,.6);}
.mhs-lb__x{position:absolute;top:16px;right:22px;display:flex;background:none;border:0;color:#fff;cursor:pointer;opacity:.85;padding:8px;}
.mhs-lb__x:hover{opacity:1;}
.mhs-lb__nav{position:absolute;top:50%;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.14);border:0;color:#fff;width:52px;height:52px;border-radius:50%;cursor:pointer;transition:background .15s;}
.mhs-lb__nav:hover{background:rgba(255,255,255,.28);}
.mhs-lb__prev{left:18px;}.mhs-lb__next{right:18px;}
.mhs-lb__x svg,.mhs-lb__nav svg{display:block;}

/* ======================================================= responsive === */
@media(max-width:980px){
  .mhs-grid{grid-template-columns:1fr 1fr;gap:24px;}
  .mhs-hero,.mhs-hs__bg{background-attachment:scroll;}
  .mhs-grid--feat .mhs-acard:first-child{flex-direction:column;}
  .mhs-grid--feat .mhs-acard:first-child .mhs-acard__img{flex:none;aspect-ratio:16/10;}
  .mhs-grid--feat .mhs-acard:first-child .mhs-acard__body{padding:20px 22px 24px;}
}
@media(max-width:720px){
  :root{--mhs-bar:100px;}
  .mhs-th__in{padding:0 14px;}   /* tighter gutters so the logo row gets the width back */
  .mhs-th__pill{padding:5px 10px;font-size:10.5px;}
  .mhs-th__logo img{height:74px;}   /* same as the main website's mobile logo */
  .mhs-th__burger{display:block;}
  .mhs-th__nav{display:none;}       /* the nav moves into the slide-out panel */

  /* --- sticking is animated, so nothing here may use display:none --- */
  /* a blurred backdrop is too costly to composite while the bar is resizing —
     phones drop frames for it, so mobile gets a solid panel instead */
  .mhs-th.is-solid{background:rgba(16,17,14,.97);-webkit-backdrop-filter:none;backdrop-filter:none;}
  /* the tall row collapses; its logo rises and shrinks as it goes.
     No will-change:height — promoting a layer does nothing for a property that
     relayouts anyway, and the extra layers cost memory on phones. */
  .mhs-th__main{height:88px;overflow:hidden;
    transition:height .45s cubic-bezier(.4,0,.2,1),opacity .3s ease;}
  .mhs-th__main .mhs-th__in{height:88px;}
  .mhs-th__logo{transform-origin:top right;
    transition:transform .45s cubic-bezier(.4,0,.2,1),opacity .3s ease;}
  .mhs-th.is-solid .mhs-th__main{height:0;opacity:0;}
  .mhs-th.is-solid .mhs-th__logo{transform:translateY(-16px) scale(.45);opacity:0;}

  /* the top bar grows a little and takes over the logo.
     gap:0 matters — a flex gap still applies either side of the collapsed logo
     and burger, which reads as stray padding beside the pills before sticking.
     Spacing comes from margins instead, so it grows with them. */
  .mhs-th__top .mhs-th__in{height:42px;gap:0;transition:height .45s cubic-bezier(.4,0,.2,1),padding .45s cubic-bezier(.4,0,.2,1);}
  .mhs-th.is-solid .mhs-th__top .mhs-th__in{height:56px;}
  .mhs-th.is-solid .mhs-th__top{border-bottom:0;}
  /* The compact logo and burger are taken out of flow and animated with
     transform + opacity only. Sizing them with max-width/width forced a layout
     pass on every frame, which is what made the transition stutter. Space is
     reserved once via the bar's padding rather than tweened. */
  .mhs-th__minilogo{display:block;position:absolute;top:50%;inset-inline-start:0;
    opacity:0;pointer-events:none;transform:translateY(-50%) scale(.72);transform-origin:center;
    transition:transform .45s cubic-bezier(.4,0,.2,1),opacity .3s ease;}
  .mhs-th__minilogo img{height:34px;width:auto;display:block;}
  .mhs-th.is-solid .mhs-th__minilogo{opacity:1;pointer-events:auto;transform:translateY(-50%) scale(1);}

  .mhs-th__top .mhs-th__burger{display:block;position:absolute;top:50%;inset-inline-end:0;padding:8px 4px;
    opacity:0;pointer-events:none;transform:translateY(-50%) scale(.72);
    transition:transform .45s cubic-bezier(.4,0,.2,1),opacity .3s ease;}
  .mhs-th.is-solid .mhs-th__top .mhs-th__burger{opacity:1;pointer-events:auto;transform:translateY(-50%) scale(1);}

  /* the bar makes room for both in one step, not frame by frame */
  .mhs-th__top .mhs-th__in{position:relative;}
  .mhs-th.is-solid .mhs-th__top .mhs-th__in{padding-inline-start:118px;padding-inline-end:52px;}
  .mhs-th.is-solid .mhs-th__pills{min-width:0;overflow-x:auto;scrollbar-width:none;}
  .mhs-th.is-solid .mhs-th__pills::-webkit-scrollbar{display:none;}
  .mhs-hero{min-height:58vh;padding:118px 0 40px;}   /* inner padding lives on .mhs-hero__in, matching the header */
  .mhs-hero__in{padding:0 14px;}                     /* …so it follows the header's tighter mobile gutter */
  .mhs-hero--lead{min-height:88vh;}
  .mhs-wrap{padding:44px 18px 0;}
  .mhs-lead__excerpt{display:none;}          /* no excerpt on mobile */
  .mhs-hs__thumbimg{width:58px;height:58px;}
  .mhs-hs__track{gap:10px;}
  .mhs-hs__card{width:194px;padding:6px;gap:10px;}
  .mhs-article{font-size:17px;}
}
@media(max-width:520px){
  .mhs-grid{grid-template-columns:1fr;}
  .mhs-lead__item{max-width:none;width:100%;}
}

/* readers who ask for less motion get the same layout, just no tweening */
@media(prefers-reduced-motion:reduce){
  .mhs-th,.mhs-th__main,.mhs-th__logo,.mhs-th__logo img,.mhs-th__minilogo,.mhs-th__pills,.mhs-th__pill,
  .mhs-th__top,.mhs-th__top .mhs-th__in,.mhs-th__top .mhs-th__burger,
  .mhs-th__main .mhs-th__in,.mhs-th__link,.mhs-offcanvas__panel{transition:none !important;}
}