/* ix-shell-v1_0_11.css
   v1.0.11 (29 Oct 2026, Code-Built Site S7): no raw page while loading.
     1 · Until ix-shell starts (it adds .ixs-on to <html>), everything in
         <body> except #ix-root is hidden, so Webflow's own markup never
         flashes. A CSS-only fail-safe shows it after 6 seconds if the
         shell never starts (HC-P-CBS7-1, same 6s as the JS).
     2 · Article page while waiting (.ixs-paper--wait): the loading bar and
         grey lines show; the hosted words are hidden until ix-article has
         laid them out. Pairs with ix-shell-v1_0_12.js. Everything else as
         v1.0.10.
   v1.0.10 (29 Oct 2026, Code-Built Site S6): franchise treatment 3 (the
     mascot band, .ixs-band--mascot, drawn by ix-shell-v1_0_11.js): a 230px
     round badge straddling the plate rule (150px on phones), the wordmark
     76px tall (56 on phones) or the name in the display face, the standfirst
     19px in the display face; the band and badge take --ixs-band-bg when
     the franchise names a colour, text light on a dark one. The art band
     also takes --ixs-band-bg. Everything else as v1.0.9.
   v1.0.9 (28 Oct 2026, Code-Built Site S6): the franchise art band
     (.ixs-band--art, drawn by ix-shell-v1_0_10.js when a franchise has
     art): the title's paper colour in place of the Accent, the art 110px
     tall on desktop and 72px on phones, scaled whole (never cropped), a
     hairline under it; the franchise name is kept as a hidden h1 (.ixs-sr).
     Everything else as v1.0.8.
   v1.0.8 (28 Oct 2026, Code-Built Site S6): the article band on phones is
     one row, "Back to the issue" on the left and the date on the right, at
     the same height as before (54px). Jeff: no stack. Pairs with
     ix-shell-v1_0_9.js (or v1_0_8; the band markup is the same).
   v1.0.7 (28 Oct 2026): phone menu above hosted pages (nav z-index 900, menu and dim stacked); a hosted page clipped to the paper (.ixs-paper--host overflow hidden). Pairs with ix-shell-v1_0_7.js.
   v1.0.5 (28 Oct 2026, Code-Built Site S5): click feedback. A link that
     leaves the page (.ixs-going) shows a small Accent ring after its words
     (.ixs-ring) and the nav (.ixs-nav--busy) runs a thin Accent line along
     its top until the next page paints. Pairs with ix-shell-v1_0_5.js.
   -- v1.0.4 notes --
   v1.0.4 (28 Oct 2026, Code-Built Site S5): the plate band (Idea C).
     1 · The plate is two rows: logo and Accent dot rule on Main, then an
         Accent band (.ixs-band) across the full width, text in Main. Page
         name in capitals in the Page Header Font (--ixs-head: TITLES Page
         Header Font, else the UI font), short line under it.
     2 · Article band (.ixs-band--split): "Back to the issue" left, the date
         right, the same size and weight (.ixs-bt). Phones: two centred
         lines. The old article issue line (.ixs-iline) is gone.
     3 · The Back link (.ixs-back): drawn arrow and words in one inline
         flex row, centred on each other. Used by every Back link.
     Pairs with ix-shell-v1_0_3.js.
   v1.0.3 (28 Oct 2026, Code-Built Site S4): the Article page.
     1 · Reading column (.ixs-col--read): 760 wide on desktop (A2 A).
     2 · Article plate (.ixs-plate--line): logo, a full-width Accent dot
         rule, then the issue line: number and date on the left in the
         text-on-Main colour, the dot in Accent, "Back to the issue" in
         Accent on the right (A1 A). Phones: two centred lines (M3 A).
     3 · The article's paper (.ixs-paper--article) keeps the shell's paper
         colour and rounding; ix-article sets its padding and type.
     Pairs with ix-shell-v1_0_2.js. Archives, Home and Issue look the same
     as on v1.0.2.
   v1.0.2 (28 Oct 2026, Code-Built Site S3): the Issue page.
     1 · The shell's resets and its text settings (font, size, colour) now
         reach only the shell's own parts: nav, plate, paper, footer, modals.
         A page the shell hosts (.ixs-host: the issue, old or new layout)
         keeps its own styles. Before, rules like "#ix-root p{margin:0}"
         beat the issue's own class rules.
     2 · Issue page, new layout (.ixs-col--bare): no shell plate (the issue's
         own nameplate is the plate), no paper card; the issue sits in the
         column as it draws itself. Phones: edge to edge.
     3 · Issue page, old layout: the standard plate and paper; the old
         layout's own background colour on its outer wrapper is cleared.
   Paired then with ix-shell-v1_0_1.js.
   v1.0.1 (28 Oct 2026): page name on the plate in the title's UI font, capitals, 20px (16px on phones),
   not the display font. Jeff: it read too close to the logo.
   INBXIFY · Site shell · every public title page drawn in code.

   Ruled designs: Site shell review v0.1 (N1 A, N2 A, FT B, C1 A, C2 A,
   SI A, L1 A) and Page frame review v0.7 (one frame on every page).

   WHERE EVERY VALUE COMES FROM
     Colours: the title's TITLES design values, set on <html> by the script
       from the Worker's /site answer.
     Fonts: TITLES Display Font, Body Font, UI Font, set by the script as
       --ixs-display, --ixs-body, --ixs-ui (loaded from Google Fonts).
     Worked out here, not stored: nav colour (Main 35% toward black), page
       background (Main 10% into Paper), lines and muted text.
     Platform values (hardcoding, provisional): HC-P-CB-3 the 991px phone
       break, HC-P-CB-10 the layout sizes below (column 1120, plate,
       nav 56/52, modal 540), HC-P-CB-11 the text-on-Main colour #F4F0E4
       (same as Site Chrome's --ix-c-on) and the error red.

   SCOPE
     Every rule sits under #ix-root. Resets skip .ixs-host and everything
     inside it, so a hosted page is styled only by its own CSS.

   LOAD (page head)
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jbrady74/inbxify-site-code@main/ix-shell-v1_0_3.css">
*/

@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-paper     { syntax: '<color>'; inherits: true; initial-value: #F0EDE6; }

html:has(#ix-root){ background: color-mix(in srgb, var(--ix-t-paper) 90%, var(--ix-t-main)); }
html:has(#ix-root) body{ margin: 0 !important; padding: 0 !important; background: transparent !important; min-height: 100vh; }

#ix-root{
  --ixs-on: #F4F0E4;
  --ixs-deep: color-mix(in srgb, var(--ix-t-main), #000 35%);
  --ixs-foot: var(--ix-t-footer, var(--ixs-deep));
  --ixs-text-c: var(--ix-t-text, #333333);
  --ixs-page: color-mix(in srgb, var(--ix-t-paper) 90%, var(--ix-t-main));
  --ixs-line: color-mix(in srgb, var(--ix-t-main) 14%, transparent);
  --ixs-field: #E1DCD0;
  --ixs-mute: color-mix(in srgb, var(--ixs-text-c) 62%, transparent);
  --ixs-bad: #B5452A;
  --ixs-bad-ink: #9A3A22;
  --ixs-ui: 'Jost', 'Avenir Next', Avenir, 'Segoe UI', Arial, sans-serif;
  --ixs-display: Georgia, 'Times New Roman', serif;
  --ixs-body: Georgia, 'Times New Roman', serif;
  --ixs-head: var(--ixs-ui);   /* v1.0.4: set by the script (Page Header Font, else UI) */
  --ixs-col: 1120px;
  --ixs-r: 10px;
  display: flex !important;
  flex-direction: column;
  min-height: 100vh;
  width: 100%;
  margin: 0;
  padding: 0;
  background: var(--ixs-page);
}
/* v1.0.2: text settings on the shell's own parts only, never on a hosted page */
#ix-root .ixs-nav, #ix-root .ixs-plate, #ix-root .ixs-paper:not(.ixs-paper--host), #ix-root .ixs-foot, #ix-root .ixs-scrim{
  color: var(--ixs-text-c);
  font-family: var(--ixs-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
/* Resets: the shell's own parts only, never a hosted page (.ixs-host). Wrapped in :where() so each
   reset counts as "#ix-root" alone and every component rule below still wins (v1.0.2). */
#ix-root :where(:not(.ixs-host, .ixs-host *)), #ix-root :where(:not(.ixs-host, .ixs-host *))::before, #ix-root :where(:not(.ixs-host, .ixs-host *))::after{ box-sizing: border-box; }
#ix-root :where(h1, h2, h3, h4, h5, h6, p, ul, li):where(:not(.ixs-host *)){ margin: 0; padding: 0; letter-spacing: normal; }
#ix-root :where(a:not(.ixs-host *)){ color: inherit; text-decoration: none; }
#ix-root :where(button:not(.ixs-host *)){ font: inherit; color: inherit; margin: 0; cursor: pointer; -webkit-appearance: none; appearance: none; }
#ix-root :where(img:not(.ixs-host *)){ max-width: 100%; }
#ix-root :where([hidden]:not(.ixs-host *)){ display: none !important; }
#ix-root :where(:focus-visible:not(.ixs-host *)){ outline: 2px solid var(--ix-t-accent); outline-offset: 3px; }

/* ── Nav (N1 A): one centred row; current page in Accent ── */
#ix-root .ixs-nav{
  position: relative; z-index: 900; flex: 0 0 auto;   /* v1.0.7: above anything a hosted page stacks */
  height: 56px; background: var(--ixs-deep); border-bottom: 3px solid var(--ix-t-accent);
}
#ix-root .ixs-row{ height: 100%; display: flex; align-items: center; justify-content: center; gap: 56px; padding: 0 40px; }
#ix-root .ixs-it{
  display: inline-flex; align-items: center; height: 100%; padding: 0; border: 0; background: transparent;
  font: 600 14px/1 var(--ixs-ui); letter-spacing: .18em; text-transform: uppercase; color: #fff; white-space: nowrap;
}
#ix-root .ixs-it:hover{ color: var(--ix-t-accent); }
#ix-root .ixs-it.ixs-here{ color: var(--ix-t-accent); }
#ix-root .ixs-bar{ display: none; }

/* ── Click feedback (v1.0.5) ── */
#ix-root .ixs-nav--busy::before{
  content: ""; position: absolute; left: -40%; top: 0; width: 40%; height: 3px; border-radius: 999px;
  background: var(--ix-t-accent); animation: ixs-slide 1s ease-in-out infinite; pointer-events: none;
}
#ix-root .ixs-going{ opacity: .85; pointer-events: none; }
#ix-root .ixs-ring{
  display: inline-block; width: .85em; height: .85em; margin-left: .5em; vertical-align: -.08em; flex: 0 0 auto;
  border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; opacity: .9;
  animation: ixs-spin .7s linear infinite;
}
#ix-root .ixs-it .ixs-ring, #ix-root .ixs-mi .ixs-ring, #ix-root .ixs-pc-name .ixs-ring{ border-color: var(--ix-t-accent); border-right-color: transparent; }
@keyframes ixs-spin{ to{ transform: rotate(360deg); } }
#ix-root .ixs-menu, #ix-root .ixs-dim{ display: none; }

/* ── Column: plate on Main, paper below ── */
#ix-root .ixs-main{ flex: 1 0 auto; width: 100%; }
#ix-root .ixs-col{ width: min(var(--ixs-col), calc(100% - 40px)); margin: 44px auto 0; }
#ix-root .ixs-plate{
  background: var(--ix-t-main); color: var(--ixs-on); text-align: center;
  border-radius: var(--ixs-r) var(--ixs-r) 0 0; padding: 32px 40px 0; overflow: hidden;   /* v1.0.4: the band closes the plate */
}
#ix-root .ixs-logo{ display: inline-block; line-height: 0; min-height: 40px; }
#ix-root .ixs-logo img{ display: block; width: 100%; max-width: 420px; height: auto; margin: 0 auto; }
#ix-root .ixs-logo-t{ display: block; font: 600 40px/1.1 var(--ixs-display); color: var(--ixs-on); }
#ix-root .ixs-rule{
  width: 46%; height: 8px; margin: 24px auto 20px;
  background:
    radial-gradient(circle, var(--ix-t-accent) 3.5px, transparent 4px) left center / 8px 8px no-repeat,
    radial-gradient(circle, var(--ix-t-accent) 3.5px, transparent 4px) right center / 8px 8px no-repeat,
    linear-gradient(var(--ix-t-accent), var(--ix-t-accent)) center / calc(100% - 14px) 2px no-repeat;
}
/* v1.0.4 · the Accent band (Idea C) */
#ix-root .ixs-rule{ margin-bottom: 0; }
#ix-root .ixs-band{
  margin: 24px -40px 0; padding: 14px 24px 15px; min-height: 30px;
  background: var(--ix-t-accent); color: var(--ix-t-main);
}
#ix-root .ixs-name{ margin: 0; font: 600 24px/1.15 var(--ixs-head); letter-spacing: .12em; text-transform: uppercase; color: var(--ix-t-main); }
#ix-root .ixs-sub{
  min-height: 12px; margin-top: 6px; font: 600 11.5px/1.3 var(--ixs-head); letter-spacing: .24em;
  text-transform: uppercase; color: var(--ix-t-main); opacity: .85;
}
/* v1.0.9 · franchise art band */
#ix-root .ixs-band--art{ --ixs-band-bg: var(--ix-t-paper); padding: 22px 24px 20px; background: var(--ixs-band-bg); border-bottom: 1px solid color-mix(in srgb, var(--ix-t-main) 14%, transparent); line-height: 0; }
#ix-root .ixs-art{ display: block; height: 110px; width: auto; max-width: 100%; margin: 0 auto; object-fit: contain; }
/* v1.0.10 · treatment 3: the mascot band */
#ix-root .ixs-band--mascot{ position: relative; display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 34px; align-items: center; padding: 18px 40px 26px; text-align: left; line-height: normal; overflow: visible; }
#ix-root .ixs-mascot{ position: relative; z-index: 2; width: 230px; height: 230px; margin-top: -84px; padding: 14px; border-radius: 50%; background: var(--ixs-band-bg); border: 8px solid var(--ixs-band-bg); box-shadow: 0 8px 22px rgba(0,0,0,.18); object-fit: contain; object-position: center; }
#ix-root .ixs-mascot-t{ min-width: 0; }
#ix-root .ixs-wordmark{ display: block; height: 76px; width: auto; max-width: 100%; object-fit: contain; object-position: left center; }
#ix-root h1.ixs-name--mascot{ margin: 0 !important; font: 600 34px/1.1 var(--ixs-display) !important; color: var(--ix-t-main) !important; letter-spacing: normal !important; text-transform: none !important; }
#ix-root .ixs-stand{ margin: 12px 0 0; max-width: 640px; font: 400 19px/1.5 var(--ixs-display); color: var(--ixs-text-c, #333333); }
#ix-root .ixs-band--dark h1.ixs-name--mascot, #ix-root .ixs-band--dark .ixs-stand{ color: var(--ixs-on, #ffffff) !important; }
#ix-root .ixs-band--dark .ixs-stand{ opacity: .9; }
#ix-root .ixs-sr{ position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
#ix-root .ixs-band--split{ display: flex; align-items: center; justify-content: space-between; gap: 16px; text-align: left; padding: 15px 24px; }
#ix-root .ixs-band--one{ justify-content: center; }
#ix-root .ixs-bt{ font: 600 13px/1 var(--ixs-head); letter-spacing: .2em; text-transform: uppercase; color: var(--ix-t-main); white-space: nowrap; }
/* v1.0.4 · the Back link: drawn arrow centred on the words, any font */
#ix-root .ixs-back{ display: inline-flex; align-items: center; gap: .6em; color: inherit; text-decoration: none; }
#ix-root .ixs-back svg{ display: block; flex: none; width: 1.15em; height: 1em; }
#ix-root .ixs-back span{ display: block; }
#ix-root .ixs-band .ixs-back:hover span{ text-decoration: underline; text-underline-offset: .3em; text-decoration-thickness: 1px; }
#ix-root .ixs-paper{
  background: var(--ix-t-paper); border-radius: 0 0 var(--ixs-r) var(--ixs-r); padding: 30px 30px 40px; min-height: 320px;
}

/* ── Issue page (v1.0.2) ── */
#ix-root .ixs-paper--host{ min-height: 0; overflow: hidden; }   /* v1.0.7: a hosted page stays inside the card */
#ix-root .ixs-host{ max-width: 100%; }
#ix-root .ixs-host{ background-color: transparent !important; }
#ix-root .ixs-col.ixs-col--bare{ margin-top: 0; }
#ix-root .ixs-col--bare .ixs-plate{ display: none; }
#ix-root .ixs-col--bare .ixs-paper{ background: transparent; border-radius: 0; padding: 0; }

/* ── Article page (v1.0.3) · HC-P-CB-10: 760 reading column ── */
#ix-root .ixs-col.ixs-col--read{ width: min(760px, calc(100% - 40px)); }
#ix-root .ixs-paper.ixs-paper--article{ padding: 0; min-height: 0; }

/* ── Loading (L1 A) ── */
#ix-root .ixs-wait{ display: flex; flex-direction: column; align-items: center; padding: 30px 0 20px; }
#ix-root .ixs-wait-bar{
  position: relative; width: 220px; height: 4px; border-radius: 999px; overflow: hidden;
  background: color-mix(in srgb, var(--ix-t-main) 12%, transparent); margin: 30px 0 14px;
}
#ix-root .ixs-wait-bar::after{
  content: ""; position: absolute; top: 0; bottom: 0; width: 40%; border-radius: 999px;
  background: var(--ix-t-accent); animation: ixs-slide 1.1s ease-in-out infinite;
}
#ix-root .ixs-wait-t{ font: 600 12px/1 var(--ixs-ui); letter-spacing: .2em; text-transform: uppercase; color: var(--ix-t-main); }
#ix-root .ixs-sk{ height: 16px; border-radius: 6px; background: color-mix(in srgb, var(--ix-t-main) 8%, var(--ix-t-paper)); margin: 14px auto 0; }
@keyframes ixs-slide{ 0%{ left: -40%; } 100%{ left: 100%; } }
#ix-root .ixs-msg{ max-width: 560px; margin: 40px auto; text-align: center; font: 400 16px/1.6 var(--ixs-ui); color: var(--ixs-text-c); }
#ix-root .ixs-msg a{ color: var(--ix-t-main); border-bottom: 2px solid var(--ix-t-accent); }

/* ── Footer (FT B): publisher card ── */
#ix-root .ixs-foot{ flex: 0 0 auto; margin-top: 56px; background: var(--ixs-foot); border-top: 3px solid var(--ix-t-accent); color: #fff; padding: 40px 40px 24px; }
#ix-root .ixs-fgrid{ width: min(var(--ixs-col), 100%); margin: 0 auto; display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 40px; align-items: start; }
#ix-root .ixs-flogo{ display: inline-block; line-height: 0; }
#ix-root .ixs-flogo img{ display: block; width: 100%; max-width: 260px; height: auto; }
#ix-root .ixs-flogo .ixs-logo-t{ font-size: 28px; }
#ix-root .ixs-about{ margin-top: 14px; max-width: 360px; font: 400 14px/1.6 var(--ixs-body); color: rgba(255,255,255,.75); }
#ix-root .ixs-fh{ margin: 0 0 14px; font: 600 11.5px/1 var(--ixs-ui); letter-spacing: .22em; text-transform: uppercase; color: var(--ix-t-accent); }
#ix-root .ixs-flinks{ display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
#ix-root .ixs-flinks a, #ix-root .ixs-flinks button{ padding: 0; border: 0; background: transparent; font: 500 14px/1 var(--ixs-ui); letter-spacing: .06em; color: #fff; text-align: left; }
#ix-root .ixs-flinks a:hover, #ix-root .ixs-flinks button:hover{ color: var(--ix-t-accent); }
#ix-root .ixs-pc{ display: flex; gap: 14px; align-items: center; }
#ix-root .ixs-av{ flex: 0 0 56px; width: 56px; height: 56px; border-radius: 50%; border: 2px solid var(--ix-t-accent); object-fit: cover; background: rgba(255,255,255,.12); }
#ix-root .ixs-pn{ font: 600 16px/1.3 var(--ixs-ui); color: #fff; }
#ix-root .ixs-pr{ font: 400 13px/1.5 var(--ixs-ui); color: rgba(255,255,255,.72); }
#ix-root .ixs-pr a:hover{ color: var(--ix-t-accent); }
#ix-root .ixs-cta{
  display: inline-flex; align-items: center; justify-content: center; width: 220px; height: 40px; margin-top: 16px;
  border: 0; border-radius: 999px; background: var(--ix-t-accent); color: var(--ix-t-main);
  font: 600 12.5px/1 var(--ixs-ui); letter-spacing: .14em; text-transform: uppercase;
}
#ix-root .ixs-cta:hover{ background: #fff; }
#ix-root .ixs-base{
  width: min(var(--ixs-col), 100%); margin: 30px auto 0; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.14);
  display: flex; justify-content: space-between; gap: 16px; font: 400 12.5px/1.3 var(--ixs-ui); color: rgba(255,255,255,.6);
}
#ix-root .ixs-base a:hover{ color: #fff; }

/* ── Modals (C1 A, C2 A, SI A) ── */
#ix-root .ixs-scrim{
  position: fixed; inset: 0; z-index: 99999; background: rgba(10,20,20,.55);
  display: flex; align-items: flex-start; justify-content: center; padding: 90px 16px 40px; overflow-y: auto;
}
#ix-root .ixs-modal{
  width: 540px; max-width: 100%; background: var(--ix-t-paper); border-radius: 12px; overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,.35); color: var(--ixs-text-c); font-family: var(--ixs-ui);
}
#ix-root .ixs-mh{ position: relative; background: var(--ix-t-main); color: #fff; padding: 22px 76px 20px 28px; }
#ix-root .ixs-mt{ font: 600 26px/1.15 var(--ixs-display); color: #fff; }
#ix-root .ixs-ms{ margin-top: 6px; font: 600 11.5px/1.2 var(--ixs-ui); letter-spacing: .22em; text-transform: uppercase; color: var(--ix-t-accent); }
#ix-root .ixs-x{
  position: absolute; right: 20px; top: 20px; width: 34px; height: 34px; padding: 0; border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.5); background: transparent; color: #fff; font: 400 20px/1 var(--ixs-ui);
  display: flex; align-items: center; justify-content: center;
}
#ix-root .ixs-x:hover{ border-color: #fff; }
#ix-root .ixs-mb{ padding: 22px 28px 26px; }
#ix-root .ixs-strip{ display: flex; gap: 14px; align-items: center; padding: 12px 14px; border: 1px solid var(--ixs-field); border-radius: 10px; background: #fff; margin-bottom: 18px; }
#ix-root .ixs-strip .ixs-av{ flex-basis: 46px; width: 46px; height: 46px; }
#ix-root .ixs-strip b{ display: block; font: 600 15px/1.2 var(--ixs-ui); color: var(--ix-t-main); }
#ix-root .ixs-strip span{ display: block; font: 400 13px/1.4 var(--ixs-ui); color: #6D7470; }
#ix-root .ixs-two{ display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
#ix-root .ixs-fl{ display: block; margin: 0 0 6px; font: 600 11px/1 var(--ixs-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--ix-t-main); }
#ix-root .ixs-f{ margin-bottom: 14px; }
#ix-root .ixs-in{
  display: block; width: 100%; height: 44px; margin: 0; padding: 0 14px; border: 1.5px solid var(--ixs-field); border-radius: 8px;
  background: #fff; font: 400 15px/1.2 var(--ixs-ui); color: var(--ixs-text-c); box-shadow: none; outline: none;
}
#ix-root textarea.ixs-in{ height: 96px; padding: 12px 14px; resize: vertical; line-height: 1.45; }
#ix-root .ixs-in:focus{ border-color: var(--ix-t-main); }
#ix-root .ixs-in.ixs-err{ border-color: var(--ixs-bad); }
#ix-root .ixs-ferr{ display: block; min-height: 0; margin-top: 5px; font: 500 12.5px/1.3 var(--ixs-ui); color: var(--ixs-bad-ink); }
#ix-root .ixs-pw{ position: relative; }
#ix-root .ixs-pw .ixs-in{ padding-right: 52px; }
#ix-root .ixs-eye{
  position: absolute; right: 6px; top: 6px; width: 40px; height: 32px; padding: 0; border: 0; border-radius: 6px;
  background: transparent; color: var(--ix-t-main); display: flex; align-items: center; justify-content: center;
}
#ix-root .ixs-eye svg{ width: 20px; height: 20px; }
#ix-root .ixs-chips{ display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px; }
#ix-root .ixs-chip{
  height: 36px; padding: 0 10px; border: 1.5px solid var(--ixs-field); border-radius: 999px; background: #fff;
  font: 500 13px/1 var(--ixs-ui); color: var(--ix-t-main); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#ix-root .ixs-chip[aria-checked="true"]{ background: var(--ix-t-main); border-color: var(--ix-t-main); color: #fff; }
#ix-root .ixs-hp{ position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
#ix-root .ixs-ts{ min-height: 0; margin: 2px 0 14px; display: flex; justify-content: center; }
#ix-root .ixs-go{
  position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; width: 100%; height: 48px;
  padding: 0; border: 0; border-radius: 999px; background: var(--ix-t-main); color: #fff;
  font: 600 13.5px/1 var(--ixs-ui); letter-spacing: .16em; text-transform: uppercase;
}
#ix-root .ixs-go:hover{ background: var(--ixs-deep); }
#ix-root .ixs-go[disabled]{ cursor: progress; }
#ix-root .ixs-go.ixs-busy::after{
  content: ""; position: absolute; left: -40%; bottom: 0; width: 40%; height: 4px; border-radius: 999px;
  background: var(--ix-t-accent); animation: ixs-slide 1s ease-in-out infinite;
}
#ix-root .ixs-dots i{ display: inline-block; width: 5px; height: 5px; margin-left: 4px; border-radius: 50%; background: currentColor; animation: ixs-bob .9s ease-in-out infinite; }
#ix-root .ixs-dots i:nth-child(2){ animation-delay: .15s; }
#ix-root .ixs-dots i:nth-child(3){ animation-delay: .3s; }
@keyframes ixs-bob{ 0%, 100%{ transform: translateY(0); opacity: .5; } 50%{ transform: translateY(-4px); opacity: 1; } }
#ix-root .ixs-fine{ margin-top: 12px; text-align: center; font: 400 12.5px/1.4 var(--ixs-ui); color: #7A7F7C; }
#ix-root .ixs-fine button{ padding: 0; border: 0; background: transparent; color: var(--ix-t-main); text-decoration: underline; font: inherit; }
#ix-root .ixs-note{ margin: 0 0 16px; padding: 14px 16px; border-radius: 10px; background: #fff; border-left: 5px solid var(--ixs-bad); }
#ix-root .ixs-note b{ display: block; font: 600 19px/1.2 var(--ixs-display); color: var(--ixs-bad-ink); }
#ix-root .ixs-note p{ margin-top: 6px; font: 400 14px/1.5 var(--ixs-ui); color: var(--ixs-text-c); }
#ix-root .ixs-note a{ color: var(--ix-t-main); text-decoration: underline; }
#ix-root .ixs-done{ padding: 6px 0 4px; }
#ix-root .ixs-done b{ display: block; font: 600 24px/1.2 var(--ixs-display); color: var(--ix-t-main); }
#ix-root .ixs-done p{ margin-top: 10px; font: 400 15px/1.55 var(--ixs-ui); color: var(--ixs-text-c); }
html.ixs-lock, html.ixs-lock body{ overflow: hidden !important; }

/* ── Phone and tablet (991px and narrower) · HC-P-CB-3 ── */
@media (max-width: 991px){
  #ix-root .ixs-nav{ position: sticky; top: 0; height: 52px; border-bottom-width: 2px; }
  #ix-root .ixs-row{ display: none; }
  #ix-root .ixs-bar{ display: flex; height: 100%; align-items: center; justify-content: space-between; gap: 16px; padding: 0 18px; }
  #ix-root .ixs-mbtn{
    display: inline-flex; align-items: center; gap: 10px; height: 100%; padding: 0; border: 0; background: transparent;
    font: 600 13px/1 var(--ixs-ui); letter-spacing: .18em; text-transform: uppercase; color: #fff;
  }
  #ix-root .ixs-mbtn svg{ width: 20px; height: 20px; }
  #ix-root .ixs-pc-name{ font: 600 12px/1 var(--ixs-ui); letter-spacing: .18em; text-transform: uppercase; color: var(--ix-t-accent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #ix-root .ixs-nav.ixs-open .ixs-menu{ display: block; position: absolute; left: 0; right: 0; top: 100%; z-index: 2; background: var(--ixs-deep); border-bottom: 3px solid var(--ix-t-accent); box-shadow: 0 14px 30px rgba(0,0,0,.35); }
  #ix-root .ixs-nav.ixs-open .ixs-dim{ display: block; position: fixed; left: 0; right: 0; bottom: 0; top: 52px; z-index: 1; background: rgba(10,20,20,.45); }
  #ix-root .ixs-mi{
    display: flex; align-items: center; width: 100%; height: 56px; padding: 0 22px; border: 0; border-top: 1px solid rgba(255,255,255,.1);
    background: transparent; font: 600 14px/1 var(--ixs-ui); letter-spacing: .18em; text-transform: uppercase; color: #fff; text-align: left;
  }
  #ix-root .ixs-mi.ixs-here{ color: var(--ix-t-accent); }
  #ix-root .ixs-mi.ixs-here::before{ content: ""; flex: 0 0 6px; width: 6px; height: 6px; border-radius: 50%; background: var(--ix-t-accent); margin-right: 12px; }
  #ix-root .ixs-col{ width: auto; margin: 14px 10px 0; }
  #ix-root .ixs-col.ixs-col--bare{ margin: 0; }
  #ix-root .ixs-plate{ padding: 24px 16px 0; }
  #ix-root .ixs-logo img{ max-width: 260px; }
  #ix-root .ixs-logo-t{ font-size: 29px; }
  #ix-root .ixs-rule{ width: 72%; margin: 16px auto 0; }
  #ix-root .ixs-band{ margin: 16px -16px 0; padding: 10px 14px 11px; }
  #ix-root .ixs-name{ font-size: 18px; letter-spacing: .1em; }
  #ix-root .ixs-sub{ font-size: 9.5px; letter-spacing: .2em; line-height: 1.4; }
  #ix-root .ixs-band--split{ flex-direction: row; justify-content: space-between; gap: 12px; padding: 0 14px; min-height: 54px; box-sizing: border-box; }   /* v1.0.8: one row, same height */
  #ix-root .ixs-band--one{ justify-content: center; }
  #ix-root .ixs-band--art{ padding: 14px 14px 13px; }   /* v1.0.9 */
  #ix-root .ixs-art{ height: 72px; }
  #ix-root .ixs-band--mascot{ grid-template-columns: 1fr; gap: 10px; padding: 0 18px 20px; text-align: center; justify-items: center; }   /* v1.0.10 */
  #ix-root .ixs-mascot{ width: 150px; height: 150px; margin-top: -60px; padding: 10px; border-width: 6px; }
  #ix-root .ixs-wordmark{ height: 56px; object-position: center; margin: 0 auto; }
  #ix-root h1.ixs-name--mascot{ font-size: 26px !important; }
  #ix-root .ixs-stand{ font-size: 16px; margin-top: 8px; }
  #ix-root .ixs-bt{ font-size: 10.5px; letter-spacing: .12em; }
  #ix-root .ixs-paper{ padding: 14px 12px 22px; }
  #ix-root .ixs-col.ixs-col--read{ width: auto; }
  #ix-root .ixs-paper.ixs-paper--article{ padding: 0; }
  #ix-root .ixs-foot{ padding: 28px 20px 20px; }
  #ix-root .ixs-fgrid{ grid-template-columns: 1fr; gap: 26px; }
  #ix-root .ixs-base{ flex-direction: column; gap: 8px; }
  #ix-root .ixs-scrim{ padding: 0; align-items: flex-end; }
  #ix-root .ixs-modal{ width: 100%; max-height: 96vh; overflow-y: auto; border-radius: 16px 16px 0 0; }
  #ix-root .ixs-mh{ padding: 18px 68px 16px 20px; }
  #ix-root .ixs-mt{ font-size: 22px; }
  #ix-root .ixs-x{ right: 16px; top: 15px; }
  #ix-root .ixs-mb{ padding: 16px 18px calc(20px + env(safe-area-inset-bottom, 0px)); }
  #ix-root .ixs-two{ grid-template-columns: 1fr; gap: 0; }
  #ix-root .ixs-chip{ font-size: 12px; }
}

@media (prefers-reduced-motion: reduce){
  #ix-root .ixs-wait-bar::after, #ix-root .ixs-go.ixs-busy::after{ animation: none; left: 30%; }
  #ix-root .ixs-dots i{ animation: none; opacity: 1; }
  #ix-root .ixs-nav--busy::before{ animation: none; left: 30%; }
  #ix-root .ixs-ring{ animation: none; border-right-color: currentColor; opacity: .5; }
}

/* ── v1.0.11 · no raw page while loading (HC-P-CBS7-1: 6s fail-safe) ── */
html:not(.ixs-on) body > :not(#ix-root){ visibility: hidden; animation: ixs-reveal 0s linear 6s forwards; }
@keyframes ixs-reveal{ to{ visibility: visible; } }
#ix-root .ixs-paper.ixs-paper--wait{ min-height: 320px; }
#ix-root .ixs-paper--wait > .ixs-host{ visibility: hidden; height: 0; overflow: hidden; }
#ix-root .ixs-wait--article{ padding: 30px 30px 20px; }