/* ix-site-chrome-v1_1_4.css
   v1.1.4 = v1.1.3 with tighter phone spacing, so the phone footer is 55%
   of its original height (measured: 553px original, 304px or less now).
   Type sizes as v1.1.3. Desktop unchanged; script stays v1_1_1.

   v1.1.3 = v1.1.2 + a much smaller phone footer type scale. v1.1.2 shrank
   the logo but barely moved the type, so links and credit read near
   headline size. On phones the footer now reads as small print under a
   full-size logo: 12px links and description, 11px contact line, 10px
   legal line, tighter spacing throughout. Sizes are forced so page
   stylesheets cannot enlarge them. Desktop unchanged; script stays v1_1_1.

   v1.1.2 = v1.1.1 + a shorter footer on phones (767px and narrower):
   tighter spacing, slightly smaller type and logo, and the publisher's
   company on its own line (needs ix-site-chrome-v1_1_1.js, which wraps
   it). Desktop unchanged.

   v1.1.1 = v1.1.0 + the footer keeps its own typeface everywhere. Page
   stylesheets (Archives) set a font on every paragraph, which beat the
   footer's inherited font, so the description, headings and credit came
   out in a serif. Every element inside the footer now takes the footer's
   face directly. Nothing else changed; the script stays v1_1_0.

   v1.1.0 = v1.0.2 + the footer (D124, D125), drawn by
   ix-site-chrome-v1_1_0.js on pages that carry the data line
   #ix-title-data. Layout A (Editorial): brand and description, Read,
   Connect, Follow (only when a title has social links), the publisher
   credit, and the legal line. Main colour band with an Accent rule on top.
   Webflow's old footer (section.footer) is hidden only when the data
   line is present, so a page without it keeps its old footer.
   Load lines: head link to v1_1_0.css, footer script v1_1_0.js.

   v1.0.2 = v1.0.1 + an empty colour falls back instead of breaking.
   WLN-999's NEWSLETTER item had no TITLE reference, so its colour line
   came out as "--ix-t-main:;" and every colour resolved to nothing: the
   logo band and the MNA issue bar went transparent. The four title
   colours are now registered (@property) as colours with platform
   defaults. An empty or malformed value is then invalid, and the page
   uses the platform default (a neutral look) instead. The colour line
   still has to be filled for the page to look like its title.
   Nothing else changed. Load line: point Site settings at v1_0_2.

   v1.0.1 = v1.0.0 + the issue line sits on one baseline. Webflow gives
   the issue number its own size, margin and offset, so "121" sat lower
   than "No." and the date. Every piece of the issue line now shares one
   size, one line height, no offsets, aligned on the text baseline.
   Nothing else changed. Load line: point Site settings at v1_0_1.

   INBXIFY · Site Chrome · the top of every public page.
   Design Pass 2 decisions D115 to D120.

   WHAT IT DRAWS
     Desktop (992px and up)
       1. Nav band: full width, the title's dark Main colour, links centred
          as a group, Accent rule under it. Webflow's navbar (inbx-navmenu)
          supplies the links and Memberstack; this file only styles it.
       2. Logo band: full width, the title's Main colour, logo centred.
          This is Webflow's masthead section (title-page-masthead), restyled.
       3. Issue line (Archives, Directory and other non-issue pages only):
          a thin Accent strip under the logo, "No. 121 · September 27, 2026",
          linking to the current issue. Hidden on issue pages.
     Tablet and phone (991px and narrower)
       One sticky row: logo centred, one round menu button on the right,
       Accent rule under it. Issue line below it on non-issue pages.
     Menu sheet (phone): today's sheet (body.js §1, head.css §6), recoloured
       from the title.
     Page background: the title's Page Background behind every page.

   WHERE THE COLOURS COME FROM
     Each page template carries one line in its head, filled from TITLES:
       <style id="ix-title-vars">:root{--ix-t-main:…;--ix-t-accent:…;
         --ix-t-highlight:…;--ix-t-page:…}</style>
     Worked out here, not stored:
       dark main  = Main mixed 35% toward black (nav band, menu button)
       on main    = warm off-white #F4F0E4 (text on Main)
       deep highl = Highlight mixed 22% toward black (Subscribe text)
     All four TITLES colour fields must be filled for every title: an empty
     field gives an empty value, and the page falls back to Webflow's look.

   SCOPE
     Every rule starts with html:has(#ix-title-vars). A page without the
     colour line (T-A, utility pages) is untouched. The id inside :has()
     also gives these rules enough weight to beat Webflow's classes, the
     inline navbar colour on the Newsletter template, and head.css.

   WEBFLOW CLASSES THIS FILE DEPENDS ON (logged as a hardcoding entry)
     body: any · inbx-navmenu · navbar-ibx · nav-link-25 · w--current
     title-page-masthead · mh-gold · nl-page · issue-lb · nl-mh-issue-no
     mh-green · mh-logo · mh-logo-img · mh-subtitle · mh-menu-tablet
     mh-menu-mobile2 · hamburger · nav-bars-wrap · nl-outer-wrapper
     mobile-nav-i · bam-div · slide-menu
     inbx-nav-panel · inbx-nav-close · nav-slide-link · nav-slide-actions
     nav-slide-auth
     If one is renamed in Webflow, that piece falls back to Webflow's look.
   Logged as provisional HC-P-DP6-6.

   LOAD
     Site settings → Custom code → Head code, last line:
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jbrady74/inbxify-site-code@main/ix-site-chrome-v1_0_1.css">
*/

@import url('https://fonts.googleapis.com/css2?family=Jost:wght@500;600;700&display=swap');

/* Title colours, registered so an empty or bad value falls back to the
   platform default instead of breaking every colour on the page. */
@property --ix-t-main      { syntax: '<color>'; inherits: true; initial-value: #22201C; }
@property --ix-t-accent    { syntax: '<color>'; inherits: true; initial-value: #A89E8C; }
@property --ix-t-highlight { syntax: '<color>'; inherits: true; initial-value: #C0432B; }
@property --ix-t-page      { syntax: '<color>'; inherits: true; initial-value: #ECEAE5; }

html:has(#ix-title-vars){
  --ix-c-deep: color-mix(in srgb, var(--ix-t-main), #000 35%);
  --ix-c-on: #F4F0E4;
  --ix-c-hi-ink: color-mix(in srgb, var(--ix-t-highlight), #000 22%);
  --ix-c-paper: #FAF9F5;
  --ix-c-font: 'Jost', 'Avenir Next', Avenir, 'Segoe UI', Arial, sans-serif;
  --ix-c-logo-w: 460px;
  --ix-c-logo-w-m: 230px;
}

/* ── Page background ───────────────────────────────────────────── */
html:has(#ix-title-vars) body{ background-color: var(--ix-t-page) !important; }
/* The Newsletter template paints its wrapper in the title colour inline. */
html:has(#ix-title-vars) .nl-outer-wrapper{ background-color: transparent !important; }

/* ── Retired pieces (D120) ─────────────────────────────────────────
   The old slide menu and the unwired second menu button. Hidden here
   until they are removed from the templates. */
html:has(#ix-title-vars) .mobile-nav-i,
html:has(#ix-title-vars) .bam-div,
html:has(#ix-title-vars) .slide-menu,
html:has(#ix-title-vars) .mh-menu-mobile2{ display: none !important; }
/* Tagline under the logo: not part of the design. */
html:has(#ix-title-vars) .mh-subtitle{ display: none !important; }

/* ── Masthead section: shared ───────────────────────────────────── */
html:has(#ix-title-vars) .title-page-masthead{
  display: flex !important;
  flex-direction: column;
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  background-color: var(--ix-t-main) !important;
  background-image: none !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
}
/* Logo row comes first, issue line second. */
html:has(#ix-title-vars) .title-page-masthead .mh-green{
  order: 1;
  position: relative;
  display: flex !important;
  justify-content: center;
  align-items: center;
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  margin: 0 !important;
  padding: 30px 20px !important;
  background: transparent !important;
  border: 0 !important;
}
html:has(#ix-title-vars) .mh-logo{
  position: static !important;
  display: block !important;
  width: auto !important;
  max-width: 100%;
  margin: 0 auto !important;
  transform: none !important;
}
html:has(#ix-title-vars) .mh-lb{ display: block !important; width: auto !important; }
html:has(#ix-title-vars) .mh-logo-img{
  display: block;
  width: 100%;
  max-width: var(--ix-c-logo-w);
  height: auto;
  margin: 0 auto;
}
/* Issue line (S3): the gold strip, below the logo. */
html:has(#ix-title-vars) .title-page-masthead .mh-gold{
  order: 2;
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  margin: 0 !important;
  padding: 8px 16px !important;
  background: var(--ix-t-accent) !important;
  border: 0 !important;
  text-align: center;
}
/* Not on issue pages: the issue bar already says it. */
html:has(#ix-title-vars) .title-page-masthead .mh-gold.nl-page{ display: none !important; }
html:has(#ix-title-vars) .mh-gold .issue-lb{
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: baseline !important;
  gap: 10px;
  color: var(--ix-t-main) !important;
  text-decoration: none;
}
html:has(#ix-title-vars) .mh-gold .issue-lb,
html:has(#ix-title-vars) .mh-gold .issue-lb *{
  font-family: var(--ix-c-font) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
  color: var(--ix-t-main) !important;
  margin: 0 !important;
  padding: 0 !important;
  position: static !important;
  top: auto !important;
  bottom: auto !important;
  transform: none !important;
  vertical-align: baseline !important;
  height: auto !important;
  font-variant-numeric: lining-nums !important;
}
html:has(#ix-title-vars) .mh-gold .txt.dot{ display: inline !important; }
html:has(#ix-title-vars) .mh-gold .nl-mh-issue-no{ display: inline-flex !important; flex-direction: row !important; align-items: baseline !important; gap: 6px; }

/* ── Menu button: drawn in code (C2) ────────────────────────────── */
html:has(#ix-title-vars) .mh-menu-tablet .hamburger,
html:has(#ix-title-vars) .mh-menu-tablet .nav-bars-wrap{ display: none !important; }
html:has(#ix-title-vars) .mh-menu-tablet{
  position: absolute !important;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--ix-c-deep);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  margin: 0 !important;
}
html:has(#ix-title-vars) .mh-menu-tablet::before{
  content: "";
  display: block;
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: var(--ix-c-on);
  box-shadow: 0 -6px 0 var(--ix-c-on), 0 6px 0 var(--ix-c-on);
}

/* ── Desktop ────────────────────────────────────────────────────── */
@media (min-width: 992px){
  html:has(#ix-title-vars) .inbx-navmenu{
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    background-color: var(--ix-c-deep) !important;
    border-bottom: 2px solid var(--ix-t-accent) !important;
    justify-content: center;
  }
  html:has(#ix-title-vars) .navbar-ibx{ background: transparent !important; }
  html:has(#ix-title-vars) .nav-link-25{
    color: var(--ix-c-on) !important;
    font-family: var(--ix-c-font) !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    letter-spacing: .14em !important;
    text-transform: uppercase !important;
  }
  html:has(#ix-title-vars) .nav-link-25:hover,
  html:has(#ix-title-vars) .nav-link-25.w--current{ color: var(--ix-t-accent) !important; }
  html:has(#ix-title-vars) .mh-menu-tablet{ display: none !important; }
  /* Not sticky on desktop: the nav band carries navigation. */
  html:has(#ix-title-vars) .title-page-masthead{ position: relative !important; }
}

/* ── Tablet and phone ───────────────────────────────────────────── */
@media (max-width: 991px){
  html:has(#ix-title-vars) .title-page-masthead{
    position: sticky !important;
    top: 0;
    z-index: 500;
    border-bottom: 2px solid var(--ix-t-accent) !important;
  }
  html:has(#ix-title-vars) .title-page-masthead .mh-green{ padding: 12px 64px !important; }
  html:has(#ix-title-vars) .mh-logo-img{ max-width: var(--ix-c-logo-w-m); }
  html:has(#ix-title-vars) .mh-menu-tablet{ display: flex !important; }
  html:has(#ix-title-vars) .title-page-masthead .mh-gold{ padding: 6px 12px !important; }
  html:has(#ix-title-vars) .mh-gold .issue-lb,
  html:has(#ix-title-vars) .mh-gold .issue-lb *{ font-size: 10.5px !important; letter-spacing: .14em !important; }
}

/* ── Menu sheet (N1, N2): structure kept, colours from the title ── */
html:has(#ix-title-vars) .inbx-nav-panel{ background: var(--ix-c-paper) !important; }
html:has(#ix-title-vars) .inbx-nav-close{ background: color-mix(in srgb, var(--ix-t-main) 8%, transparent) !important; }
html:has(#ix-title-vars) .inbx-nav-close:hover{ background: color-mix(in srgb, var(--ix-t-main) 15%, transparent) !important; }
html:has(#ix-title-vars) .inbx-nav-close svg{ stroke: var(--ix-t-main) !important; }
html:has(#ix-title-vars) .inbx-nav-panel .w-dyn-item a,
html:has(#ix-title-vars) .inbx-nav-panel a.nav-slide-link{
  color: var(--ix-t-main) !important;
  background: color-mix(in srgb, var(--ix-t-main) 6%, transparent) !important;
}
html:has(#ix-title-vars) .inbx-nav-panel .w-dyn-item a:hover,
html:has(#ix-title-vars) .inbx-nav-panel a.nav-slide-link:hover{
  background: color-mix(in srgb, var(--ix-t-main) 11%, transparent) !important;
}
html:has(#ix-title-vars) .inbx-nav-panel a.w--current{
  background: color-mix(in srgb, var(--ix-t-accent) 16%, transparent) !important;
  box-shadow: inset 4px 0 0 var(--ix-t-accent);
}
html:has(#ix-title-vars) .inbx-nav-panel .nav-slide-divider{ background: color-mix(in srgb, var(--ix-t-main) 12%, transparent) !important; }
html:has(#ix-title-vars) .inbx-nav-panel .nav-slide-actions a[data-subscribe]{ color: var(--ix-c-hi-ink) !important; }
html:has(#ix-title-vars) .inbx-nav-panel .nav-slide-actions a[data-subscribe]:hover{
  color: var(--ix-c-hi-ink) !important;
  background: color-mix(in srgb, var(--ix-t-highlight) 12%, transparent) !important;
}
html:has(#ix-title-vars) .inbx-nav-panel .nav-slide-actions a[data-contact]{ color: var(--ix-t-main) !important; }
html:has(#ix-title-vars) .inbx-nav-panel .nav-slide-actions a[data-contact]:hover{
  color: var(--ix-c-deep) !important;
  background: color-mix(in srgb, var(--ix-t-main) 6%, transparent) !important;
}
html:has(#ix-title-vars) .inbx-nav-panel .nav-slide-auth a:hover{
  color: var(--ix-t-main) !important;
  background: color-mix(in srgb, var(--ix-t-main) 5%, transparent) !important;
}

/* ═══════════ v1.1.0 · Footer (D124) ═══════════════════════════════ */
html:has(#ix-title-data) section.footer{ display: none !important; }

html:has(#ix-title-vars) footer.ixf{
  --ixf-dim: color-mix(in srgb, var(--ix-c-on) 68%, transparent);
  --ixf-line: color-mix(in srgb, var(--ix-c-on) 14%, transparent);
  --ixf-sub: color-mix(in srgb, var(--ix-t-highlight), #fff 22%);
  display: block;
  width: 100%;
  margin: 56px 0 0;
  background: var(--ix-t-main);
  border-top: 3px solid var(--ix-t-accent);
  color: var(--ix-c-on);
  font-family: var(--ix-c-font);
  text-align: left;
}
html:has(#ix-title-vars) .ixf *{ box-sizing: border-box; }
/* Page stylesheets set fonts on p, span and b; the footer keeps its own. */
html:has(#ix-title-vars) .ixf,
html:has(#ix-title-vars) .ixf *{ font-family: var(--ix-c-font) !important; }
/* Webflow styles bare links site-wide; the footer's links take its own type. */
html:has(#ix-title-vars) .ixf a{ color: inherit; text-decoration: none; font: inherit; letter-spacing: normal; text-transform: none; }
html:has(#ix-title-vars) .ixf a:hover{ color: var(--ix-t-accent); }
html:has(#ix-title-vars) .ixf a:focus-visible{ outline: 2px solid var(--ix-t-accent); outline-offset: 3px; border-radius: 2px; }

html:has(#ix-title-vars) .ixf-in{
  max-width: 1000px;
  margin: 0 auto;
  padding: 48px 32px 0;
  display: grid;
  grid-template-columns: minmax(0,1.5fr) repeat(3, minmax(0,1fr));
  gap: 32px;
}
html:has(#ix-title-vars) .ixf-in--nofollow{ grid-template-columns: minmax(0,1.6fr) repeat(2, minmax(0,1fr)); }

html:has(#ix-title-vars) .ixf-logo{ display: inline-block; }
html:has(#ix-title-vars) .ixf-logo img{ display: block; width: 100%; max-width: 260px; height: auto; }
html:has(#ix-title-vars) .ixf-logo-text{ font-size: 24px; font-weight: 700; }
html:has(#ix-title-vars) .ixf-desc{
  margin: 16px 0 0;
  max-width: 320px;
  font-size: 15px;
  line-height: 1.55;
  font-weight: 400;
  color: var(--ixf-dim);
}

html:has(#ix-title-vars) .ixf-h{
  margin: 0 0 14px;
  font-size: 11px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ix-t-accent);
}
html:has(#ix-title-vars) .ixf-col a{
  display: block;
  padding: 6px 0;
  font-size: 15px;
  line-height: 1.2;
  font-weight: 500;
  cursor: pointer;
}
html:has(#ix-title-vars) .ixf-col a.ixf-sub{ color: var(--ixf-sub); }
html:has(#ix-title-vars) .ixf-col a.ixf-sub:hover{ color: var(--ix-t-accent); }

html:has(#ix-title-vars) .ixf-soc{ display: flex; flex-wrap: wrap; gap: 10px; }
html:has(#ix-title-vars) .ixf-soc a{
  width: 36px; height: 36px; padding: 0;
  border-radius: 50%;
  border: 1.5px solid color-mix(in srgb, var(--ix-c-on) 40%, transparent);
  display: grid; place-items: center;
  font-size: 12px; font-weight: 700;
}
html:has(#ix-title-vars) .ixf-soc a:hover{ border-color: var(--ix-t-accent); }

html:has(#ix-title-vars) .ixf-pub{ max-width: 1000px; margin: 32px auto 0; padding: 0 32px; }
html:has(#ix-title-vars) .ixf-pub p{ margin: 0; }
html:has(#ix-title-vars) .ixf-pub-who{ font-size: 15px; line-height: 1.5; }
html:has(#ix-title-vars) .ixf-pub-who b{ font-weight: 600; }
html:has(#ix-title-vars) .ixf-pub-reach{ font-size: 14px; line-height: 1.6; color: var(--ixf-dim); }

html:has(#ix-title-vars) .ixf-base{
  max-width: 1000px;
  margin: 32px auto 0;
  padding: 20px 32px 28px;
  border-top: 1px solid var(--ixf-line);
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 12.5px;
  color: var(--ixf-dim);
}
html:has(#ix-title-vars) .ixf-legal a{ margin-left: 18px; }

@media (max-width: 767px){
  html:has(#ix-title-vars) footer.ixf{ margin-top: 16px; }
  html:has(#ix-title-vars) .ixf-in,
  html:has(#ix-title-vars) .ixf-in--nofollow{ grid-template-columns: 1fr 1fr; padding: 12px 18px 0; gap: 10px 14px; }
  html:has(#ix-title-vars) .ixf-brand{ grid-column: 1 / -1; }
  html:has(#ix-title-vars) .ixf-logo img{ max-width: 220px; }
  html:has(#ix-title-vars) .ixf-desc{ margin-top: 6px !important; font-size: 12px !important; line-height: 1.4 !important; }
  html:has(#ix-title-vars) .ixf-h{ margin-bottom: 4px !important; font-size: 9.5px !important; letter-spacing: .2em !important; }
  html:has(#ix-title-vars) .ixf-col a{ padding: 2px 0 !important; font-size: 12px !important; font-weight: 400 !important; line-height: 1.25 !important; }
  html:has(#ix-title-vars) .ixf-pub{ margin-top: 10px; padding: 0 18px; }
  html:has(#ix-title-vars) .ixf-pub-who{ font-size: 12px !important; line-height: 1.4 !important; }
  html:has(#ix-title-vars) .ixf-pub-reach{ font-size: 11px !important; line-height: 1.5 !important; }
  html:has(#ix-title-vars) .ixf-sep{ display: none; }
  html:has(#ix-title-vars) .ixf-co{ display: block; }
  html:has(#ix-title-vars) .ixf-base{ margin-top: 10px; padding: 6px 18px 8px; gap: 4px; font-size: 10px !important; }
  html:has(#ix-title-vars) .ixf-base *{ font-size: 10px !important; }
  html:has(#ix-title-vars) .ixf-legal a{ margin: 0 14px 0 0; }
}