/* ix-archives-v1_1_4.css
   v1.1.4 (29 Oct 2026, Code-Built Site S7): phone search and filter open in
     place (.ixa-xrow, under the count line), no sheet. The open icon gets an
     Accent ring (.ixa-ib.is-open). Pairs with ix-archives-v1_1_4.js.
   INBXIFY · Archives page on the site shell. Pairs with ix-archives-v1_1_3.js
   and ix-shell-v1_0_0.css (load the shell CSS first).
   Every colour comes from the title (--ix-t-*), every font from the shell
   (--ixs-ui, --ixs-display); no title value is typed here.

   v1.1.1 (28 Oct 2026, Code-Built Site S5) Phone: the bar is gone; the line
     holds the count, Clear and two round icon buttons (.ixa-ib, Accent dot
     when set) that open the shell's sheet (.ixa-sheet: the box or pill at
     full width, then a Done button). Desktop unchanged.
   v1.1.0 (28 Oct 2026, Code-Built Site S5) Search box, the Section pill, the
     count line and Clear above the switcher: the Directory's filter rules
     (.ixa-bar, .ixa-search, .ixa-pill, .is-set Accent border, .ixa-line).
     Phone: search full width, then the "Filter by section" link.
   v1.0.4 (28 Oct 2026, Code-Built Site S2) On the shell. The rules that hid
     Webflow's old tabs and print strip are gone (the page holds no Webflow
     elements). Print styles are gone with the Print tab. Rules sit under
     #ix-root. The two tabs are a fixed 210px each (fixed-size rule).
   v1.0.2 (27 Oct 2026) The issue card holds several links.
   v1.0.1 Archives + Directory review v0.2 rulings.
   v1.0.0 first build.

   LOAD (Archives head, after ix-shell-v1_0_0.css)
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jbrady74/inbxify-site-code@main/ix-archives-v1_1_3.css">
*/

#ix-root .ixa {
  --ixa-ink: var(--ix-t-text, #333333);
  --ixa-mute: color-mix(in srgb, var(--ixa-ink) 62%, transparent);
  --ixa-line: color-mix(in srgb, var(--ix-t-main) 14%, transparent);
  --ixa-tile: #ffffff;
  --ixa-ui: var(--ixs-ui, 'Avenir Next', Avenir, 'Segoe UI', Arial, sans-serif);
  --ixa-disp: var(--ixs-display, Georgia, 'Times New Roman', serif);
  --ixa-on: var(--ixs-on, #F4F0E4);
  color: var(--ixa-ink);
  font-family: var(--ixa-ui);
  width: 100%;
  margin-top: 0;
}
#ix-root .ixa *, #ix-root .ixa *::before, #ix-root .ixa *::after { box-sizing: border-box; }

/* ── Loading ── */
#ix-root .ixa-wait { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 60px 0 80px; }
#ix-root .ixa-wait-bar {
  position: relative; width: 220px; height: 4px; border-radius: 999px; overflow: hidden;
  background: color-mix(in srgb, var(--ix-t-main) 12%, transparent);
}
#ix-root .ixa-wait-bar::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 40%; border-radius: 999px;
  background: var(--ix-t-accent); animation: ixa-slide 1.1s ease-in-out infinite;
}
#ix-root .ixa-wait-t { font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ix-t-main); }
@keyframes ixa-slide{ 0%{ left: -40%; } 100%{ left: 100%; } }
@media (prefers-reduced-motion: reduce){ .ixa-wait-bar::after{ animation: none; left: 30%; } }

/* ── Search and the Section filter (v1.1.0) ── */
#ix-root .ixa-bar{ display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
#ix-root .ixa-search{
  position: relative; flex: 1 1 320px; display: flex; align-items: center; height: 48px; min-width: 0;
  border: 1.5px solid color-mix(in srgb, var(--ix-t-main) 18%, transparent); border-radius: 999px; background: #fff;
}
#ix-root .ixa-search:focus-within{ border-color: var(--ix-t-main); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ix-t-main) 10%, transparent); }
#ix-root .ixa-sico{ width: 18px; height: 18px; margin: 0 10px 0 18px; color: var(--ixa-mute, #7A7F7C); }
#ix-root .ixa-search input{
  flex: 1 1 auto; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; padding: 0 8px 0 0;
  font: 400 16px/1 var(--ixs-ui); color: var(--ixa-ink); -webkit-appearance: none; appearance: none;
}
#ix-root .ixa-search input::-webkit-search-cancel-button{ display: none; }
#ix-root .ixa-search input:focus-visible{ outline: 0; }   /* the pill shows focus */
#ix-root .ixa-search input::placeholder{ color: var(--ixa-mute, #7A7F7C); }
#ix-root .ixa-qx{ width: 34px; height: 34px; margin-right: 7px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--ixa-mute, #7A7F7C); }
#ix-root .ixa-qx:hover{ background: color-mix(in srgb, var(--ix-t-main) 8%, transparent); color: var(--ix-t-main); }
#ix-root .ixa-qx svg{ width: 16px; height: 16px; }
#ix-root .ixa-qx[hidden]{ display: none; }
#ix-root .ixa-filters{ display: flex; gap: 12px; flex: 0 1 auto; flex-wrap: wrap; }
#ix-root .ixa-pill{
  position: relative; display: flex; align-items: center; gap: 8px; height: 48px; padding: 0 40px 0 18px; min-width: 0;
  border: 1.5px solid color-mix(in srgb, var(--ix-t-main) 18%, transparent); border-radius: 999px; background: #fff;
}
#ix-root .ixa-pill[hidden]{ display: none; }
#ix-root .ixa-pill::after{
  content: ""; position: absolute; right: 18px; top: 50%; width: 7px; height: 7px; margin-top: -6px; pointer-events: none;
  border-right: 2px solid var(--ix-t-main); border-bottom: 2px solid var(--ix-t-main); transform: rotate(45deg);
}
#ix-root .ixa-pill:focus-within{ border-color: var(--ix-t-main); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ix-t-main) 10%, transparent); }
#ix-root .ixa-pl{ font: 600 11px/1 var(--ixs-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--ixa-mute, #7A7F7C); white-space: nowrap; }
#ix-root .ixa-pill select:focus-visible{ outline: 0; }   /* the pill shows focus */
#ix-root .ixa-pill select{
  position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font-size: 16px;
}
/* The select is invisible over the pill; the pill shows the choice. */
#ix-root .ixa-pill{ max-width: 340px; }
#ix-root .ixa-pill .ixa-pv{ font: 500 15px/1 var(--ixs-ui); color: var(--ixa-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* A dropdown with a choice made: distinct border, seen at a glance. */
#ix-root .ixa-pill.is-set{ border: 2px solid var(--ix-t-accent); padding-left: 17.5px; }
#ix-root .ixa-pill.is-set .ixa-pv{ color: var(--ix-t-main); font-weight: 600; }
#ix-root .ixa-ftog{ display: none; }

#ix-root .ixa-line{ display: flex; align-items: center; gap: 16px; margin: 18px 0 16px; min-height: 18px; }
#ix-root .ixa-count{ font: 600 12.5px/1 var(--ixs-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--ixa-mute, #7A7F7C); }
#ix-root .ixa-clear{
  font: 500 13.5px/1 var(--ixs-ui) !important; color: var(--ix-t-main) !important;
  text-decoration: underline; text-decoration-color: var(--ix-t-accent); text-underline-offset: 4px;
}
#ix-root .ixa-clear[hidden]{ display: none; }
#ix-root .ixa-clear:hover{ text-decoration-color: var(--ix-t-main); }

#ix-root .ixa-shome{ display: contents; }
#ix-root .ixa-fhome{ display: contents; }
#ix-root .ixa-icons{ display: none; }
#ix-root .ixa-ib{
  position: relative; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  border: 1.5px solid color-mix(in srgb, var(--ix-t-main) 18%, transparent); background: #fff; color: var(--ix-t-main); cursor: pointer; padding: 0;
}
#ix-root .ixa-ib svg{ width: 18px; height: 18px; }
#ix-root .ixa-ib .ixa-dot{ display: none; position: absolute; top: 1px; right: 1px; width: 10px; height: 10px; border-radius: 50%; background: var(--ix-t-accent); border: 2px solid #fff; }
/* v1.1.2: a set search or filter fills the icon solid, so the reminder cannot be missed */
#ix-root .ixa-ib.is-set{ border-color: var(--ix-t-accent); background: var(--ix-t-accent); color: var(--ix-t-main); }
#ix-root .ixa-ib.is-set .ixa-dot{ display: none; }
#ix-root .ixa-sheet .ixa-search, #ix-root .ixa-sheet .ixa-pill{ max-width: none; width: 100%; }
#ix-root .ixa-sheet .ixa-filters{ display: flex; flex-direction: column; gap: 10px; }
#ix-root .ixa-done{
  display: block; width: 100%; margin-top: 16px; height: 48px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--ix-t-main); color: var(--ixs-on, #fff); font: 600 14px/1 var(--ixs-ui); letter-spacing: .14em; text-transform: uppercase;
}
#ix-root .ixa-qx, #ix-root .ixa-clear, #ix-root .ixa-ftog{ border: 0; background: transparent; cursor: pointer; padding: 0; }
#ix-root .ixa-empty[hidden]{ display: none; }

/* ── Switcher (M6 A): one segmented bar on every screen ── */
#ix-root .ixa-switch {
  display: flex; width: max-content; max-width: 100%; margin: 0 auto 30px;
  border: 1.5px solid var(--ix-t-main); border-radius: 999px; overflow: hidden; background: var(--ixa-tile);
}
#ix-root .ixa-tab {
  flex: 0 0 210px; width: 210px; height: 44px; padding: 0 12px; margin: 0; border: 0; border-radius: 0;
  background: transparent; cursor: pointer;
  font: 600 13px/1 var(--ixa-ui); letter-spacing: .14em; text-transform: uppercase;
  color: var(--ix-t-main); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#ix-root .ixa-tab + .ixa-tab { border-left: 1.5px solid color-mix(in srgb, var(--ix-t-main) 18%, transparent); }
#ix-root .ixa-tab.is-on { background: var(--ix-t-main); color: var(--ixa-on); }
#ix-root .ixa-tab:focus-visible, #ix-root .ixa-moreb:focus-visible, #ix-root .ixa a:focus-visible { outline: 2px solid var(--ix-t-accent); outline-offset: 3px; }

#ix-root .ixa-pane[hidden] { display: none !important; }
#ix-root .ixa-empty { margin: 40px 0; text-align: center; font-size: 15px; color: var(--ixa-mute); }

#ix-root .ixa-moreb {
  display: block; width: 240px; height: 44px; margin: 28px auto 0; padding: 0;
  border: 1.5px solid var(--ix-t-main); border-radius: 999px; background: transparent; cursor: pointer;
  font: 600 12.5px/1 var(--ixa-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--ix-t-main);
}
#ix-root .ixa-moreb:hover { background: var(--ix-t-main); color: var(--ixa-on); }
#ix-root .ixa-moreb[hidden] { display: none; }

/* ── Newsletters (AR-1 B): issue cards, two across ── */
#ix-root .ixa-issues { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
#ix-root .ixa-issue {
  display: flex; flex-direction: column; min-width: 0;
  border-radius: 12px; overflow: hidden; background: var(--ixa-tile);
  border: 1px solid var(--ixa-line); text-decoration: none; color: inherit;
}
#ix-root .ixa-issue-top { display: block; text-decoration: none; color: inherit; }
#ix-root .ixa-issue-ph { position: relative; }
#ix-root .ixa-issue-img, #ix-root .ixa-issue-ph .ixa-noimg { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
#ix-root .ixa-noimg { background: color-mix(in srgb, var(--ix-t-main) 10%, var(--ix-t-paper, #F0EDE6)); }
/* The issue page's No. ring, sitting on the photo's lower edge. */
#ix-root .ixa-ring {
  position: absolute; left: 22px; bottom: -38px; width: 92px; height: 92px; border-radius: 50%;
  border: 3px solid var(--ix-t-accent); background: var(--ix-t-main); color: var(--ixa-on);
  box-shadow: 0 0 0 5px var(--ix-t-main), 0 0 0 6px var(--ix-t-accent);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
#ix-root .ixa-ring b { font: 600 12px/1 var(--ixa-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--ix-t-accent); }
#ix-root .ixa-ring strong { font: 700 34px/1 var(--ixa-ui); margin-top: 3px; }
#ix-root .ixa-issue-dt {
  min-height: 54px; display: flex; align-items: center; padding: 14px 22px 0 134px;
  font: 600 12px/1.3 var(--ixa-ui); letter-spacing: .14em; text-transform: uppercase;
  color: color-mix(in srgb, var(--ix-t-accent) 62%, var(--ixa-ink));
}
#ix-root .ixa-issue-bd { display: flex; flex-direction: column; flex: 1 1 auto; padding: 14px 24px 22px; }
#ix-root .ixa-fr {
  display: block; font: 600 11px/1.3 var(--ixa-ui); letter-spacing: .14em; text-transform: uppercase;
  color: color-mix(in srgb, var(--ix-t-accent) 62%, var(--ixa-ink));
}
/* The franchise line keeps its height when empty, so lead headlines in a row start level. */
#ix-root .ixa-issue-bd > .ixa-fr { min-height: 15px; margin-bottom: 6px; }
#ix-root .ixa-lead { margin: 0; font: 600 25px/1.2 var(--ixa-disp); color: var(--ix-t-main); }
#ix-root .ixa-more { list-style: none; margin: 16px 0 18px; padding: 0; border-top: 1px solid var(--ixa-line); }
#ix-root .ixa-more li { padding: 10px 0; border-bottom: 1px solid var(--ixa-line); }
#ix-root .ixa-more .ixa-fr { font-size: 10.5px; margin-bottom: 2px; }
#ix-root .ixa-mh { display: block; font: 500 16px/1.35 var(--ixa-ui); color: var(--ixa-ink); }
#ix-root .ixa-issue-ft { margin-top: auto; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
#ix-root .ixa-x { font: 500 13px/1.2 var(--ixa-ui); color: var(--ixa-mute); }
#ix-root .ixa-read {
  flex: 0 0 auto; font: 600 13px/1 var(--ixa-ui); letter-spacing: .12em; text-transform: uppercase;
  color: var(--ix-t-main); border-bottom: 2px solid var(--ix-t-accent); padding-bottom: 4px;
}
#ix-root .ixa-hl { color: inherit; text-decoration: none; }
#ix-root .ixa-row { display: block; text-decoration: none; color: inherit; }
#ix-root a.ixa-x { text-decoration: none; }
#ix-root a.ixa-read { text-decoration: none; }
#ix-root a.ixa-hl:hover { text-decoration: underline; text-decoration-color: var(--ix-t-accent); text-underline-offset: 5px; }
#ix-root a.ixa-row:hover .ixa-mh, #ix-root a.ixa-x:hover { text-decoration: underline; text-decoration-color: var(--ix-t-accent); text-underline-offset: 4px; }
#ix-root a.ixa-read:hover { border-bottom-color: var(--ix-t-main); }
#ix-root .ixa-issue a:focus-visible { outline: 2px solid var(--ix-t-accent); outline-offset: 3px; border-radius: 2px; }

/* ── Articles ── */
#ix-root .ixa-arts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
#ix-root .ixa-art {
  display: flex; flex-direction: column; border-radius: 12px; overflow: hidden;
  background: var(--ixa-tile); border: 1px solid var(--ixa-line); text-decoration: none; color: inherit;
}
#ix-root .ixa-art-img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
#ix-root .ixa-art .ixa-noimg { aspect-ratio: 3 / 2; }
#ix-root .ixa-art-bd { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px 18px; flex: 1 1 auto; }
/* The franchise line keeps its height when empty, so headlines in a row start on one line. */
#ix-root .ixa-art-bd > .ixa-fr { min-height: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#ix-root .ixa-art-h { margin: 0; font: 600 20px/1.25 var(--ixa-disp); color: var(--ix-t-main); }
#ix-root .ixa-art-m { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--ixa-line); font: 500 13px/1.3 var(--ixa-ui); color: var(--ixa-mute); }
#ix-root .ixa-art-m b { font-weight: 600; color: var(--ix-t-main); }
#ix-root .ixa-art:hover .ixa-art-h { text-decoration: underline; text-decoration-color: var(--ix-t-accent); text-underline-offset: 4px; }

/* ── Tablet ── */
@media (max-width: 991px){
  #ix-root .ixa-arts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
  #ix-root .ixa-issues { gap: 20px; }
  #ix-root .ixa-lead { font-size: 22px; }
}

/* ── Phone ── */
@media (max-width: 767px){
  #ix-root .ixa-switch { width: 100%; margin-bottom: 20px; }
  #ix-root .ixa-tab { flex: 1 1 0; width: auto; min-width: 0; padding: 0 4px; height: 42px; font-size: 12px; letter-spacing: .1em; }
  #ix-root .ixa-issues { grid-template-columns: 1fr; gap: 22px; }
  #ix-root .ixa-ring { width: 80px; height: 80px; bottom: -34px; left: 18px; }
  #ix-root .ixa-ring strong { font-size: 29px; }
  #ix-root .ixa-issue-dt { padding: 12px 18px 0 118px; min-height: 50px; }
  #ix-root .ixa-issue-bd { padding: 12px 18px 20px; }
  #ix-root .ixa-lead { font-size: 23px; }
  #ix-root .ixa-arts { grid-template-columns: 1fr; }
  #ix-root .ixa-moreb { width: 100%; }
}

@media (max-width: 767px){
  #ix-root .ixa-bar{ display: none; }                     /* v1.1.1: the box and pill live in the sheets */
  #ix-root .ixa-sheet .ixa-search, #ix-root .ixa-sheet .ixa-pill{ display: flex; }
  #ix-root .ixa-line{ margin: 0 0 14px; gap: 12px; }
  #ix-root .ixa-count{ flex: 1 1 auto; min-width: 0; }
  #ix-root .ixa-icons{ display: flex; gap: 8px; margin-left: auto; }
}

/* ── v1.1.4 · phone: search and filter open in place ── */
#ix-root .ixa-xrow{ display: none; }
@media (max-width: 767px){
  #ix-root .ixa-xrow.is-open{ display: block; margin: 0 0 18px; }
  #ix-root .ixa-xrow .ixa-search{ display: flex; max-width: none; width: 100%; }
  #ix-root .ixa-xrow .ixa-filters{ display: flex; flex-direction: row; flex-wrap: nowrap; gap: 10px; justify-content: flex-start; }
  #ix-root .ixa-xrow .ixa-pill{ display: flex; flex: 1 1 0; min-width: 0; max-width: none; }
  #ix-root .ixa-xrow .ixa-pill[hidden]{ display: none; }
  #ix-root .ixa-ib.is-open{ box-shadow: 0 0 0 2px var(--ix-t-accent); }
}