/* IZON unified reading palette. 13 October 2026.
   Neutral roles from the 29 September review. Keep existing step geometry.
   Load after Bricks and interaction styles so both themes share one role set. */
html:root {
  --bg:#F1F0EB; --surface:#FFFFFF; --raised:#E5E3DD; --feedIdle:var(--surface);
  --ink:#121212; --ink2:#3D3D3B; --meta:#605F59; --mute:var(--meta);
  --vtext:#5700E6; --vmeta:var(--vtext); --line:#D4D2C9; --rule:var(--line);
  --control:#7D7D74; --adLabel:var(--meta);
  --violet:#5700E6; --violetBlue:#512EFF; --onVioletMeta:#E8DEFF;
  --footerBg:#181817; --footerSurface:#232321; --footerInk:#F1F0EB;
  --footerLink:#CFCCC3; --footerMeta:#BDBBB4;
  --footerGlass:rgba(24,24,23,.92);
  --placeholderDark:#232321; --placeholderLight:#E5E3DD;
  --overlay58:rgba(24,24,23,.58); --overlay72:rgba(24,24,23,.72);
  --readingBg:var(--bg); --readingInk:var(--ink2); --readingHeading:var(--ink);
}
html:root[data-izon-theme="dark"] {
  --bg:#181817; --surface:#232321; --raised:#2B2B28; --feedIdle:var(--raised);
  --ink:#F1F0EB; --ink2:#CFCCC3; --meta:#BDBBB4; --mute:var(--meta);
  --vtext:#B49AFF; --vmeta:var(--vtext); --line:#3C3B36; --rule:var(--line);
  --control:#77776E;
}
/* Retire the article-only palette exception in favour of shared roles. */
html:root body.single-post {
  --readingBg:var(--bg); --readingInk:var(--ink2); --readingHeading:var(--ink);
}
html:root body.single-post .izon-article-body { color:var(--readingInk); }
html:root body.single-post .izon-article-body :is(p,li) { color:var(--readingInk); }
html:root body.single-post .izon-article-body :is(h1,h2,h3,h4,h5,h6,strong,b) {color:var(--readingHeading);}
/* Fixed dark footer has its own complete pairing, including form controls. */
html:root #brx-footer {
  --bg:var(--footerBg); --surface:var(--footerSurface); --ink:var(--footerInk);
  --ink2:var(--footerLink); --meta:var(--footerMeta); --mute:var(--footerMeta);
  --line:#3C3B36; --control:#77776E; --vtext:#B49AFF;
  background:var(--footerBg); color:var(--footerInk); color-scheme:dark;
}
html:root #brx-footer .izon-footer-shell {background:var(--footerBg);}
html:root #brx-footer .izon-footer-panel {background:var(--footerSurface);backdrop-filter:none;}
/* Essential field edges use the control role, not decorative separators. */
html:root :is(.izon-account__input,.izon-nl__input,.izon-signin__input,.izon-search-page__input),
html:root .frm-fluent-form .ff-el-form-control,
html:root #brx-footer .izon-footer-form input.izon-footer-input,
html:root .izon-comments #wpdcom :is(input[type="text"],input[type="email"],input[type="url"],select) {
  box-shadow:inset 0 0 0 1px var(--control);
}
html:root :is(.izon-account__input,.izon-nl__input,.izon-signin__input,.izon-search-page__input):focus,
html:root .frm-fluent-form .ff-el-form-control:focus,
html:root #brx-footer .izon-footer-form input.izon-footer-input:focus,
html:root .izon-comments #wpdcom :is(input[type="text"],input[type="email"],input[type="url"],select):focus {
  box-shadow:inset 0 0 0 2px var(--vtext);
}
/* Explicit pale violet supporting copy remains readable on brand fields. */
html:root :is(.izbg-purple,.izon-hero,.izon-hero-grid,.izon-category-hero,.iz-artpanel) .izon-tag--muted,
html:root :is(.izbg-purple,.izon-hero,.izon-hero-grid,.izon-category-hero,.iz-artpanel) .izon-tag--muted a { color:var(--onVioletMeta)!important; }
/* Social links must keep the fixed footer pairing in the light page theme. */
html:root #brx-footer .izon-footer-social-icon a {color:var(--footerLink);}
html:root #brx-footer .izon-footer-social-icon a:hover,
html:root #brx-footer .izon-footer-social-icon a:focus-visible {color:var(--white);}
html:root #brx-footer .izon-footer-legal-bar {box-shadow:inset 0 1px 0 0 var(--line);}
/* 17 October: category hero labels sit over a photograph in either theme.
   Keep their foreground pairing independent of neutral page colours. */
html:root .izon-category-hero .izon-story__tags .izon-tag,
html:root .izon-category-hero .izon-story__tags .izon-tag a,
html:root .izon-category-hero .izon-category-hero__meta,
html:root .izon-category-hero .iz-bm {color:var(--white)!important;}
html:root .izon-category-hero .izon-category-hero__excerpt {color:var(--white90)!important;}
/* An unassigned content type renders an empty span. Its pseudo element must
   not draw a trailing divider. Retain dividers between populated labels. */
html:root .izon-story__tags > .izon-tag:empty {display:none!important;}
/* On phones the existing layout moves the copy below the photograph. */
@media (max-width:620px) {
 html:root .izon-category-hero .izon-story__tags .izon-tag,
 html:root .izon-category-hero .izon-story__tags .izon-tag a {color:var(--vtext)!important;}
 html:root .izon-category-hero .izon-category-hero__meta,
 html:root .izon-category-hero .iz-bm {color:var(--meta)!important;}
 html:root .izon-category-hero .izon-category-hero__excerpt {color:var(--ink2)!important;}
}
/* Shared category CTA, supplied Why IZON design, 17 October 2026.
   Specificity matches the paired selectors emitted by Bricks. */
html:root .izon-why__mark {transform:translateY(-50%);pointer-events:none;user-select:none;object-fit:contain;width:66%;height:auto;right:-30%;aspect-ratio:560 / 590;opacity:.3;}
html:root .izon-why__join,html:root .izon-why__report {clip-path:var(--flick);white-space:nowrap;}
html:root .izon-why__report::before {content:"";position:absolute;inset:1.5px;background:var(--violet);clip-path:var(--flick);}
html:root .izon-why__report span {position:relative;z-index:1;}
html:root .izon-why__join:hover {background:var(--onVioletMeta);color:var(--violet);}
html:root .izon-why__report:hover::before {background:var(--violetBlue);}
html:root .izon-why :is(.izon-why__join,.izon-why__report):focus-visible {outline:2px solid var(--white);outline-offset:4px;clip-path:none;}
@media(max-width:1080px){html:root .izon-why{padding:40px;gap:32px;}html:root .izon-why__copy{max-width:55%;}html:root .izon-why__title{font-size:36px;}html:root .izon-why__description{font-size:17px;}}
@media(max-width:767px){html:root .izon-why{flex-direction:column;align-items:flex-start;min-height:0;padding:36px 28px;}html:root .izon-why__copy{max-width:100%;}html:root .izon-why__title{font-size:34px;}html:root .izon-why__mark{right:-40%;width:400px;height:422px;opacity:.12;}html:root .izon-why__actions{flex-wrap:wrap;gap:12px;}html:root .izon-why__join,html:root .izon-why__report{padding:12px 18px;}}
@media(max-width:400px){html:root .izon-why{padding:32px 24px;}html:root .izon-why__actions{width:100%;}html:root .izon-why__join,html:root .izon-why__report{font-size:10px;padding:12px 14px;}}
/* Footer socials: centred marks, full tile links and a continuous step outline. */
html:root #brx-footer .izon-footer-social-tile {width:46px;height:46px;flex:0 0 46px;background:var(--control);box-shadow:none;clip-path:var(--flickSm);}
html:root #brx-footer .izon-footer-social-tile::before {content:"";position:absolute;inset:1px;background:var(--footerSurface);clip-path:var(--flickSm);pointer-events:none;}
html:root #brx-footer .izon-footer-social-icon {position:absolute;inset:0;display:block;line-height:0;}
html:root #brx-footer .izon-footer-social-icon a {position:relative;display:flex;width:100%;height:100%;align-items:center;justify-content:center;color:var(--footerLink);}
html:root #brx-footer .izon-footer-social-icon svg {display:block;width:22px;height:22px;flex:none;}
html:root #brx-footer .izon-footer-social-icon a:hover {color:var(--white);background:var(--violet);clip-path:var(--flickSm);}
html:root #brx-footer .izon-footer-social-tile:focus-within {background:var(--white);clip-path:none;}
html:root #brx-footer .izon-footer-social-icon a:focus-visible {outline:2px solid var(--white);outline-offset:-3px;color:var(--white);}
/* Category follow control: hollow outline, with no painted inner surface. */
html:root .izon-category__header .izon-outline-button {
 position:relative;background:transparent!important;color:var(--vtext);
}
html:root .izon-category__header .izon-outline-button.on {color:var(--meta);}
html:root .izon-category__header .izon-outline-button::before {
 content:"";position:absolute;inset:0;pointer-events:none;background:currentColor;
 clip-path:polygon(0 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 0,2px 2px,2px calc(100% - 2px),calc(100% - 10px) calc(100% - 2px),calc(100% - 10px) calc(100% - 10px),calc(100% - 2px) calc(100% - 10px),calc(100% - 2px) 2px,2px 2px);
}
html:root .izon-category__header .izon-outline-button > .izon-outline-button__in {
 background:transparent!important;color:inherit!important;position:relative;
}
html:root .izon-category__header .izon-outline-button:focus-within {outline:2px solid var(--vtext);outline-offset:4px;}
/* wpDiscuz emits its dark class in both site themes. Use the publication's
   paired colours instead of the plugin's fixed black background. */
html:root .izon-comments #wpdcom {background:var(--surface)!important;color:var(--ink2)!important;}
html:root .izon-comments #wpdcom :is(.wpd-form-wrap,.wpd-form-head,.wpd-thread-wrapper,.wpd-thread-list,.wpdiscuz-subscribe-bar) {background:transparent;color:var(--ink2);}
html:root .izon-comments #wpdcom :is(.wpd-thread-head,.wpd-form-head) {border-color:var(--line)!important;}
html:root .izon-comments #wpdcom :is(.wpd-thread-info,.wpd-sbs-toggle,.wpd-auth,.wpd-login,.wpd-thread-filter,.wpdiscuz-subscribe-form-intro,.wpdiscuz-sort-button) {color:var(--meta)!important;border-color:var(--line)!important;}
html:root .izon-comments #wpdcom .wpd-login-to-comment {color:var(--ink2)!important;}
html:root .izon-comments #wpdcom .wpd-login a {color:var(--vtext)!important;}
html:root .izon-comments #wpdcom :is(.wpdiscuz-sort-buttons,.wpd-comment-wrap,.wpd-comment-text) {background:var(--surface);color:var(--ink2);}
html:root .izon-comments #wpdcom :is(.ql-container,.ql-toolbar,.ql-editor,textarea,input[type="text"],input[type="email"],input[type="url"],select) {background:var(--bg);color:var(--ink);border-color:var(--control);}
html:root .izon-comments #wpdcom .ql-editor.ql-blank::before {color:var(--meta);}
html:root .izon-comments #wpdcom .ql-toolbar .ql-stroke {stroke:var(--ink2);}
html:root .izon-comments #wpdcom .ql-toolbar .ql-fill {fill:var(--ink2);}
html:root .izon-comments #wpdcom select {background:var(--bg)!important;color:var(--ink)!important;border-color:var(--control)!important;}

/* Shared menu social icons: consistent glyphs and accessible targets. */
html:root .izon-menu-socials {display:flex;gap:10px;align-items:center;}
html:root .izon-menu-social-link {position:relative;display:flex!important;align-items:center;justify-content:center;width:46px;height:46px;min-width:46px;padding:0!important;font-size:0!important;line-height:1;color:var(--ink2)!important;background:transparent!important;border:1px solid var(--control);}
html:root .izon-menu-social-link::before,html:root .izon-menu-social-link::after {display:none!important;}
html:root .izon-menu-social-link svg {display:block;width:22px!important;height:22px!important;flex:none;}
html:root .izon-menu-social-link:hover {color:var(--vtext)!important;border-color:var(--vtext);}
html:root .izon-menu-social-link:focus-visible {outline:2px solid var(--vtext);outline-offset:3px;}
html:root .izon-menu-social-link {border:0;}
html:root .izon-menu-social-link::before {display:block!important;content:"";position:absolute;inset:0;background:var(--control);pointer-events:none;clip-path:polygon(0 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 0,1px 1px,1px calc(100% - 1px),calc(100% - 7px) calc(100% - 1px),calc(100% - 7px) calc(100% - 7px),calc(100% - 1px) calc(100% - 7px),calc(100% - 1px) 1px,1px 1px);}
html:root .izon-menu-social-link:hover::before {background:var(--vtext);}

/* Author box social icons, matching the menu and footer. */
html:root #brxe-qal0g8 {display:flex;gap:10px;align-items:center;}
html:root #brxe-qal0g8 .share-btn {position:relative;display:flex!important;align-items:center;justify-content:center;width:46px;height:46px;min-width:46px;padding:0!important;font-size:0!important;line-height:1;color:var(--ink2)!important;background:transparent!important;border:1px solid var(--control);}
html:root #brxe-qal0g8 .share-btn::before,html:root #brxe-qal0g8 .share-btn::after {display:none!important;}
html:root #brxe-qal0g8 .share-btn svg {display:block;width:22px!important;height:22px!important;flex:none;}
html:root #brxe-qal0g8 .share-btn:hover {color:var(--vtext)!important;border-color:var(--vtext);}
html:root #brxe-qal0g8 .share-btn:focus-visible {outline:2px solid var(--vtext);outline-offset:3px;}
html:root #brxe-qal0g8 .share-btn {border:0;}
html:root #brxe-qal0g8 .share-btn::before {display:block!important;content:"";position:absolute;inset:0;background:var(--control);pointer-events:none;clip-path:polygon(0 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 0,1px 1px,1px calc(100% - 1px),calc(100% - 7px) calc(100% - 1px),calc(100% - 7px) calc(100% - 7px),calc(100% - 1px) calc(100% - 7px),calc(100% - 1px) 1px,1px 1px);}
html:root #brxe-qal0g8 .share-btn:hover::before {background:var(--vtext);}

html:root #brxe-qal0g8 .share-btn {box-shadow:none!important;flex:0 0 46px;}
html:root #brxe-qal0g8 .share-btn {width:46px!important;height:46px!important;min-height:46px!important;}

/* The homepage feature becomes a normal story card on phones. */
@media (max-width:620px) {
 html:root body.home #brx-content section.brxe-vjse9g {height:auto!important;min-height:0!important;gap:0!important;background:var(--bg)!important;}
 html:root body.home #brx-content section.brxe-vjse9g > .brxe-v0hsmj {position:static!important;display:block!important;width:100%!important;height:auto!important;min-height:0!important;aspect-ratio:16/10;object-fit:cover;filter:none!important;}
 html:root body.home #brx-content section.brxe-vjse9g > .brxe-x5u2p7 {display:none!important;}
 html:root body.home #brx-content section.brxe-vjse9g > .brxe-y9qzxu {position:static!important;inset:auto!important;background:var(--bg)!important;}
 html:root body.home #brx-content section.brxe-vjse9g .brxe-cdtpxj {padding:16px 16px 24px!important;}
 html:root body.home #brx-content section.brxe-vjse9g .brxe-0j179b {max-width:none!important;color:var(--ink)!important;}
 html:root body.home #brx-content section.brxe-vjse9g .brxe-k9tlzh {margin-top:8px!important;font-size:24px!important;line-height:1.15!important;color:var(--ink)!important;}
 html:root body.home #brx-content section.brxe-vjse9g .brxe-d7u1qy {color:var(--meta)!important;font-size:16px!important;line-height:1.5!important;}
 html:root body.home #brx-content section.brxe-vjse9g .brxe-5gat6o,
 html:root body.home #brx-content section.brxe-vjse9g .brxe-u8pbnw {color:var(--meta)!important;}
 html:root body.home #brx-content section.brxe-vjse9g .brxe-lo6g3n {flex-wrap:wrap;gap:16px!important;}
}

/* Mobile hero stories: photograph above the full-width copy. */
@media (max-width:620px) {
 html:root .izon-story--secondary {flex-direction:column!important;gap:16px!important;align-items:stretch;}
 html:root .izon-story__image--secondary {
  flex:none!important;width:100%!important;height:auto!important;
  aspect-ratio:16/10;object-fit:cover;align-self:stretch!important;
 }
 html:root .izon-story__body--secondary {width:100%;}
 html:root .izon-story--secondary .izon-story__tags,
 html:root .izon-story--secondary .izon-tag {align-items:flex-start!important;}
 html:root .izon-story--secondary .izon-tag a {align-items:flex-start;padding-top:0!important;}
}

/* Single post heroes have a straight lower edge on phones. */
@media (max-width:620px) {
 html:root body.single-post .iz-artpanel {clip-path:none!important;}
}

/* Category lead stories use the archive card treatment on phones. */
@media (max-width:620px) {
 html:root body.category .izon-category-hero {border-bottom:1px solid var(--line);}
 html:root body.category .izon-category-hero__image {display:block;}
 html:root body.category .izon-category-hero .izon-tag--accent,
 html:root body.category .izon-category-hero .izon-tag--accent a {color:var(--accText)!important;}
 html:root body.category .izon-category-hero .izon-tag--muted,
 html:root body.category .izon-category-hero .izon-tag--muted a {color:var(--meta)!important;}
 html:root[data-izon-theme="dark"] body.category .izon-category-hero .izon-tag--muted,
 html:root[data-izon-theme="dark"] body.category .izon-category-hero .izon-tag--muted a {color:var(--onVioletMeta)!important;}
 html:root body.category .izon-category-hero .izon-tag,
 html:root body.category .izon-category-hero .izon-tag a {line-height:1.3;}
 html:root body.category .izon-category-hero__content {padding:14px 0 21px!important;}
 html:root body.category .izon-category-hero__title {
  margin-top:8px;font-size:21px!important;font-weight:600;
  line-height:1.15;letter-spacing:-.008em;
 }
 html:root body.category .izon-category-hero__excerpt {display:none;}
 html:root body.category .iz-catherometarow {margin-top:10px;}
 html:root body.category .izon-category-hero__meta {line-height:1.27;}
 html:root body.category .izon-category-hero .iz-bm svg {width:17px;height:17px;}
}
