/* GRN design map — unification layer (owner's picks 13 Nov 2026, option A for decisions 1–10).
   Loads on public pages after the page styles; values come from grn-tokens.css.
   Scope: public site only. The panel and the book's reading text are not touched. */

/* ---------- 1. Section label (eyebrow): Inter 13/600 caps .18em + 28px rule; fa/ar/ur 15/600, no caps ---------- */
html body :is(.eyebrow:not(.toc__head .eyebrow),p.k,.grn-pr-k,.grn404__eyebrow,.grn-eyebrow:not(.elementor-widget),.grn-eyebrow.elementor-widget .elementor-heading-title,.gva-eyebrow .elementor-heading-title,.k.elementor-widget .elementor-heading-title){
  font-family:var(--grn-f-ui)!important;font-size:13px!important;font-weight:600!important;letter-spacing:.18em!important;text-transform:uppercase!important;line-height:1.3!important}
/* the widget wrapper of div.k carries the rule itself */
html body .k.elementor-widget{font-size:13px!important}
/* section-level labels get the 28px rule leading the text (card-level tags such as part numbers stay without a rule) */
html body :is(.eyebrow:not(.toc__head .eyebrow),p.k,.grn-pr-k,.grn404__eyebrow,.gva-eyebrow .elementor-heading-title,.grn-eyebrow:not(.ab-eyebrow):not(.ab-k):not(.au-k):not(.au-step__s):not(.nw-k):not(.dc-k):not(.ct-k):not(.pp-k):not([class*="__"]):not(.dc-t):not(.dc-tag):not(.dc-lbl).elementor-widget .elementor-heading-title){
  display:inline-flex!important;align-items:center!important;gap:12px!important}
html body :is(.eyebrow:not(.toc__head .eyebrow),p.k,.grn-pr-k,.grn404__eyebrow,.gva-eyebrow .elementor-heading-title,.grn-eyebrow:not(.ab-eyebrow):not(.ab-k):not(.au-k):not(.au-step__s):not(.nw-k):not(.dc-k):not(.ct-k):not(.pp-k):not([class*="__"]):not(.dc-t):not(.dc-tag):not(.dc-lbl).elementor-widget .elementor-heading-title)::before{
  content:""!important;display:inline-block!important;width:28px!important;height:1px!important;background:currentColor!important;flex:none!important;margin:0!important;position:static!important;opacity:1!important}
html body .k.elementor-widget::before{width:28px!important}
/* page-built labels whose widget wrapper draws the rule: same 28px rule and 12px gap */
html body .grn-eyebrow:is(.ab-eyebrow,.ab-k,.au-k,.au-step__s,.nw-k,.dc-k,.ct-k,.pp-k).elementor-widget{display:flex!important;align-items:center!important;gap:12px!important}
html body .grn-eyebrow:is(.ab-eyebrow,.ab-k,.au-k,.au-step__s,.nw-k,.dc-k,.ct-k,.pp-k).elementor-widget::before{width:28px!important;margin:0!important;flex:none!important}
html body .grn-eyebrow:is(.ab-eyebrow,.ab-k,.au-k,.au-step__s,.nw-k,.dc-k,.ct-k,.pp-k).elementor-widget .elementor-heading-title::before{content:none!important}
html body .k.elementor-widget .elementor-heading-title::before{content:none!important}
/* labels never carry icons */
html body .grn-kick .elementor-icon-list-icon,html body .bp-kick .elementor-icon-list-icon{display:none!important}
html body .grn-kick .elementor-icon-list-text,html body .bp-kick .elementor-icon-list-item:first-child .elementor-icon-list-text{
  display:inline-flex!important;align-items:center;gap:12px;font-family:var(--grn-f-ui)!important;font-size:13px!important;font-weight:600!important;letter-spacing:.18em!important;text-transform:uppercase!important;line-height:1.3!important;color:var(--grn-gold)!important;padding:0!important}
html body .grn-kick .elementor-icon-list-text::before,html body .bp-kick .elementor-icon-list-item:first-child .elementor-icon-list-text::before{content:"";width:28px;height:1px;background:currentColor;flex:none}
/* right-to-left: same colour and rule, Vazirmatn/Naskh 15/600, no caps, no tracking; the rule leads the text (on its right) */
html[dir=rtl] body :is(.eyebrow:not(.toc__head .eyebrow),p.k,.grn-pr-k,.grn404__eyebrow,.grn-eyebrow:not(.elementor-widget),.grn-eyebrow.elementor-widget .elementor-heading-title,.gva-eyebrow .elementor-heading-title,.k.elementor-widget .elementor-heading-title,.grn-kick .elementor-icon-list-text,.bp-kick .elementor-icon-list-item:first-child .elementor-icon-list-text){
  font-family:inherit!important;font-size:15px!important;letter-spacing:0!important;text-transform:none!important;line-height:1.6!important;flex-direction:row!important}
html[dir=rtl] body .k.elementor-widget{flex-direction:row!important}

/* ---------- 2. Section title (H2): one scale; display size only for showpiece bands ---------- */
html body :is(.elementor-widget-heading:not(.pp-sec__h):not(.dc-feat__h):not(.gw-moreh):not(.grn-h2):not(.ab-g__t) > h2.elementor-heading-title,#net-title,#bp-h,#pl-h,#book-title,#hw-title,#hn-title,#join-title,#toc-title,#dl-title,.head2 h2,#grn-map-title,#mr-road,#mr-first,#mr-deep,.ba .sh > h2,.ba section.go h2){
  font-size:var(--grn-h2)!important;line-height:1.05!important;letter-spacing:-.3px!important;text-wrap:balance}
html body :is(.end__in h2,.grn-top-l .grn-h2 h2){font-size:var(--grn-h2-display)!important;line-height:1!important}
html[dir=rtl] body :is(.elementor-widget-heading:not(.pp-sec__h):not(.dc-feat__h):not(.gw-moreh):not(.grn-h2):not(.ab-g__t) > h2.elementor-heading-title,#net-title,#bp-h,#pl-h,#book-title,#hw-title,#hn-title,#join-title,#toc-title,#dl-title,.head2 h2,#grn-map-title,#mr-road,#mr-first,#mr-deep,.ba .sh > h2,.ba section.go h2,.end__in h2,.grn-top-l .grn-h2 h2){letter-spacing:0!important;line-height:1.35!important}
html body :is(.ab-h2,.au-h2,.dc-h2,.ct-h2,.nw-h2) h2 em,html body .head2 h2 em{color:inherit}

/* ---------- 3. Action link: small outlined pill, arrow forward in reading direction ---------- */
html body :is(.hw-tools a.link,.hn-tools a.link,.col-h > a,.docs a.link,.nowcard > a,a.nw-all,a.elementor-post__read-more){
  display:inline-flex!important;align-items:center!important;gap:8px!important;height:var(--grn-link-h)!important;padding:0 16px!important;border-radius:var(--grn-r-pill)!important;
  box-shadow:inset 0 0 0 1px currentColor!important;background:transparent!important;color:var(--grn-gold-ink)!important;font-family:var(--grn-f-ui)!important;font-size:14px!important;font-weight:600!important;line-height:1!important;text-decoration:none!important;white-space:nowrap;
  transition:background-color .2s var(--grn-ease),color .2s var(--grn-ease),box-shadow .2s var(--grn-ease)!important}
html[dir=rtl] body :is(.hw-tools a.link,.hn-tools a.link,.col-h > a,.docs a.link,.nowcard > a,a.nw-all,a.elementor-post__read-more){font-family:inherit!important}
html body :is(.hw-tools a.link,.hn-tools a.link,.col-h > a,.docs a.link,.nowcard > a,a.nw-all,a.elementor-post__read-more):hover{background:var(--grn-gold)!important;color:var(--grn-ink)!important;box-shadow:inset 0 0 0 1px var(--grn-gold)!important}
/* on ink bands the ring and text are gold */
html body .docs a.link{color:var(--grn-gold-hi)!important}
html body :is(.hw-tools a.link,.hn-tools a.link,.docs a.link) svg{width:16px;height:16px;transition:transform .2s var(--grn-ease)}
html body :is(.hw-tools a.link,.hn-tools a.link,.docs a.link):hover svg{transform:translateX(4px)}
html[dir=rtl] body :is(.hw-tools a.link,.hn-tools a.link,.docs a.link) svg{transform:scaleX(-1)}
html[dir=rtl] body :is(.hw-tools a.link,.hn-tools a.link,.docs a.link):hover svg{transform:scaleX(-1) translateX(4px)}

/* ---------- 4. Pill buttons: 48px (small 40px), weight 600 ---------- */
html body :is(a.btn,button.btn,a.grn-pr-btn,.grn-btn,.gh-btn,a.pg__toc,.btns > a,.ctas > a,.cta > a,.links > a,.book__ctas > a,
  .elementor-widget-button:not(.grn-plat):not(.ab-read):not(.dc-copy):not([data-id^="5f00002"]):not(:is(.elementor-element-dq,.elementor-element-dr,.elementor-element-d11,.elementor-element-d12,.elementor-element-d1c,.elementor-element-d1d)):not(.ab-track):not(:is(.elementor-location-header,.elementor-location-footer,.dc-doc,.ab-row,.ab-g) *) .elementor-button,.e-form__buttons .elementor-button,.gqa-btn,.grn404__search button){
  height:var(--grn-btn-h)!important;min-height:var(--grn-btn-h)!important;padding-block:0!important;padding-inline:26px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;
  border-radius:var(--grn-r-pill)!important;font-size:15px!important;font-weight:600!important;line-height:1!important;box-sizing:border-box!important}
html:not([dir=rtl]) body :is(.gh-btn){font-family:var(--grn-f-ui)!important}
/* small pills inside cards and lists */
html body :is(.dc-doc .elementor-button,.st__acts > a,.bp-btns > a,.gcm-btn,.gw-btn,.elementor-element-dq .elementor-button,.elementor-element-dr .elementor-button,.elementor-element-d11 .elementor-button,.elementor-element-d12 .elementor-button,.elementor-element-d1c .elementor-button,.elementor-element-d1d .elementor-button,.dc-copy .elementor-button){
  height:var(--grn-btn-h-sm)!important;min-height:var(--grn-btn-h-sm)!important;padding-block:0!important;padding-inline:18px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;
  border-radius:var(--grn-r-pill)!important;font-size:14px!important;font-weight:600!important;line-height:1!important;box-sizing:border-box!important}
html body :is(a.btn,a.grn-pr-btn,.gh-btn,.elementor-widget-button .elementor-button):active{transform:scale(.97)}

/* ---------- 5. Cards: 24 large, 16 small and media frames, 10 thumbnails; no resting shadow ---------- */
html body :is(.swiper-slide > a.elementor-element,.swiper-slide > div.elementor-element,.news a.nc,.hn-body a.fe,#hn-body a.fe,.trailer,.road .ph,.deep .cards a.card,.arts article.art,ul.who li.cta-cell,.instr li,.tiers .tier,.au-who__i,.au-is,.au-not,.dl__grid a.card,.grn-chap .grn-head,.grn-listen-pane .player,.nw-wrap article.elementor-post,.elementor-element-nm article.elementor-post,.elementor-element-ng article.elementor-post,.elementor-element-nf article.elementor-post,.nw-cta,.ba a.fe,.ba section.go,.bp-f,.bp-author,.gv-desc,.dc-doc,.dc-feat,.dc-cbox,.ct-card,.ct-note,.pp-sum,section.gcm,.invite__grid .panel,.docs,.elementor-element-gw00114 article.elementor-post,.elementor-widget-archive-posts article.elementor-post,.elementor-widget-posts article.elementor-post){
  border-radius:var(--grn-r-card)!important}
html body :is(.docs .dl a.dc,.hw-main a.uc,.gw-card,.gov .org .node,.mosaic .ph,.pp-tbl,.elementor-element-gw0010f article.elementor-post,.gh-th){border-radius:var(--grn-r-card-sm)!important}
html body :is(.hw-main a.uc img,.gh-up .gh-th){border-radius:var(--grn-r-thumb)!important}
/* cards on cream rest on a hairline ring, lift on hover */
html body :is(.nw-wrap article.elementor-post,.elementor-element-nm article.elementor-post,.elementor-element-ng article.elementor-post,.dc-doc,.dc-cbox,.instr li,.ct-card,.ab-card,section.gcm){box-shadow:inset 0 0 0 1px var(--grn-line)!important}
html body :is(.nw-wrap article.elementor-post,.elementor-element-nm article.elementor-post,.elementor-element-ng article.elementor-post,.dc-doc,.ab-card):hover{box-shadow:inset 0 0 0 1px var(--grn-line),var(--grn-shadow-hover)!important}

/* ---------- 7. Filter chips: 36px pill, Inter 13/500; cream: paper + line, active ink; ink bands: veil + cream ring, active cream ---------- */
html body :is(.gqa-cats > button,.nw-chips > button,.gl-tools .chips > button.chip,#gvh2 .gh-chip,.st-chips .elementor-button){
  height:var(--grn-chip-h)!important;min-height:0!important;padding:0 14px!important;border-radius:var(--grn-r-pill)!important;display:inline-flex!important;align-items:center!important;gap:6px!important;
  background:var(--grn-paper)!important;box-shadow:inset 0 0 0 1px var(--grn-line)!important;border:0!important;color:var(--grn-ink)!important;font-size:13px!important;font-weight:500!important;line-height:1!important}
html:not([dir=rtl]) body :is(.gqa-cats > button,.nw-chips > button,.gl-tools .chips > button.chip,#gvh2 .gh-chip){font-family:var(--grn-f-ui)!important}
html body :is(.gqa-cats > button,.nw-chips > button,.gl-tools .chips > button.chip,#gvh2 .gh-chip):hover{box-shadow:inset 0 0 0 1px var(--grn-gold)!important;color:var(--grn-gold-ink)!important}
html body :is(.gqa-cats > button.on,.nw-chips > button.on,.gl-tools .chips > button.chip.on,#gvh2 .gh-chip[aria-pressed="true"]){background:var(--grn-ink)!important;color:var(--grn-cream)!important;box-shadow:inset 0 0 0 1px var(--grn-ink)!important}
html body .gl-tools .chips > button.chip.on > span{color:var(--grn-gold-hi)!important}
html body :is(.ba #chips > button,.gva-search nav.chips > a){height:var(--grn-chip-h)!important;padding:0 14px!important;border-radius:var(--grn-r-pill)!important;display:inline-flex!important;align-items:center!important;
  background:rgba(250,247,242,.06)!important;box-shadow:inset 0 0 0 1px rgba(250,247,242,.25)!important;border:0!important;color:var(--grn-cream)!important;font-size:13px!important;font-weight:500!important;line-height:1!important}
html body :is(.ba #chips > button.on,.gva-search nav.chips > a.on){background:var(--grn-cream)!important;color:var(--grn-ink)!important;box-shadow:inset 0 0 0 1px var(--grn-cream)!important}

/* ---------- 6. Videos hub: Cormorant titles like the rest of the site, pill chips (above) ---------- */
html:not([dir=rtl]) body #gvh2 .gh-t{font-family:var(--grn-f-display)!important;font-weight:600!important;font-size:19px!important;line-height:1.2!important}
html:not([dir=rtl]) body #gvh2 .gh-up .gh-t{font-size:17px!important}
html:not([dir=rtl]) body #gvh2 :is(.gh-big,.gh-res) .gh-t{font-size:22px!important}
html:not([dir=rtl]) body #gvh2 .gh-ft{font-family:var(--grn-f-display)!important}
html:not([dir=rtl]) body #gvh2 :is(.gh-sub,.gh-meta,.gh-mt,.gh-x,.gh-tbtn,.gh-sort){font-family:var(--grn-f-ui)!important}

/* ---------- 9. Search pills 48px; form fields 50px with radius 12 ---------- */
html body :is(form.hw-search,form.nw-sf,form.sb,form.gqa-ask,form.gh-search,form.grn404__search){
  min-height:var(--grn-search-h)!important;border-radius:var(--grn-r-pill)!important;background:var(--grn-paper)!important;box-shadow:inset 0 0 0 1px var(--grn-line),var(--grn-shadow-float)!important;border:0!important;align-items:center!important}
html body :is(form.hw-search,form.nw-sf,form.sb,form.gqa-ask,form.gh-search,form.grn404__search) :is(input[type=search],input[type=text],input:not([type])){background:transparent!important;border:0!important;box-shadow:none!important;color:var(--grn-ink)!important}
html body :is(form.hw-search,form.nw-sf,form.sb,form.gqa-ask,form.grn404__search) button:not(.gqa-hp){height:var(--grn-btn-h-sm)!important;min-height:0!important;padding:0 18px!important;border-radius:var(--grn-r-pill)!important;font-size:14px!important;font-weight:600!important}
html body .elementor-form :is(input:not([type=checkbox]):not([type=radio]):not([type=submit]),select){min-height:var(--grn-field-h)!important;border-radius:var(--grn-r-field)!important}
html body .elementor-form textarea,html body .gcm-comp textarea{border-radius:var(--grn-r-field)!important}

/* ---------- 10. One value per colour role ---------- */
html body :is(.grn-parts,.pv-book section.dl#download,section.grn-bp#blueprint,section#news.section,.mr section.deep,.dl__grid a.card > span.card__ic,.spirit__lead .basis){background-color:var(--grn-stone)!important}
html body :is(.grn-top-l .grn-h2 h2 > em,.gml-menu a.on,#bk-title > span,ul.stats > li > b,#gvh2 .gh-upnext > h3,#gvh2 .gh-up .gh-t,#gvh2 .gh-up .gh-t a){color:var(--grn-gold-hi)!important}
html body .dl__grid a.card.card--main > span.card__ic{background-color:var(--grn-gold-hi)!important}
html body :is(.pv-idea .lead p,.pv-idea .body p,.spirit__lead .basis p,.ab-list__lede,.au-st__p,.dc-p,.ct-p,.pp-sec__t,.pv-book .pt__intro,.pv-book .dl__lede,.gl-tools .chips > button.chip){color:var(--grn-text)!important}
html body :is(.e-n-menu .elementor-icon-box-description,.mr p.lede,.mr .rh > p,.gqa-gh small,.gqa-none,.ba span.bd > p,.gl-count,.gl-none p,.gl p.meta > span,.pv-book .pt__meta span){color:var(--grn-muted)!important}

/* arrows in buttons point forward in reading direction too (right-arrow icons are mirrored on RTL pages) */
html[dir=rtl] body :is(a,button):not(.link):not(.elementor-location-header *):not(.elementor-location-footer *) svg:has(path[d^="M5 12h14"]){transform:scaleX(-1)}


/* chapter pages: Elementor containers set their own --display:flex, which hid the chapter's display-font variable,
   so titles, the up-next list and the pager fell back to Times. Name the display font directly. */
html:not([dir=rtl]) body .grn-chap :is(.grn-title .elementor-heading-title,.p-top b,.list li a,.pager a b,.grn-read-pane h3),
html:not([dir=rtl]) body .grn-chap .grn-read-pane p:first-of-type::first-letter{font-family:var(--grn-f-display)!important}