/*
Theme Name: Granthashala
Theme URI: https://example.com/granthashala
Description: High-end Gutenberg full-site-editing Malayalam magazine theme. Two-stage editorial grid: a featured group (dominant large post plus a stacked column of thumbnail cards) followed by repeating SMALL|LARGE|SMALL rows. Monochrome palette, dropdown category menu, single-stream mobile layout, fully customizable via Global Styles (theme.json). No content bundled.
Version: 1.10.0
Requires at least: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: granthashala
Tags: full-site-editing, block-styles, editor-style, blog, news, rtl-language-support
*/

/* =====================================================================
   SELF-HOSTED FONTS
   Manjari (body text + logo) and Gayathri (headings), subsetted to the
   Malayalam block + digits/punctuation only — no Latin letters, no
   external request to Google. Thin (100) is included for completeness
   even though nothing in this stylesheet uses it by default.
   ===================================================================== */
@font-face{font-family:'Manjari';src:url('assets/fonts/manjari-regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Manjari';src:url('assets/fonts/manjari-bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Manjari';src:url('assets/fonts/manjari-thin.woff2') format('woff2');font-weight:100;font-style:normal;font-display:swap}
@font-face{font-family:'Gayathri';src:url('assets/fonts/gayathri-regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Gayathri';src:url('assets/fonts/gayathri-bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Gayathri';src:url('assets/fonts/gayathri-thin.woff2') format('woff2');font-weight:100;font-style:normal;font-display:swap}

/* =====================================================================
   RESET / OVERFLOW SAFETY
   A small foundational layer so no component has to fight the box
   model on its own. This is what lets every rule below use simple,
   predictable numbers instead of per-screen patches.
   ===================================================================== */
*,
*::before,
*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth}
body{overflow-x:hidden;max-width:100vw}
img,svg{max-width:100%}
#gh-newsletter{scroll-margin-top:calc(var(--gh-notif-min-h) + var(--gh-header-h) + 24px)}

/* ---------- tokens ---------- */
:root{
  /* page / content rhythm */
  --gh-pad:16px;   /* page gutter: narrow but never edge-to-edge */
  --gh-gut:var(--wp--custom--gutter,16px);

  /* header (desktop) */
  --gh-header-h:var(--wp--custom--header-height,72px);
  --gh-header-pad:var(--wp--custom--header-padding,24px);
  --gh-header-gap:var(--wp--custom--header-gap,10px);          /* 8–10px range, desktop */
  --gh-hamburger-size:var(--wp--custom--hamburger-size,40px); /* constant tap target, all breakpoints */
  --gh-hamburger-icon:var(--wp--custom--hamburger-icon,22px); /* 21–22px range */
  --gh-logo-size:var(--wp--custom--logo-size,31px);           /* desktop 30–32px range */

  /* top notification bar (desktop) */
  --gh-notif-min-h:var(--wp--custom--notif-min-height,36px);
  --gh-notif-pad:var(--wp--custom--notif-padding,20px);
  --gh-notif-fs:var(--wp--custom--notif-font-size,13px);

  /* image ratios */
  --gh-r-wide:var(--wp--custom--ratio-wide,16/9);
  --gh-r-thumb:var(--wp--custom--ratio-thumb,4/3);
  --gh-r-mobile-card:var(--wp--custom--ratio-mobile-card,3/2);
}
/* Tablet: 768–1023px */
@media (max-width:1023px){
  :root{
    --gh-pad:16px;
    --gh-gut:16px;
    --gh-header-h:64px;
    --gh-header-pad:20px;
    --gh-logo-size:28px;      /* tablet 27–29px range */
    --gh-notif-min-h:36px;
    --gh-notif-pad:18px;      /* not separately specified — mirrors the header edge-padding tier so header + notif bar share one consistent scale */
    --gh-notif-fs:12.5px;     /* tablet 12–13px range */
  }
}
/* Mobile: ≤767px */
@media (max-width:767px){
  :root{
    --gh-pad:18px;   /* mobile gutter */
    --gh-gut:0px;
    --gh-header-h:60px;
    --gh-header-pad:16px;
    --gh-header-gap:8px;
    --gh-hamburger-icon:21px;
    --gh-logo-size:26px;      /* mobile logo, per spec */
    --gh-notif-min-h:38px;
    --gh-notif-pad:16px;
    --gh-notif-fs:12px;
  }
}

body{
  background:var(--wp--preset--color--background,#FFFFFF);
  color:var(--wp--preset--color--ink,#242424);
  font-family:var(--wp--preset--font-family--manjari,'Manjari',sans-serif);
}
body.single{background:#FFFFFF}
img{display:block;width:100%;height:100%}
.gh-inner{max-width:var(--wp--style--global--wide-size,1365px);margin-inline:auto;padding-inline:var(--gh-pad)}
.gh-main{max-width:var(--wp--style--global--wide-size,1480px);margin-inline:auto;padding:24px var(--gh-pad) 64px;min-height:60vh}
body.gh-sticky .gh-header{position:sticky;top:0}

/* Grid/flex items must be allowed to shrink below their content's
   intrinsic width, or a long unbroken word/image can quietly force
   horizontal scroll. This one rule is the underlying fix — it is why
   nothing below needs a per-screen overflow patch. */
.gh-row,.gh-row-duo,.gh-row-solo,.gh-feature,.gh-auto-grid,.gh-card,.gh-card-body{min-width:0}

/* ---------- announcement / top notification bar ---------- */
.gh-announce{
  /* Announcement bar colours/size come from the block's own inline
     custom properties, falling back to the theme defaults. The grey
     hairline that used to sit under this bar has been removed. */
  background:var(--gh-notif-bg,var(--wp--preset--color--notif-bg,#F5F5F5));
  color:var(--gh-notif-fg,inherit);
  min-height:var(--gh-notif-min-h);
  padding-block:var(--gh-notif-pad-y,8px);
  display:flex;
  align-items:center;
}
.gh-announce .gh-inner{
  width:100%;
  padding-inline:var(--gh-notif-pad);
  display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
}
.gh-announce-msg{display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-width:0}
.gh-announce-icon{flex-shrink:0;color:var(--wp--preset--color--ink,#242424)}
.gh-announce p{color:var(--gh-notif-fg,var(--wp--preset--color--ink,#242424));font-size:var(--gh-notif-fs);font-weight:var(--gh-notif-fw,400);margin:0;line-height:1.5}
.gh-announce-icon{color:var(--gh-notif-fg,var(--wp--preset--color--ink,#242424))}
.gh-announce-btn{
  flex-shrink:0;display:inline-block;text-decoration:none;line-height:1.4;white-space:nowrap;
  background:var(--gh-notif-btn-bg,var(--wp--preset--color--primary,#242424));
  color:var(--gh-notif-btn-fg,#FFFFFF);
  font-size:var(--gh-notif-btn-fs,var(--gh-notif-fs));
  border-radius:var(--gh-notif-btn-r,6px);
  padding:var(--gh-notif-btn-py,6px) var(--gh-notif-btn-px,14px);
}
.gh-announce-btn:hover{opacity:.85}
.gh-announce .wp-block-buttons{flex-shrink:0}
.gh-announce .wp-block-button__link{font-size:var(--gh-notif-fs);padding:6px 14px;border-radius:6px;white-space:nowrap;line-height:1.4}
.gh-notif-close{flex-shrink:0;width:28px;height:28px;border:0;background:none;color:var(--wp--preset--color--ink-2,#666666);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:0;border-radius:4px}
.gh-notif-close:hover{color:var(--wp--preset--color--ink,#242424)}

/* ---------- header ---------- */
.gh-header{
  background:var(--wp--preset--color--primary,#242424);
  height:var(--gh-header-h);
  display:flex;
  align-items:center;
  position:relative;
  z-index:950;
}
.gh-header .gh-inner{
  max-width:none;
  width:100%;
  padding-inline:var(--gh-header-pad);
  display:flex;align-items:center;justify-content:left;flex-wrap:nowrap;gap:var(--gh-header-gap);
  min-width:0;
}
.gh-burger{
  width:var(--gh-hamburger-size);height:var(--gh-hamburger-size);flex-shrink:0;
  display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;
  padding:8px;background:none;border:0;cursor:pointer;
}
.gh-burger span{
  display:block;box-sizing:border-box;flex:0 0 auto;
  width:var(--gh-hamburger-icon);min-width:var(--gh-hamburger-icon);max-width:var(--gh-hamburger-icon);
  height:2px;border-radius:1px;background:#fff;transition:transform .3s cubic-bezier(.22,1,.36,1),opacity .3s cubic-bezier(.22,1,.36,1)}
body.gh-menu-open .gh-burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
body.gh-menu-open .gh-burger span:nth-child(2){opacity:0}
body.gh-menu-open .gh-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.gh-logo{
  font-family:var(--wp--preset--font-family--manjari,'Manjari',sans-serif);
  font-size:var(--gh-logo-size);font-weight:700;line-height:1.2;margin:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;
  display:inline-block;text-decoration:none;
}
.gh-header .gh-logo,.gh-header .gh-logo:hover,.gh-header .gh-logo:focus{color:#fff}

/* ---------- dropdown menu (height = content only) ---------- */
/* Static fallback assumes an un-scrolled, non-wrapped notification bar —
   correct for the common case. main.js measures the header's real
   on-screen position (via getBoundingClientRect) and overrides top/
   max-height precisely on open/resize/scroll, which also covers the
   sticky-header-while-scrolled case and a notification bar that has
   wrapped to two lines. */
/* clip-path reveal: the panel's position never moves (no translateY of a
   variable-height box, which is what could send a tall panel flying in
   from above the header). Instead the box sits at its final, correct
   position the whole time and is progressively unclipped from the top
   down, so it always reads as opening from directly below the header. */
.gh-overlay{position:fixed;left:0;right:0;top:calc(var(--gh-notif-min-h) + var(--gh-header-h));bottom:auto;height:auto;max-height:calc(100vh - var(--gh-notif-min-h) - var(--gh-header-h));overflow:auto;z-index:900;background:#242424;box-shadow:0 16px 32px rgba(0,0,0,.35);clip-path:inset(0 0 100% 0);opacity:0;pointer-events:none;visibility:hidden;transition:clip-path .3s cubic-bezier(.22,1,.36,1),opacity .22s ease,visibility 0s linear .3s}
.gh-overlay.gh-open{clip-path:inset(0 0 0% 0);opacity:1;pointer-events:auto;visibility:visible;transition:clip-path .3s cubic-bezier(.22,1,.36,1),opacity .22s ease,visibility 0s linear 0s}
.gh-ov-panel{padding:40px 8% 48px;opacity:0;transform:translateY(-6px);transition:opacity .25s ease .08s,transform .25s ease .08s}
.gh-overlay.gh-open .gh-ov-panel{opacity:1;transform:translateY(0)}
.gh-ov-cats{display:grid;grid-template-columns:repeat(3,1fr);row-gap:40px;column-gap:32px}
.gh-ov-cat{display:block;text-align:left;font-weight:700;font-size:20px;line-height:1.4;color:#fff;text-decoration:none}
.gh-ov-cat:hover{color:rgba(255,255,255,.65)}
@media (max-width:1023px){.gh-ov-cats{grid-template-columns:repeat(2,1fr);row-gap:32px}}
@media (max-width:767px){.gh-ov-cats{grid-template-columns:repeat(2,1fr);row-gap:24px;column-gap:16px}.gh-ov-panel{padding:28px 6% 36px}}

/* ---------- welcome banner ---------- */
.gh-banner{border-bottom:1px solid var(--wp--preset--color--border,#E5E5E5);min-height:220px}
.gh-banner .wp-block-cover__inner-container{max-width:var(--wp--style--global--wide-size,1365px);margin-inline:auto;padding-inline:var(--gh-pad)}
.gh-banner-title{color:var(--wp--preset--color--ink,#242424)}
.gh-banner-text{color:var(--wp--preset--color--ink-2,#666666)}
@media (max-width:1023px){.gh-banner{min-height:200px}}
@media (max-width:767px){.gh-banner{width:100vw;margin-left:calc(50% - 50vw);min-height:170px}}

/* ---------- cards ----------
   Spacing lives at the grid/content level (row-gap on the containing
   grid or flex, plus small margins between a card's own elements) —
   not as blanket padding wrapped around every card. That keeps the
   rhythm intentional per context instead of one number trying to
   serve every layout it appears in. */
.gh-card{display:flex;flex-direction:column}
.gh-card-body{display:flex;flex-direction:column;min-width:0}
.gh-card-media{display:block;overflow:hidden;background:var(--wp--preset--color--border,#E5E5E5)}
.gh-card-media img{object-fit:cover}
/* Placeholder for a post with no featured image: fills the anchor's
   ratio box rather than declaring its own ratio, so it inherits
   whatever 16:9 box .gh-card--large/--small already established. */
.gh-noimg{display:grid;place-items:center;width:100%;height:100%;color:var(--wp--preset--color--ink-2,#666666);font-size:44px;font-weight:700}
.gh-card--small .gh-noimg{font-size:32px}
.gh-cat{color:var(--wp--preset--color--accent,#242424);font-weight:700;font-size:var(--wp--preset--font-size--xs,12px);display:inline-block;margin:10px 0 4px;text-decoration:none}
.gh-card-title{line-height:1.4;font-weight:700;margin:12px 0 0;overflow-wrap:break-word}
.gh-card-title a{color:var(--wp--preset--color--ink,#242424);text-decoration:none}
.gh-card-title a:hover{color:var(--wp--preset--color--accent-dark,#666666)}
.gh-card-excerpt{color:var(--wp--preset--color--grey,#888888);font-size:var(--gh-t-exc,14px);margin:8px 0 0;line-height:1.45}
.gh-card-meta{display:flex;gap:8px;flex-wrap:wrap;align-items:center;color:var(--wp--preset--color--grey,#888888);font-size:var(--gh-t-meta,12px);margin-top:8px}
.gh-meta-cat,.gh-meta-cat a{color:inherit;font-weight:400;text-decoration:none}
.gh-meta-cat a:hover{color:var(--wp--preset--color--ink,#242424)}

/* Card-type rules apply wherever a card appears (row, leftover
   solo/duo, search results) — they are not coupled to a specific
   parent, so new grid contexts inherit correct sizing for free.
   Both sizes use the same 16:9 image ratio; only the title scale and
   the small-only excerpt distinguish "featured" from "secondary". */
.gh-card--small .gh-card-media{aspect-ratio:var(--gh-r-wide)}
.gh-card--small .gh-card-title{font-size:var(--gh-t-small,18px);line-height:1.28}
.gh-card--side .gh-card-media{aspect-ratio:var(--gh-r-wide)}
.gh-card--large .gh-card-media{aspect-ratio:var(--gh-r-wide)}
.gh-card--large .gh-card-title{font-size:var(--gh-t-large,29px);line-height:1.22}

/* ---------- STAGE 1: featured group ----------
   One dominant large post at ~2/3 width with up to three horizontal
   thumbnail cards stacked in the ~1/3 column beside it. The side cards
   are horizontal (thumb | text) rather than stacked-vertical for a
   structural reason: three vertical cards with full-width 16:9 images
   in a 434px column run to ~1200px tall against the large card's
   ~594px, which is what leaves the huge dead gap this layout is meant
   to avoid. Horizontal thumbs bring the column to ~475px, close enough
   to the large card's image height to read as a matched block. */
.gh-sec{margin-top:var(--gh-row-space,18px);padding-top:12px;border-top:1px solid var(--wp--preset--color--border,#E5E5E5)}
.gh-sec.gh-row-first{margin-top:0;padding-top:0;border-top:0}

.gh-feature{display:grid;grid-template-columns:2fr 1fr;column-gap:var(--gh-gut);align-items:start}
.gh-feature>.gh-card,.gh-feature-side{min-width:0}
.gh-feature-side{position:relative;display:grid;align-content:start;row-gap:24px}
/* Column rule between the large post and the side column, centred in
   the gap so neither track loses width to padding. */
.gh-feature-side::before{
  content:"";
  position:absolute;top:0;bottom:0;left:calc(var(--gh-gut) / -2);
  border-left:1px solid var(--wp--preset--color--border,#E5E5E5);
}
.gh-feature-side>.gh-card+.gh-card{border-top:1px solid var(--wp--preset--color--border,#E5E5E5);padding-top:24px}

/* Horizontal side card: thumb | title -> excerpt -> metadata. */
.gh-card--side{display:grid;grid-template-columns:44% 1fr;column-gap:12px;align-items:start}
.gh-card--side .gh-card-title{margin-top:0}
/* Clamped to two lines: in a ~230px text column the default 16-word
   excerpt runs to four lines, which pushes the text block well past
   the thumbnail and leaves dead space beside it. Two lines keeps the
   two halves of the card roughly level. */
.gh-card--side .gh-card-excerpt{
  margin-top:6px;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;
  line-clamp:2;overflow:hidden;
}
.gh-card--side .gh-card-meta{margin-top:6px}

/* ---------- STAGE 2: SMALL | LARGE | SMALL ----------
   1:2:1, repeated unchanged for every group after the featured one —
   no LSS/SSL rotation, so the dominant post keeps the same centre
   spine all the way down the page. gh-row-duo / gh-row-solo carry the
   same system for a trailing 1-2 posts; never a generic auto-fit grid. */
.gh-row{display:grid;column-gap:var(--gh-gut);row-gap:20px}
/* Column rules are a hairline centred in the grid gap, not
   border-left + padding-left on the card itself. Padding took the
   divider's space out of the card's own track, so the two small cards
   in an SLS row came out at different widths (321px vs 304px) with
   different image heights — leaving their titles unaligned across a
   row that reads as a matched pair — and pushed the real column ratio
   to 1:1.95:0.95. Drawn in the gap, every track keeps its full width
   and the ratio is exactly 1:2:1. */
.gh-row>.gh-card{position:relative}
.gh-row>.gh-card+.gh-card::before{
  content:"";
  position:absolute;top:0;bottom:0;left:calc(var(--gh-gut) / -2);
  border-left:1px solid var(--wp--preset--color--border,#E5E5E5);
}
.gh-row-sls{grid-template-columns:1fr 2fr 1fr}
.gh-row-duo{grid-template-columns:2fr 1fr}
.gh-row-solo{grid-template-columns:1fr}

/* ---------- auto-fit grid utility (uniform card sets: search
   results, or any future context that genuinely wants a flat grid).
   The homepage/archive magazine grid no longer uses this for
   leftover posts — see gh-row-duo/gh-row-solo above instead. */
.gh-auto-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  column-gap:var(--gh-gut);
  row-gap:24px;
  list-style:none;margin:0;padding:0;
}
@media (max-width:1023px){
  /* tuned so exactly two columns fit across the whole 768–1023 band */
  .gh-auto-grid{grid-template-columns:repeat(auto-fit,minmax(340px,1fr))}
}
@media (max-width:767px){
  .gh-auto-grid{grid-template-columns:1fr}
}

/* ---------- search results (thumbnail | category/title/excerpt) ----------
   Same card system as the homepage/archive grid, just laid out as a
   single horizontal row per result instead of a multi-column grid, so
   search visually belongs to the same design language as the rest of
   the site. */
.gh-search-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.gh-search-list .gh-card{padding:24px 0;border-top:1px solid var(--wp--preset--color--border,#E5E5E5)}
.gh-search-list .gh-card:first-child{padding-top:0;border-top:0}
.gh-card--row{display:grid;grid-template-columns:220px 1fr;column-gap:20px;align-items:start}
.gh-card--row .gh-card-media{aspect-ratio:var(--gh-r-thumb)}
@media (max-width:767px){
  .gh-card--row{grid-template-columns:1fr;row-gap:0}
  .gh-card--row .gh-card-media{aspect-ratio:var(--gh-r-mobile-card)}
  .gh-card--row .gh-card-excerpt{display:none}
}

/* ---------- pagination ---------- */
.gh-pagination{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:48px}
.gh-pagination .page-numbers{display:inline-flex;min-width:44px;height:44px;padding:0 16px;align-items:center;justify-content:center;border:1px solid var(--wp--preset--color--border,#E5E5E5);border-radius:8px;background:var(--wp--preset--color--surface,#fff);color:var(--wp--preset--color--ink-2,#666666);font-size:var(--wp--preset--font-size--m,16px);text-decoration:none}
.gh-pagination .page-numbers.current{background:var(--wp--preset--color--primary,#242424);border-color:var(--wp--preset--color--primary,#242424);color:#fff}
.gh-pagination a.page-numbers:hover{border-color:var(--wp--preset--color--primary,#242424);color:var(--wp--preset--color--primary,#242424)}

/* ---------- archive head ---------- */
/* Category pages keep a deliberate DARK rule (not the light grey used
   elsewhere) and align right, per the category-page spec. */
.gh-archive-head{margin-bottom:24px;border-bottom:2px solid var(--wp--preset--color--primary,#242424);padding-bottom:12px;text-align:right}
.gh-archive-head .wp-block-query-title{margin:0;font-size:var(--wp--preset--font-size--xxl,32px);font-weight:700;line-height:1.2}
.gh-archive-head .wp-block-term-description{margin:8px 0 0;color:var(--wp--preset--color--ink-2,#666666);font-size:var(--wp--preset--font-size--s,14px)}
.gh-archive-head .wp-block-query-title{font-size:var(--wp--preset--font-size--xxl,34px);margin:0}
.gh-archive-head p{color:var(--wp--preset--color--ink-2,#666666)}

/* ---------- article (single) ---------- */
.gh-article{max-width:1000px;margin-inline:auto}
.gh-crumb{font-size:var(--wp--preset--font-size--xs,12px);color:var(--wp--preset--color--ink-2,#666666);margin-bottom:16px;gap:8px}
.gh-crumb a{color:var(--wp--preset--color--accent,#242424);font-weight:700;text-decoration:none}
.gh-article .wp-block-post-title{font-size:var(--wp--preset--font-size--xxxl,48px);line-height:1.35;overflow-wrap:break-word}
/* Article opening: category -> title -> short description -> photo. */
.gh-art-cat,.gh-art-cat a{
  display:inline-block;margin:0 0 6px;text-decoration:none;font-weight:700;
  font-size:var(--wp--preset--font-size--xs,12px);letter-spacing:.04em;
  color:var(--wp--preset--color--ink-2,#666666);text-transform:uppercase;
}
.gh-art-cat a:hover{color:var(--wp--preset--color--ink,#242424)}
.gh-lead{color:var(--wp--preset--color--grey,#888888);font-size:var(--wp--preset--font-size--l,18px);line-height:1.8}
.gh-art-meta{gap:16px;color:var(--wp--preset--color--ink-2,#666666);font-size:var(--wp--preset--font-size--xs,12px)}
.gh-art-meta a{color:inherit;text-decoration:none}
.gh-art-meta .wp-block-post-author-name::before{content:"രചന: "}
.gh-art-meta .wp-block-post-date::before{content:"പ്രസിദ്ധീകരിച്ചത്: "}
.gh-share{width:28px;height:28px;border:0;border-radius:0;background:none;color:var(--wp--preset--color--ink-2,#666666);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
.gh-share:hover{color:var(--wp--preset--color--accent,#242424)}
.gh-art-hero{margin-top:24px;aspect-ratio:var(--gh-r-wide);overflow:hidden;background:var(--wp--preset--color--border,#E5E5E5)}
.gh-art-hero img{object-fit:cover}
.gh-article .wp-block-post-content{margin-top:32px;font-size:17px;line-height:1.9}
.gh-article .wp-block-post-content>p:first-of-type::first-letter{font-size:60px;line-height:1;font-weight:700;color:var(--wp--preset--color--accent,#242424);float:left;padding-right:12px}
.gh-article .wp-block-post-content h2{color:var(--wp--preset--color--accent,#242424);font-size:var(--wp--preset--font-size--xl,24px);margin:32px 0 12px}
.gh-article .wp-block-post-content figure{margin:24px 0;aspect-ratio:var(--gh-r-wide);overflow:hidden}
.gh-article .wp-block-post-content figure img{object-fit:cover}
.gh-postnav{gap:16px;flex-wrap:wrap;margin-top:48px;padding-top:16px;border-top:1px solid var(--wp--preset--color--border,#E5E5E5)}
.gh-postnav a{color:var(--wp--preset--color--accent,#242424);font-size:var(--wp--preset--font-size--s,14px);font-weight:700;text-decoration:none}

/* ---------- footer ---------- */
.gh-footer{background:var(--wp--preset--color--black,#242424);color:#fff;padding:64px 0 24px}
.gh-footer a{color:rgba(255,255,255,.8);text-decoration:none}
.gh-footer a:hover{color:#FFFFFF}
.gh-footer .gh-logo{color:#fff}
.gh-footer-logo{margin-bottom:56px}
.gh-footer-logo .gh-logo{font-size:clamp(44px,6.5vw,90px);line-height:1;letter-spacing:-.01em}
.gh-footer h4{color:#fff;font-size:var(--wp--preset--font-size--xs,12px);letter-spacing:.02em;text-transform:uppercase;margin:0 0 16px}
.gh-footer ul{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.gh-footer ul li{font-size:var(--wp--preset--font-size--s,14px)}
.gh-footer p{font-size:var(--wp--preset--font-size--s,14px)}
.gh-footer .gh-footer-topics{display:block;column-count:2;column-gap:24px}
.gh-footer .gh-footer-topics li{break-inside:avoid;margin-bottom:10px}

.gh-footer-cols{display:grid;grid-template-columns:1.5fr 1fr 1.4fr;column-gap:48px}

/* preferred-source button — the container Google's own script (loaded in
   wp_head) scans for and fills with its native, localized badge. We only
   own the spacing around it, not its internal appearance. */
.gh-pref-source{margin-bottom:24px;min-height:36px}

.gh-newsletter-title{font-weight:700;font-size:16px;margin:0 0 4px;color:#fff}
.gh-newsletter-sub{font-size:14px;color:rgba(255,255,255,.65);margin:0 0 16px}
.gh-newsletter-form{display:flex;gap:8px;margin-bottom:20px}
.gh-newsletter-form input[type="email"]{flex:1;min-width:0;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.22);border-radius:6px;color:#fff;padding:10px 12px;font-size:14px;font-family:inherit}
.gh-newsletter-form input[type="email"]::placeholder{color:rgba(255,255,255,.5)}
.gh-newsletter-form button{flex-shrink:0;border-radius:var(--gh-nl-radius,6px);border:0;background:#FFFFFF;color:#242424;font-weight:700;font-size:14px;padding:0 20px;cursor:pointer;white-space:nowrap}
.gh-newsletter-form button:hover{background:#E5E5E5}
.gh-footer-email{display:inline-block;font-size:16px;font-weight:700;color:#fff;margin-bottom:20px}

.gh-social{display:flex;gap:8px;flex-wrap:wrap}
.gh-social a{color:#fff;display:inline-flex;width:32px;height:32px;align-items:center;justify-content:center}
.gh-social a:hover{color:rgba(255,255,255,.65)}

.gh-footer-bottom{border-top:1px solid rgba(255,255,255,.15);margin-top:48px;padding-top:16px;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.gh-footer-bottom p{font-size:var(--wp--preset--font-size--xs,12px);margin:0;color:rgba(255,255,255,.6)}
.gh-footer-bottom-links{display:flex;gap:20px}
.gh-footer-bottom-links a{font-size:var(--wp--preset--font-size--xs,12px);color:rgba(255,255,255,.8)}

@media (max-width:1023px){
  .gh-footer-cols{grid-template-columns:1fr 1fr;row-gap:40px}
  .gh-footer-cols>.gh-footer-col--newsletter{grid-column:1/-1}
}
@media (max-width:767px){
  .gh-footer{padding:48px 0 24px}
  .gh-footer-logo{margin-bottom:36px}
  .gh-footer-logo .gh-logo{font-size:clamp(32px,13vw,52px)}
  .gh-footer-cols{grid-template-columns:1fr;row-gap:40px}
  .gh-newsletter-form{flex-direction:column}
  .gh-newsletter-form button{padding:10px 20px}
  .gh-footer-bottom{flex-direction:column;align-items:flex-start}
}

.gh-empty{padding:48px 0;text-align:center;color:var(--wp--preset--color--ink-2,#666666)}
#gh-toast{position:fixed;left:50%;bottom:64px;transform:translateX(-50%);background:var(--wp--preset--color--primary,#242424);color:#fff;font-size:12px;padding:8px 16px;border-radius:999px;z-index:990;display:none}

/* ---------- welcome poster ----------
   Full-bleed and natural-ratio. width:100%/height:auto means the
   browser derives the height from the image itself, so the artwork is
   never stretched and never cropped. No max-width applies: the poster
   deliberately sits outside the content container, and zero margin
   above/below keeps it flush to the header and the grid. */
.gh-hero{
  position:relative;display:block;width:100%;max-width:none;
  margin:0;padding:0;background:#FFFFFF;overflow:hidden;
}
.gh-hero-link{display:block}
.gh-hero-pic,.gh-hero-pic img{display:block;width:100%;height:auto;max-width:100%}
.gh-hero-empty{padding:24px var(--gh-pad);background:var(--gh-color-surface,#F5F5F5);text-align:center}
.gh-hero-empty p{margin:0;color:var(--gh-color-secondary,#666666);font-size:14px}
/* Overlay text is optional and off by default. */
.gh-hero-body{
  position:absolute;inset:auto 0 0 0;padding:24px var(--gh-pad);
  text-align:var(--gh-hero-text-align,center);color:var(--gh-hero-fg,#FFFFFF);
}
.gh-hero:has(.gh-hero-body)::after{
  content:"";position:absolute;inset:0;background:rgba(36,36,36,var(--gh-hero-dim,0));pointer-events:none;
}
.gh-hero-title{margin:0;font-size:var(--gh-hero-h-size,34px);line-height:1.2;font-weight:700;color:inherit}
.gh-hero-text{margin:10px 0 0;font-size:var(--gh-hero-t-size,16px);line-height:1.5;color:inherit;opacity:.92}

/* ---------- article meta row: Date · Author · Listen · Share ---------- */
.gh-art-meta{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--gh-am-gap,14px);
  font-size:var(--gh-am-fs,14px);
  color:var(--gh-am-fg,var(--wp--preset--color--grey,#888888));
  margin:16px 0 20px;
}
.gh-am-sep{opacity:.6}
.gh-am-listen,.gh-am-share{
  display:inline-flex;align-items:center;gap:7px;background:none;border:0;padding:0;cursor:pointer;
  font:inherit;color:inherit;
}
.gh-am-listen svg,.gh-am-share svg{width:var(--gh-am-icon,18px);height:var(--gh-am-icon,18px)}
.gh-am-listen:hover,.gh-am-share:hover{color:var(--wp--preset--color--ink,#242424)}
.gh-audio-player{width:100%;margin:0 0 20px;display:block}

/* ---------- newsletter block ---------- */
.gh-newsletter-notice{
  font-size:13px;line-height:1.5;margin:10px 0 0;padding:10px 12px;border-radius:6px;
  background:rgba(255,255,255,.08);color:rgba(255,255,255,.75);
}
.gh-newsletter-form.is-unconfigured{opacity:.55}

/* ---------- TABLET: controlled editorial arrangement (768-1023px) ----------
   Three ~230px columns don't work at tablet width, so each stage-2 row
   collapses to: large/featured full-width on top, the two small cards
   side by side underneath. The featured group keeps its large post
   full-width too, with its three horizontal side cards stacked below —
   they already read well at full width because they are thumb | text,
   not full-bleed images. */
@media (min-width:768px) and (max-width:1023px){

  .gh-feature{grid-template-columns:1fr;row-gap:16px}
  .gh-feature-side{row-gap:12px}
  .gh-feature-side::before{display:none}
  /* At full tablet width a 34% thumb stands ~70px taller than its text
     block, leaving a dead notch beside it. A narrower thumb plus one
     more excerpt line brings the two halves level again. */
  .gh-card--side{grid-template-columns:26% 1fr;column-gap:16px}
  .gh-card--side .gh-card-excerpt{-webkit-line-clamp:3;line-clamp:3}

  .gh-row-sls{grid-template-columns:1fr 1fr;row-gap:16px}
  .gh-row-sls .gh-card--large{grid-column:1/-1;order:-1}
  /* The large card now has its own full-width band, so its column rule
     goes. The one divider still wanted is between the two small cards
     sitting side by side — the second small in DOM order. */
  .gh-row-sls>.gh-card+.gh-card::before{display:none}
  .gh-row-sls .gh-card--small~.gh-card--small::before{display:block}
}

/* ---------- MOBILE: single vertical stream (<=767px) ----------
   Every homepage post takes the SAME shape here, whatever it is on
   desktop: 16:9 image -> title -> metadata. No excerpts at all, and
   one title scale for large and small alike, so the feed reads as a
   single uninterrupted stream rather than two interleaved card types.
   The large-vs-small distinction still exists in the markup and still
   governs desktop and tablet; it simply carries no visual weight at
   this width. */
@media (max-width:767px){

  .gh-hero-body{padding:20px var(--gh-pad,22px)}
  .gh-art-meta{gap:10px}
  .gh-main{padding-top:16px}
  .gh-logo{line-height:1.15}
  .gh-sec{margin-top:var(--gh-row-space,24px);padding-top:0;border-top:0}

  /* Featured group and stage-2 rows both flatten to one column. */
  .gh-feature,.gh-feature-side{grid-template-columns:1fr;row-gap:0}
  .gh-feature-side::before{display:none}
  .gh-feature-side>.gh-card+.gh-card{border-top:0;padding-top:0}
  .gh-row-sls,.gh-row-duo,.gh-row-solo{grid-template-columns:1fr;row-gap:0}
  /* Side cards drop their thumbnail layout and become full-width
     stream posts like every other card. */
  .gh-card--side{grid-template-columns:1fr;column-gap:0}

  /* The large/featured card leads its group whatever DOM position the
     desktop pattern gave it, so reading order is identical for every
     group on the page. */
  .gh-row .gh-card--large{order:-1}
  .gh-row>.gh-card+.gh-card::before{display:none}

  /* No excerpt anywhere in the homepage/archive stream. */
  #gh-main-wrap .gh-card-excerpt{display:none}

  /* Sizes are NOT hardcoded here. The post-grid block emits per-device
     values for --gh-t-large / --gh-t-small / --gh-t-meta inside a
     mobile media query, so the sidebar's Mobile tab genuinely controls
     this breakpoint. Restating literals here would silently override
     the setting and make the control look broken. */
  #gh-main-wrap .gh-card-title{line-height:1.25;margin-top:14px}
  #gh-main-wrap .gh-card--large .gh-card-title{font-size:var(--gh-t-large,28px)}
  #gh-main-wrap .gh-card--small .gh-card-title{font-size:var(--gh-t-small,28px)}
  #gh-main-wrap .gh-card-meta{font-size:var(--gh-t-meta,15px);margin-top:10px;gap:6px;color:var(--wp--preset--color--grey,#888888)}
  #gh-main-wrap .gh-card-media{aspect-ratio:var(--gh-r-wide)}

  /* Every post in the feed gets a divider above it, except the very
     first thing on the page. */
  #gh-main-wrap .gh-card{border-top:1px solid var(--wp--preset--color--border,#E5E5E5);padding-top:24px;margin-top:24px}
  #gh-main-wrap .gh-sec:first-child>.gh-card--large,
  #gh-main-wrap .gh-row-first>.gh-card--large{border-top:0;padding-top:0;margin-top:0}

  .gh-announce .wp-block-button__link{padding:6px 12px}
  .gh-pagination{margin-top:32px}
  .gh-article .wp-block-post-title{font-size:32px}
  .gh-article .wp-block-post-content{font-size:16px}
  .gh-article .wp-block-post-content>p:first-of-type::first-letter{font-size:48px}
}

/* ---------- editorial patterns ---------- */
.gh-pattern-quote{border-left:3px solid var(--gh-color-dark,#242424);padding-left:20px;margin:28px 0;font-style:normal}
.gh-pattern-quote p{font-size:var(--wp--preset--font-size--l,20px);line-height:1.6;margin:0}
.gh-pattern-quote cite{display:block;margin-top:10px;font-size:var(--wp--preset--font-size--xs,13px);color:var(--gh-color-muted,#888888);font-style:normal}
.gh-pattern-highlight{background:var(--gh-color-surface,#F5F5F5);padding:20px 24px;border-radius:var(--gh-radius-small,4px);margin:28px 0}
.gh-pattern-highlight p{margin:0}
.gh-pattern-note{border-top:2px solid var(--gh-color-dark,#242424);padding-top:16px;margin:36px 0 0}
.gh-pattern-note h4{margin:0 0 8px;font-size:var(--wp--preset--font-size--s,15px);letter-spacing:.04em;text-transform:uppercase}
.gh-pattern-display{font-size:var(--wp--preset--font-size--xxl,36px);line-height:1.2;margin:36px 0 16px}
.gh-pattern-imgtext{margin:28px 0}

/* ---------- footer navigation (user-managed pages) ---------- */
.gh-footer-nav .wp-block-navigation__container{gap:10px}
.gh-footer-nav a{color:rgba(255,255,255,.72);text-decoration:none;font-size:var(--wp--preset--font-size--s,14px)}
.gh-footer-nav a:hover{color:#FFFFFF}
.gh-footer-bottom-links a{color:rgba(255,255,255,.6);text-decoration:none;font-size:var(--wp--preset--font-size--xs,13px)}
.gh-footer-bottom-links a:hover{color:#FFFFFF}
.gh-footer-nav .wp-block-navigation__responsive-container-open,
.gh-footer-bottom-links .wp-block-navigation__responsive-container-open{display:none}

/* ---------- article meta: separator styles ---------- */
/* The byline's share control carries .gh-share too, because main.js
   binds the share handler to that class. The standalone header button
   rule sizes .gh-share to a fixed 28px square, which squashed the
   byline's icon+label to zero width. Inside the byline it is a text
   control, not an icon button, so the fixed box is reset. */
.gh-art-meta .gh-share{width:auto;height:auto}
.gh-art-meta{justify-content:var(--gh-am-justify,flex-start);font-weight:var(--gh-am-fw,400)}
.gh-am-sep-space .gh-am-sep{display:none}
.gh-am-sep-pipe .gh-am-sep,.gh-am-sep-slash .gh-am-sep{opacity:.4}

/* ---------- announcement bar: mobile wording ---------- */
@media (max-width:767px){
  .gh-announce:not(.gh-announce-keep-lead) .gh-announce-lead{display:none}
  .gh-announce:not(.gh-announce-keep-lead) .gh-announce-cta{font-weight:500}
}

/* ---------- breadcrumb ---------- */
.gh-crumb{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--gh-bc-gap,8px);
  font-size:var(--gh-bc-fs,14px);
  color:var(--gh-bc-fg,var(--gh-color-muted,#888888));
  margin:0 0 var(--gh-bc-mb,16px);
}
.gh-crumb a{color:inherit;text-decoration:none}
.gh-crumb a:hover{color:var(--gh-color-text,#242424);text-decoration:underline}
/* The separator is a real element with real spacing — no padding
   characters inside the link text. */
.gh-crumb .gh-bc-sep{opacity:.55;line-height:1}

/* ---------- article metadata + share ---------- */
.gh-art-meta{
  display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-size:var(--gh-am-fs,14px);font-weight:var(--gh-am-fw,400);
  color:var(--gh-am-fg,var(--gh-color-secondary,#666666));
  margin:14px 0 0;
}
.gh-am-info{display:flex;flex-direction:column;gap:2px;min-width:0}
.gh-am-inline .gh-am-info{flex-direction:row;flex-wrap:wrap;align-items:center;gap:var(--gh-am-gap,14px)}
.gh-am-item{line-height:1.6}
.gh-am-label{color:var(--gh-color-muted,#888888)}
.gh-am-qual{font-style:italic}
.gh-am-actions{flex-shrink:0;margin-inline-start:auto}
.gh-art-meta .gh-share{width:auto;height:auto;display:inline-flex;align-items:center;gap:7px;
  background:none;border:0;padding:0;cursor:pointer;font:inherit;color:inherit}
.gh-art-meta .gh-share svg{width:var(--gh-am-icon,18px);height:var(--gh-am-icon,18px)}
.gh-art-meta .gh-share:hover{color:var(--gh-color-text,#242424)}
.gh-am-sep-space .gh-am-sep{display:none}

/* ---------- compact audio button ---------- */
.gh-audio{margin:var(--gh-audio-mt,14px) 0 0;max-width:260px}
.gh-audio-btn{
  display:inline-flex;align-items:center;gap:9px;cursor:pointer;
  padding:var(--gh-audio-py,9px) var(--gh-audio-px,16px);
  border:1px solid var(--gh-color-border,#E5E5E5);
  border-radius:var(--gh-audio-radius,8px);
  background:var(--gh-audio-bg,var(--gh-color-surface,#F5F5F5));
  color:var(--gh-audio-fg,var(--gh-color-text,#242424));
  font:inherit;font-size:var(--gh-audio-fs,15px);line-height:1.2;
}
.gh-audio-btn:hover{border-color:var(--gh-color-text,#242424)}
.gh-audio-icon{display:inline-flex;width:16px;height:16px}
.gh-audio-icon svg{width:16px;height:16px;display:block}
.gh-audio-pause{display:none}
.gh-audio.is-playing .gh-audio-play{display:none}
.gh-audio.is-playing .gh-audio-pause{display:block}
.gh-audio-track{height:2px;margin-top:8px;background:var(--gh-color-border,#E5E5E5);border-radius:2px;overflow:hidden;opacity:0;transition:opacity .2s}
.gh-audio.is-playing .gh-audio-track,.gh-audio.has-started .gh-audio-track{opacity:1}
.gh-audio-bar{display:block;height:100%;width:0;background:var(--gh-color-text,#242424);transition:width .2s linear}

/* ---------- category row shapes ---------- */
.gh-row-lss{grid-template-columns:2fr 1fr 1fr}
.gh-row-ssl{grid-template-columns:1fr 1fr 2fr}
@media (min-width:768px) and (max-width:1023px){
  .gh-row-lss,.gh-row-ssl{grid-template-columns:1fr 1fr;row-gap:16px}
  .gh-row-lss .gh-card--large,.gh-row-ssl .gh-card--large{grid-column:1/-1;order:-1}
  .gh-row-lss>.gh-card+.gh-card::before,
  .gh-row-ssl>.gh-card+.gh-card::before{display:none}
  .gh-row-lss .gh-card--small~.gh-card--small::before,
  .gh-row-ssl .gh-card--small~.gh-card--small::before{display:block}
}
@media (max-width:767px){
  .gh-row-lss,.gh-row-ssl{grid-template-columns:1fr;row-gap:0}
}

/* ---------- editorial text styles (Gutenberg block styles) ---------- */
.is-style-gh-highlight{
  background:var(--gh-color-surface,#F5F5F5);
  border-left:3px solid var(--gh-color-dark,#242424);
  padding:14px 18px;margin:24px 0;border-radius:0 var(--gh-radius-small,4px) var(--gh-radius-small,4px) 0;
  color:var(--gh-color-text,#242424);
}
.is-style-gh-emphasis{
  font-weight:700;color:var(--gh-color-text,#242424);
  font-size:calc(var(--wp--preset--font-size--m,17px) * 1.06);
}
.is-style-gh-lead-para{
  font-size:var(--wp--preset--font-size--l,20px);line-height:1.7;
  color:var(--gh-color-secondary,#666666);
}
.is-style-gh-section{
  border-bottom:2px solid var(--gh-color-dark,#242424);
  padding-bottom:6px;margin-top:40px;
}

/* Quote: a decorative mark, larger type, optional attribution. */
.wp-block-quote.is-style-gh-quote{
  position:relative;border:0;margin:32px 0;padding:8px 0 0 56px;font-style:normal;
}
.wp-block-quote.is-style-gh-quote::before{
  content:"\201C";position:absolute;left:0;top:-8px;
  font-family:var(--gh-font-heading,'Gayathri',serif);
  font-size:76px;line-height:1;color:var(--gh-color-border,#E5E5E5);
}
.wp-block-quote.is-style-gh-quote p{
  font-family:var(--gh-font-heading,'Gayathri',serif);
  font-size:var(--wp--preset--font-size--l,22px);line-height:1.65;
  color:var(--gh-color-text,#242424);margin:0 0 10px;
}
.wp-block-quote.is-style-gh-quote cite{
  display:block;font-style:normal;font-size:var(--wp--preset--font-size--s,14px);
  color:var(--gh-color-muted,#888888);
}
.wp-block-quote.is-style-gh-quote cite::before{content:"— "}

.wp-block-pullquote.is-style-gh-pullquote{
  border-top:2px solid var(--gh-color-dark,#242424);
  border-bottom:2px solid var(--gh-color-dark,#242424);
  padding:28px 0;margin:40px 0;background:none;text-align:center;
}
.wp-block-pullquote.is-style-gh-pullquote p{
  font-family:var(--gh-font-heading,'Gayathri',serif);
  font-size:var(--wp--preset--font-size--xl,26px);line-height:1.5;margin:0;
}
.wp-block-pullquote.is-style-gh-pullquote cite{
  display:block;margin-top:12px;font-style:normal;
  font-size:var(--wp--preset--font-size--s,14px);color:var(--gh-color-muted,#888888);
}

/* ---------- footer: page links + centred legal ---------- */
.gh-page-links-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--gh-pl-gap,10px)}
.gh-page-links-list a{color:rgba(255,255,255,.72);text-decoration:none;font-size:var(--gh-pl-fs,14px)}
.gh-page-links-list a:hover{color:#FFFFFF}
.gh-page-links-empty{font-size:13px;color:rgba(255,255,255,.6);margin:0}
/* Single centred column at EVERY width — never split left/right. */
.gh-legal{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--gh-legal-gap,10px)}
.gh-legal p{margin:0;font-size:var(--gh-legal-fs,13px);color:rgba(255,255,255,.6);line-height:1.7}
.gh-legal-links{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--gh-legal-gap,10px) 20px}
.gh-legal-links a{color:rgba(255,255,255,.6);text-decoration:none}
.gh-legal-links a:hover{color:#FFFFFF}
.gh-footer-bottom{display:block;text-align:center}