/*
Theme Name: Irvine Observer (Ollie Child)
Theme URI: https://www.irvineobserver.com/
Author: Hirojo C. Takahashi
Description: A local Irvine and Orange County editorial publication child theme for the Ollie block theme, including full FSE layouts and OCDI demo content.
Version: 1.3.0
Requires at least: 6.6
Tested up to: 6.8
Requires PHP: 7.4
Template: ollie
Text Domain: irvine-observer
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Tags: full-site-editing, block-patterns, blog, news, two-columns, custom-colors, editor-style
*/

:root {
   --io-ink: #001d2d;
   --io-ink2: #042b40;
   --io-cyan: #08dfdf;
   --io-body: #172936;
   --io-muted: #677887;
   --io-line: #d7e2e7;
   --io-mist: #eff8fa;
   --io-max: 1160px;
   --io-shadow: 0 9px 27px rgba(0, 29, 45, .08)
}

*,
*::before,
*::after {
   box-sizing: border-box
}

html {
   scroll-behavior: smooth
}

body {
   margin: 0;
   color: var(--io-body);
   font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
   line-height: 1.55;
   background: #fff
}

img {
   max-width: 100%;
   height: auto
}

a {
   text-decoration-thickness: 1px;
   text-underline-offset: 3px
}

a:hover {
   color: #038c9b
}

.io-container {
   width: min(calc(100% - 48px), var(--io-max));
   max-width: var(--io-max);
   margin-inline: auto
}

.io-visually-hidden {
   position: absolute !important;
   width: 1px;
   height: 1px;
   padding: 0;
   margin: -1px;
   overflow: hidden;
   clip: rect(0, 0, 0, 0);
   white-space: nowrap;
   border: 0
}

.io-site-header {
   background: var(--io-ink);
   color: #fff;
   border-bottom: 2px solid var(--io-cyan);
   position: relative;
   z-index: 20
}

.io-header-inner {
   max-width: var(--io-max);
   margin: auto;
   min-height: 70px;
   padding: 6px 20px;
   gap: 24px
}

.io-branding {
   flex-shrink: 0;
   margin: 0 !important;
   gap: 0 !important
}

.io-branding .wp-block-site-title {
   margin: 0 !important;
   font-family: Georgia, "Times New Roman", serif;
   font-size: clamp(26px, 3vw, 37px);
   font-weight: 700;
   line-height: 1.05;
   letter-spacing: -1.3px;
   white-space: nowrap
}

.io-branding .wp-block-site-title a {
   background: linear-gradient(to right, #fff 0 37%, var(--io-cyan) 37% 100%);
   background-clip: text;
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   text-decoration: none
}

.io-branding .wp-block-site-tagline {
   margin: 4px 0 0 !important;
   color: #e4f0f3;
   font-size: 11px;
   line-height: 1.2;
   white-space: nowrap
}

.io-main-nav {
   margin-left: auto !important
}

.io-main-nav .wp-block-navigation-item__content {
   color: #f7fdff !important;
   font-weight: 650;
   font-size: 13px;
   text-decoration: none !important
}

.io-main-nav .wp-block-navigation-item__content:hover,
.io-main-nav .current-menu-item>.wp-block-navigation-item__content {
   color: var(--io-cyan) !important
}

.io-main-nav .wp-block-navigation__container {
   gap: clamp(14px, 2vw, 27px) !important
}

.io-main-nav .wp-block-navigation__responsive-container-open {
   color: #fff !important
}

.io-main-nav .wp-block-navigation__responsive-container.is-menu-open {
   color: var(--io-ink);
   padding: 25px
}

.io-main-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
   color: var(--io-ink) !important;
   font-size: 17px
}

.io-hero {
   background-color: var(--io-ink);
   background-image: linear-gradient(90deg, rgba(0, 24, 37, .99) 0%, rgba(0, 27, 43, .96) 28%, rgba(0, 27, 43, .73) 47%, rgba(0, 27, 43, .04) 77%), url('/wp-content/uploads/2026/11/hero-irvine-2.jpg');
   background-size: cover;
   background-position: 50% 47%;
   min-height: 300px;
   display: flex;
   align-items: center;
   color: #fff;
   margin-top: 0;
   background-repeat: repeat-x;
   background-size: contain;
   background-position-x: right;
   min-height: auto !important;
}

.io-hero-inner {
   padding-block: 35px 36px !important
}

.io-hero .io-eyebrow {
   color: var(--io-cyan);
   letter-spacing: .12em;
   margin: 0 0 9px !important
}

.io-hero h1 {
   color: #fff !important;
   max-width: 640px;
   font-weight: 850;
   font-size: clamp(32px, 4.3vw, 53px);
   line-height: 1.08;
   letter-spacing: -.04em;
   margin: 0 0 12px !important
}

.io-hero .io-hero-lede {
   color: #f0f8fa;
   max-width: 545px;
   font-size: 15px;
   line-height: 1.48;
   margin: 0 0 18px !important
}

.io-hero .wp-block-buttons {
   margin-top: 12px
}

.io-hero .wp-block-button__link {
   background: var(--io-cyan);
   color: #001a27;
   border-radius: 7px;
   font-size: 13px;
   box-shadow: 0 3px 10px rgba(0, 0, 0, .12)
}

.io-hero .wp-block-button__link:hover {
   background: #73f4f4;
   color: var(--io-ink)
}

.io-topics-wrap {
   background: linear-gradient(90deg, #f8fdfe, #edf4f7);
   border-bottom: 1px solid #e6eef1;
   margin-top: 0;
}

.io-topics {
   display: grid !important;
   grid-template-columns: repeat(5, minmax(0, 1fr));
   gap: 0 !important;
   align-items: stretch;
   min-height: 68px
}

.io-topics .io-topic-link {
   margin: 0 !important;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 18px 14px;
   gap: 12px;
   border-right: 1px solid #c9d7df;
   line-height: 1.22;
   font-size: 13px;
   font-weight: 780
}

.io-topics .io-topic-link:last-child {
   border-right: 0
}

.io-topic-link a {
   text-decoration: none;
   color: var(--io-ink)
}

.io-topic-link a:hover {
   color: #018e98
}

.io-topic-link::before {
   content: "";
   display: inline-block;
   background-position: center;
   background-size: contain;
   background-repeat: no-repeat;
   flex: 0 0 35px;
   height: 35px
}

.io-icon-news::before {
   background-image: url('assets/icons-news.svg')
}

.io-icon-people::before {
   background-image: url('assets/icons-people.svg')
}

.io-icon-development::before {
   background-image: url('assets/icons-development.svg')
}

.io-icon-transport::before {
   background-image: url('assets/icons-transport.svg')
}

.io-icon-history::before {
   background-image: url('assets/icons-history.svg')
}

.io-front-content {
   padding: 20px 0 6px
}

.io-section {
   margin: 0 auto 20px !important
}

.io-section-heading {
   font-weight: 850;
   letter-spacing: -.025em;
   font-size: clamp(23px, 2.7vw, 30px);
   margin: 0 0 12px !important;
   line-height: 1.13
}

.io-section-heading::after {
   content: "";
   display: block;
   margin-top: 7px;
   background: var(--io-cyan);
   width: 42px;
   height: 3px;
   border-radius: 3px
}

.io-eyebrow,
.io-eyebrow a,
.io-story-kicker a {
   font-size: 10px !important;
   font-weight: 850 !important;
   line-height: 1.3 !important;
   text-transform: uppercase;
   color: #04869a !important;
   letter-spacing: .035em;
   text-decoration: none !important
}

.io-card-grid {
   gap: 22px !important
}

.io-card-grid>li {
   list-style: none;
   min-width: 0;
   display: flex;
   flex-direction: column;
   gap: 0 !important;
   margin: 0 !important
}

.io-card-image {
   width: 100%;
   margin: 0 0 7px !important;
   overflow: hidden;
   border-radius: 9px
}

.io-card-image img {
   display: block;
   width: 100%;
   aspect-ratio: 16/6.4;
   object-fit: cover;
   transition: transform .25s ease
}

.io-card-image a:hover img {
   transform: scale(1.03)
}

.io-card-grid .io-eyebrow {
   margin: 0 0 4px !important
}

.io-card-title {
   font-size: 17px !important;
   font-weight: 780;
   letter-spacing: -.028em;
   margin: 0 0 2px !important;
   line-height: 1.2
}

.io-card-title a {
   color: var(--io-ink);
   text-decoration: none !important
}

.io-card-title a:hover {
   color: #018d9b
}

.io-date {
   font-size: 11px !important;
   color: var(--io-muted);
   margin: 3px 0 0 !important
}

.io-feature-grid {
   display: grid !important;
   grid-template-columns: 1.55fr 1fr;
   gap: 20px !important;
   margin-top: 12px !important
}

.io-feature-photo {
   background-image: linear-gradient(0deg, rgba(0, 29, 45, .94) 0%, rgba(0, 29, 45, .45) 57%, rgba(0, 29, 45, .05) 100%), url('/wp-content/uploads/2026/11/exploring-irvines-open-spaces-and-everyday-trails-featured-1.webp');
   background-size: cover;
   background-position: 50% 52%;
   min-height: 270px;
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
   padding: 23px 30px;
   border-radius: 10px;
   overflow: hidden;
   width: 100%;
   max-width: 100%;
}

.io-feature-photo .io-kicker-light {
   background: var(--io-cyan);
   display: inline-block;
   padding: 6px 10px;
   border-radius: 4px;
   font-size: 10px;
   font-weight: 850;
   color: var(--io-ink);
   width: fit-content;
   margin: 0 0 8px !important;
   text-transform: uppercase
}

.io-feature-photo h2 {
   color: #fff !important;
   font-weight: 850;
   font-size: clamp(22px, 2.6vw, 30px);
   line-height: 1.11;
   max-width: 480px;
   margin: 0 0 8px !important;
   letter-spacing: -.03em
}

.io-feature-photo p:not(.io-kicker-light) {
   color: #e9f9fc;
   max-width: 505px;
   font-size: 13px;
   line-height: 1.4;
   margin: 0 0 12px !important
}

.io-feature-photo .wp-block-button__link {
   font-size: 12px !important;
   padding: 10px 17px;
   background: var(--io-cyan);
   color: var(--io-ink)
}

.io-feature-side {
   display: flex;
   flex-direction: column;
   gap: 0 !important
}

.io-feature-side .wp-block-post-template {
   display: flex;
   flex-direction: column;
   gap: 0 !important
}

.io-feature-side .wp-block-post-template>li {
   display: grid;
   grid-template-columns: 43% 1fr;
   gap: 12px;
   align-items: start;
   padding: 2px 0 11px;
   margin-bottom: 10px;
   border-bottom: 1px solid var(--io-line);
   align-items: center;
   margin: 0;
   padding: 0;
}

.io-feature-side .wp-block-post-template>li:last-child {
   border-bottom: 0;
   margin-bottom: 0
}

.io-feature-side .io-card-image img {
   aspect-ratio: 16/6.8
}

.io-feature-side .io-card-title {
   font-size: 14px !important;
   line-height: 1.16
}

.io-feature-side .io-date {
   display: none
}

.io-split-three {
   display: grid !important;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 22px !important
}

.io-split-three>.wp-block-group:not(:last-child) {
   border-right: 1px solid var(--io-line);
   padding-right: 20px
}

.io-small-heading {
   font-size: 19px !important;
   font-weight: 800;
   margin: 0 0 10px !important;
   letter-spacing: -.02em
}

.io-small-heading::after {
   content: "";
   display: block;
   width: 40px;
   height: 3px;
   background: var(--io-cyan);
   margin-top: 6px
}

.io-mini-query .wp-block-post-template {
   display: flex;
   flex-direction: column;
   gap: 9px !important
}

.io-mini-query .wp-block-post-template>li {
   display: grid;
   grid-template-columns: 37% 1fr;
   gap: 12px;
   align-items: center;
   padding-bottom: 8px;
   margin-bottom: 0;
   border-bottom: 1px solid var(--io-line)
}

.io-mini-query .io-card-image {
   margin: 0 !important
}

.io-mini-query .io-card-image img {
   aspect-ratio: 16/9;
   border-radius: 6px
}

.io-mini-query .io-card-title {
   font-size: 12px !important;
   line-height: 1.23
}

.io-mini-query .io-eyebrow,
.io-mini-query .io-date {
   display: none
}

.io-trending {
   counter-reset: io-top
}

.io-trending .wp-block-post-template {
   display: flex;
   flex-direction: column;
   gap: 0 !important
}

.io-trending .wp-block-post-template>li {
   counter-increment: io-top;
   position: relative;
   list-style: none;
   border-bottom: 1px solid var(--io-line);
   padding: 9px 0 9px 53px;
   margin: 0
}

.io-trending .wp-block-post-template>li::before {
   content: counter(io-top);
   position: absolute;
   left: 0;
   top: 8px;
   display: grid;
   place-items: center;
   width: 39px;
   height: 39px;
   border-radius: 6px;
   background: #baf8f5;
   color: #047d8f;
   font-size: 20px;
   font-weight: 850
}

.io-trending .io-card-title {
   font-size: 13px !important;
   margin: 0 !important
}

.io-guide-tile {
   border-radius: 9px;
   overflow: hidden;
   min-height: 173px;
   background-image: linear-gradient(0deg, rgba(0, 26, 38, .95) 0%, rgba(0, 26, 38, .1) 67%), url('assets/images/guides.webp');
   background-size: cover;
   background-position: center;
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
   padding: 18px;
   color: white
}

.io-guide-tile h3 {
   color: white !important;
   font-size: 16px;
   line-height: 1.18;
   max-width: 260px;
   margin: 0 0 6px !important
}

.io-guide-tile a {
   color: var(--io-cyan);
   font-size: 13px;
   font-weight: 750;
   text-decoration: none
}

.io-search-banner {
   background: linear-gradient(120deg, #e3f9fa, #c6f9f5);
   border-radius: 11px;
   padding: 18px 28px !important;
   margin: 20px auto !important;
   gap: 20px
}

.io-search-banner h2 {
   font-size: 22px;
   font-weight: 850;
   margin: 0 !important
}

.io-search-banner p {
   font-size: 13px;
   margin: 0 !important
}

.io-search-banner .wp-block-search {
   width: 100%;
   max-width: 475px
}

.io-search-banner .wp-block-search__inside-wrapper {
   border: 0;
   padding: 0;
   gap: 7px;
   background: transparent
}

.io-search-banner .wp-block-search__input {
   height: 39px;
   border: 1px solid #bad3d9;
   border-radius: 6px;
   background: #fff;
   padding: 0 13px;
   font-size: 13px
}

.io-search-banner .wp-block-search__button {
   margin: 0;
   background: var(--io-cyan);
   color: var(--io-ink);
   border: 0;
   border-radius: 6px;
   font-size: 12px;
   font-weight: 800;
   padding: 0 22px
}

.io-about-strip {
   display: grid !important;
   grid-template-columns: 1fr 1.04fr;
   gap: 26px !important;
   align-items: center;
   margin: 20px auto 22px !important
}

.io-about-strip .wp-block-image img {
   border-radius: 11px;
   width: 100%;
   object-fit: cover;
   aspect-ratio: 16/4.6
}

.io-about-strip h2 {
   font-size: 23px;
   margin: 0 0 9px !important;
   font-weight: 850
}

.io-about-strip p {
   font-size: 13px;
   line-height: 1.5;
   margin: 0 !important
}

.io-site-footer {
   background: var(--io-ink);
   color: #fff;
   padding: 14px 0 18px
}

.io-footer-inner {
   max-width: var(--io-max);
   margin: 0 auto;
   gap: 28px
}

.io-footer-brand .wp-block-site-title {
   font-family: Georgia, serif;
   font-size: 26px;
   line-height: 1.05;
   margin: 0 !important
}

.io-footer-brand .wp-block-site-title a {
   background: linear-gradient(to right, #fff 0 37%, var(--io-cyan) 37% 100%);
   -webkit-background-clip: text;
   background-clip: text;
   -webkit-text-fill-color: transparent;
   text-decoration: none
}

.io-footer-brand .wp-block-site-tagline {
   font-size: 10px;
   color: #d3e9ee;
   margin: 3px 0 0 !important
}

.io-footer-nav .wp-block-navigation-item__content {
   font-size: 12px;
   color: #fff !important;
   text-decoration: none !important
}

.io-footer-nav .wp-block-navigation__container {
   gap: 16px !important
}

.io-footer-meta {
   border-top: 1px solid rgba(255, 255, 255, .18);
   margin-top: 12px;
   padding-top: 9px;
   color: #c6dce4;
   font-size: 11px
}

.io-footer-meta p {
   font-size: 11px;
   margin: 0 !important
}

.io-inner-main {
   padding: 40px 0 60px;
   min-height: 50vh
}

.io-page-head {
   padding-bottom: 24px;
   border-bottom: 1px solid var(--io-line);
   margin-bottom: 28px !important
}

.io-page-head h1 {
   font-size: clamp(34px, 4vw, 48px);
   line-height: 1.11;
   letter-spacing: -.04em;
   margin: 0 0 9px !important
}

.io-page-head p {
   color: var(--io-muted);
   margin: 0 !important
}

.io-page-content {
   font-size: 17px;
   line-height: 1.85
}

.io-page-content h2 {
   font-size: clamp(24px, 2.5vw, 32px);
   margin: 1.8em 0 .65em !important
}

.io-page-content h3 {
   font-size: 22px;
   margin-top: 1.6em !important
}

.io-page-content p {
   margin: 0 0 1.1em !important
}

.io-page-content a {
   color: #007e92
}

.io-archive-query .wp-block-post-template {
   display: grid !important;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 28px 23px !important
}

.io-archive-query .wp-block-post-template>li {
   list-style: none
}

.io-archive-query .wp-block-post-excerpt__excerpt {
   font-size: 13px;
   color: var(--io-muted);
   margin-top: 10px
}

.io-archive-query .wp-block-post-excerpt__more-link {
   font-size: 12px;
   color: var(--io-teal)
}

.io-archive-query .io-card-image img {
   aspect-ratio: 16/9
}

.io-pagination {
   padding-top: 27px;
   border-top: 1px solid var(--io-line);
   margin-top: 24px !important;
   font-size: 14px
}

.io-pagination a {
   font-weight: 750;
   text-decoration: none
}

.io-single-head {
   max-width: 870px;
   margin: 0 auto 24px !important;
   text-align: center
}

.io-single-head .wp-block-post-terms {
   font-size: 12px;
   font-weight: 800;
   text-transform: uppercase;
   color: #02859a
}

.io-single-head .wp-block-post-title {
   font-size: clamp(36px, 4.6vw, 57px);
   line-height: 1.06;
   letter-spacing: -.042em;
   margin: 10px 0 !important
}

.io-single-head .io-post-meta {
   justify-content: center;
   gap: 12px !important;
   color: var(--io-muted);
   font-size: 13px
}

.io-single-head .wp-block-post-featured-image {
   margin: 24px auto !important
}

.io-single-head .wp-block-post-featured-image img {
   aspect-ratio: 16/8.4;
   object-fit: cover;
   border-radius: 13px
}

.io-post-layout {
   display: grid !important;
   grid-template-columns: minmax(0, 1fr) 295px;
   gap: 55px !important;
   align-items: start
}

.io-story-content {
   font-size: 17px;
   line-height: 1.82;
   max-width: none !important;
   min-width: 0
}

.io-story-content h2,
.io-story-content h3 {
   scroll-margin-top: 20px;
   line-height: 1.22;
   letter-spacing: -.025em
}

.io-story-content h2 {
   font-size: 29px;
   margin-top: 1.6em !important
}

.io-story-content h3 {
   font-size: 23px;
   margin-top: 1.35em !important
}

.io-story-content p {
   margin: 0 0 1.25em !important
}

.io-story-content ul,
.io-story-content ol {
   padding-left: 23px
}

.io-post-side {
   min-width: 0
}

.io-sticky-sidebar {
   position: sticky;
   top: 20px
}

.io-toc {
   background: #eff8fa;
   border: 1px solid #dcebed;
   border-radius: 10px;
   padding: 19px 21px;
   margin-bottom: 18px
}

.io-toc h2 {
   font-size: 16px;
   font-weight: 850;
   margin: 0 0 9px !important
}

.io-toc-list {
   list-style: none;
   margin: 0;
   padding: 0;
   display: grid;
   gap: 8px
}

.io-toc-list li {
   font-size: 13px;
   line-height: 1.35;
   margin: 0
}

.io-toc-list a {
   color: #244354;
   text-decoration: none
}

.io-toc-list a:hover,
.io-toc-list a[aria-current="true"] {
   color: #03899d;
   text-decoration: underline
}

.io-toc-list .io-toc-depth-3 {
   padding-left: 13px;
   font-size: 12px
}

.io-toc-empty {
   color: var(--io-muted);
   font-size: 12px;
   margin: 0 !important
}

.io-sidebar-categories {
   border: 1px solid var(--io-line);
   border-radius: 10px;
   padding: 18px 21px
}

.io-sidebar-categories h2 {
   font-size: 16px;
   margin: 0 0 12px !important
}

.io-sidebar-categories ul {
   list-style: none;
   padding: 0;
   margin: 0
}

.io-sidebar-categories li {
   font-size: 13px;
   padding: 7px 0;
   border-bottom: 1px solid var(--io-line);
   display: flex;
   justify-content: space-between
}

.io-sidebar-categories li:last-child {
   border: 0
}

.io-sidebar-categories a {
   text-decoration: none;
   color: var(--io-ink);
   font-weight: 700
}

.io-related-title {
   font-size: 22px
}

.io-not-found {
   text-align: center;
   max-width: 710px;
   margin: auto;
   padding: 50px 0
}

.io-not-found h1 {
   font-size: clamp(48px, 7vw, 80px);
   margin: 0 0 14px !important
}

.io-not-found .wp-block-search {
   max-width: 580px;
   margin: 24px auto
}

.io-fallback {
   background: var(--io-mist);
   padding: 50px 20px;
   text-align: center;
   border-radius: 10px
}

.wp-site-blocks {
   overflow-x: clip
}

@media (max-width:1000px) {
   .io-header-inner {
      flex-wrap: wrap;
      justify-content: space-between
   }

   .io-main-nav .wp-block-navigation__container {
      gap: 13px !important
   }

   .io-main-nav .wp-block-navigation-item__content {
      font-size: 12px
   }

   .io-topics .io-topic-link {
      padding: 14px 8px;
      gap: 6px;
      font-size: 12px
   }

   .io-topic-link::before {
      flex-basis: 29px;
      height: 29px
   }

   .io-post-layout {
      gap: 25px !important;
      grid-template-columns: minmax(0, 1fr) 265px
   }
}

@media (max-width:782px) {
   .io-container {
      width: min(calc(100% - 30px), var(--io-max))
   }

   .io-header-inner {
      padding: 9px 14px
   }

   .io-branding .wp-block-site-title {
      font-size: 30px
   }

   .io-hero {
      min-height: 355px;
      /* background-position: 62% center; */
      background-image: linear-gradient(90deg, rgba(0, 24, 37, .96) 0%, rgba(0, 27, 43, .83) 60%, rgba(0, 27, 43, .62) 100%), url('/wp-content/uploads/2026/11/hero-irvine-2.jpg');
   }

   .io-hero-inner {
      padding: 40px 0 !important
   }

   .io-topics {
      grid-template-columns: repeat(5, minmax(148px, 1fr));
      overflow-x: auto;
      scroll-snap-type: x mandatory
   }

   .io-topics .io-topic-link {
      scroll-snap-align: start;
      justify-content: start
   }

   .io-card-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important
   }

   .io-feature-grid {
      grid-template-columns: 1fr !important
   }

   .io-feature-side .wp-block-post-template {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 12px !important
   }

   .io-feature-side .wp-block-post-template>li {
      display: block;
      border-bottom: 0
   }

   .io-split-three {
      grid-template-columns: 1fr 1fr !important
   }

   .io-split-three>.wp-block-group {
      border-right: 0 !important;
      padding-right: 0 !important
   }

   .io-split-three>.wp-block-group:last-child {
      grid-column: 1/-1
   }

   .io-guide-tile {
      min-height: 200px
   }

   .io-about-strip {
      grid-template-columns: 1fr !important;
      gap: 15px !important
   }

   .io-search-banner {
      flex-wrap: wrap !important
   }

   .io-search-banner .wp-block-search {
      max-width: none
   }

   .io-archive-query .wp-block-post-template {
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important
   }

   .io-post-layout {
      grid-template-columns: 1fr !important
   }

   .io-post-side {
      grid-row: 2
   }

   .io-sticky-sidebar {
      position: static
   }

   .io-footer-inner {
      flex-wrap: wrap;
      justify-content: space-between
   }
}

@media (max-width:580px) {
   .io-header-inner {
      min-height: 66px
   }

   .io-branding .wp-block-site-title {
      font-size: 27px
   }

   .io-branding .wp-block-site-tagline {
      font-size: 9px;
      white-space: normal
   }

   .io-hero {
      min-height: 355px;
      background-image: linear-gradient(90deg, rgba(0, 24, 37, .96) 0%, rgba(0, 27, 43, .83) 60%, rgba(0, 27, 43, .62) 100%), url('/wp-content/uploads/2026/11/hero-irvine-2.jpg')
   }

   .io-hero h1 {
      font-size: 36px;
      max-width: 440px
   }

   .io-hero .io-hero-lede {
      font-size: 14px
   }

   .io-card-grid,
   .io-archive-query .wp-block-post-template {
      grid-template-columns: 1fr !important
   }

   .io-card-image img {
      aspect-ratio: 16/8.4
   }

   .io-feature-photo {
      min-height: 315px;
      padding: 18px
   }

   .io-feature-side .wp-block-post-template {
      grid-template-columns: 1fr !important
   }

   .io-feature-side .wp-block-post-template>li {
      display: grid;
      grid-template-columns: 39% 1fr;
      border-bottom: 1px solid var(--io-line)
   }

   .io-split-three {
      grid-template-columns: 1fr !important
   }

   .io-split-three>.wp-block-group:last-child {
      grid-column: auto
   }

   .io-search-banner {
      padding: 18px !important
   }

   .io-search-banner .wp-block-search__inside-wrapper {
      flex-wrap: wrap
   }

   .io-search-banner .wp-block-search__input {
      min-width: 100%
   }

   .io-search-banner .wp-block-search__button {
      min-height: 40px;
      width: 100%
   }

   .io-single-head .wp-block-post-title {
      font-size: 35px
   }

   .io-inner-main {
      padding-top: 30px
   }

   .io-footer-inner {
      display: flex;
      flex-direction: column;
      align-items: start
   }
}

@media (prefers-reduced-motion:reduce) {
   html {
      scroll-behavior: auto
   }

   .io-card-image img {
      transition: none
   }
}

/* Block-editor-friendly wrappers for the post query cards and about photo. */
.io-card-info {
   display: flex !important;
   flex-direction: column;
   align-items: start;
   gap: 2px !important;
   min-width: 0;
   margin: 0 !important
}

.io-card-info>* {
   margin: 0 !important
}

.io-card-info .wp-block-post-excerpt {
   margin: 7px 0 0 !important
}

.io-feature-side .io-card-info {
   justify-content: center
}

.io-about-image {
   min-height: 145px;
   width: 100%;
   border-radius: 11px;
   background-image: url('assets/images/cityscape.webp');
   background-size: cover;
   background-position: center;
   overflow: hidden
}

.io-about-copy a {
   font-weight: 750;
   color: #007d8d;
   text-decoration: none
}

.io-about-copy a:hover {
   text-decoration: underline
}

@media (max-width:782px) {
   .io-about-image {
      min-height: 190px
   }
}

/* Refined featured-story controls and properly compact trending list. */
.io-hero .wp-block-button__link {
   padding: 11px 19px !important;
   display: inline-block;
   text-decoration: none !important
}

.io-feature-photo .wp-block-button__link {
   padding: 10px 18px !important;
   text-decoration: none !important;
   display: inline-block
}

.io-trending .io-card-image,
.io-trending .io-eyebrow,
.io-trending .io-date {
   display: none !important
}

.io-trending .wp-block-post-template>li {
   display: block;
   min-height: 56px
}

.io-trending .io-card-info {
   min-height: 40px;
   justify-content: center
}

.io-post-side {
   align-self: stretch
}

/* ================================================================
   Irvine Observer v1.1: Editorial inner-page system.
   Mirrors the homepage masthead, dark photo heroes, cyan rules,
   photo-led story cards and category navigation. Native FSE blocks.
   ================================================================ */
.io-subhero {
   position: relative;
   isolation: isolate;
   min-height: 280px;
   color: #fff;
   display: flex;
   align-items: center;
   background-color: var(--io-ink);
   background-repeat: no-repeat;
   background-size: cover;
   background-position: center center;
   margin-top: 0;
}

.io-subhero--local {
   background-image: linear-gradient(90deg, rgba(0, 24, 38, .99) 0%, rgba(0, 27, 43, .96) 33%, rgba(0, 27, 43, .65) 58%, rgba(0, 27, 43, .08) 91%), url('assets/images/local-news.webp')
}

.io-subhero--about {
   background-image: linear-gradient(90deg, rgba(0, 24, 38, .99) 0%, rgba(0, 27, 43, .94) 34%, rgba(0, 27, 43, .48) 65%, rgba(0, 27, 43, .03) 95%), url('assets/images/cityscape.webp')
}

.io-subhero--policy {
   background-image: linear-gradient(90deg, rgba(0, 24, 38, .99) 0%, rgba(0, 27, 43, .95) 37%, rgba(0, 27, 43, .58) 67%, rgba(0, 27, 43, .18) 98%), url('assets/images/uci.webp')
}

.io-subhero--topics {
   background-image: linear-gradient(90deg, rgba(0, 24, 38, .99) 0%, rgba(0, 27, 43, .93) 36%, rgba(0, 27, 43, .48) 69%, rgba(0, 27, 43, .12) 98%), url('assets/images/feature-park.webp')
}

.io-subhero--articles {
   background-image: linear-gradient(90deg, rgba(0, 24, 38, .99) 0%, rgba(0, 27, 43, .92) 36%, rgba(0, 27, 43, .43) 70%, rgba(0, 27, 43, .08) 98%), url('assets/images/hero-irvine.webp')
}

.io-subhero--archive,
.io-subhero--plain {
   background-image: linear-gradient(90deg, rgba(0, 24, 38, .99), rgba(0, 27, 43, .87) 55%, rgba(0, 27, 43, .27)), url('assets/images/local-news.webp')
}

.io-subhero-inner {
   width: 100%;
   padding: 43px 0 48px !important;
   position: relative
}

.io-subhero .io-subhero-eyebrow {
   color: var(--io-cyan) !important;
   font-size: 12px;
   font-weight: 850;
   letter-spacing: .1em;
   line-height: 1.3;
   text-transform: uppercase;
   margin: 0 0 10px !important
}

.io-subhero .io-subhero-title,
.io-subhero .wp-block-post-title,
.io-subhero .wp-block-query-title {
   color: #fff !important;
   font-size: clamp(35px, 4.7vw, 57px);
   letter-spacing: -.045em;
   line-height: 1.07;
   font-weight: 850;
   max-width: 690px;
   margin: 0 0 13px !important
}

.io-subhero .io-subhero-lede,
.io-subhero .wp-block-term-description {
   font-size: 15px;
   max-width: 580px;
   line-height: 1.55;
   color: #eaf7fc !important;
   margin: 0 0 17px !important
}

.io-subhero .wp-block-term-description p {
   font-size: 15px !important;
   color: #eaf7fc !important;
   margin: 0 0 17px !important;
   max-width: 580px
}

.io-subhero .io-subhero-actions {
   margin-top: 19px !important
}

.io-subhero .wp-block-button__link {
   font-size: 13px !important;
   font-weight: 800 !important;
   padding: 11px 21px !important;
   border-radius: 7px !important;
   color: #00283a !important;
   background: var(--io-cyan) !important;
   text-decoration: none !important
}

.io-subhero .wp-block-button__link:hover {
   background: #92f8f5 !important
}

.io-inner-editorial {
   padding-top: 32px;
   padding-bottom: 42px;
   min-height: 40vh
}

.io-inner-editorial>.wp-block-group {
   margin-bottom: 26px !important
}

.io-inner-editorial .io-section-heading {
   font-size: clamp(23px, 2.7vw, 30px) !important;
   margin: 0 0 13px !important
}

.io-inner-editorial .io-section-intro {
   color: var(--io-muted);
   font-size: 13px;
   margin: 0 0 16px !important
}

.io-editorial-feature-row {
   display: grid !important;
   grid-template-columns: 1.48fr 1fr;
   gap: 18px !important;
   align-items: stretch
}

.io-editorial-feature-image {
   display: flex !important;
   flex-direction: column;
   align-items: flex-start;
   justify-content: flex-end;
   padding: 26px 30px !important;
   min-height: 315px;
   border-radius: 12px;
   overflow: hidden;
   color: #fff;
   background-image: linear-gradient(0deg, rgba(0, 27, 43, .96) 0%, rgba(0, 27, 43, .72) 47%, rgba(0, 27, 43, .06) 100%), url('assets/images/hero-irvine.webp');
   background-size: cover;
   background-position: center
}

.io-editorial-feature-image .io-eyebrow {
   color: var(--io-cyan) !important;
   font-size: 11px !important;
   margin-bottom: 6px !important
}

.io-editorial-feature-image h2 {
   font-size: clamp(24px, 2.9vw, 35px);
   font-weight: 850;
   line-height: 1.1;
   letter-spacing: -.035em;
   margin: 0 0 9px !important;
   max-width: 520px;
   color: #fff !important
}

.io-editorial-feature-image p:not(.io-eyebrow) {
   color: #edf9fb;
   max-width: 540px;
   font-size: 13px;
   line-height: 1.5;
   margin: 0 0 16px !important
}

.io-editorial-feature-image .wp-block-button__link {
   background: var(--io-cyan) !important;
   color: var(--io-ink) !important;
   padding: 10px 16px !important;
   font-size: 12px !important;
   border-radius: 6px !important;
   text-decoration: none !important
}

.io-editorial-feature-extras {
   border: 1px solid #dce7ec;
   background: linear-gradient(142deg, #f8fcfd, #eaf6f8);
   padding: 29px !important;
   border-radius: 12px;
   display: flex !important;
   flex-direction: column;
   justify-content: space-between;
   min-width: 0
}

.io-feature-extras-top h3 {
   font-size: clamp(24px, 2.5vw, 30px);
   font-weight: 800;
   letter-spacing: -.03em;
   line-height: 1.15;
   margin: 8px 0 11px !important
}

.io-feature-extras-top p:not(.io-eyebrow) {
   font-size: 14px;
   color: #4a606d;
   line-height: 1.57;
   margin: 0 0 24px !important
}

.io-arrow-link a {
   font-size: 13px;
   font-weight: 800;
   text-decoration: none !important;
   color: #007e93
}

.io-arrow-link a:hover {
   color: #025c6b;
   text-decoration: underline !important
}

.io-archive-layout {
   display: grid !important;
   grid-template-columns: minmax(0, 1.95fr) minmax(235px, .74fr);
   gap: 31px !important;
   align-items: start
}

.io-archive-list {
   min-width: 0
}

.io-archive-aside {
   min-width: 0;
   display: flex !important;
   flex-direction: column;
   gap: 16px !important
}

.io-archive-layout .io-archive-query .wp-block-post-template {
   grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
   gap: 24px 20px !important;
   margin: 0;
   padding: 0
}

.io-archive-layout .io-archive-query .wp-block-post-template>li {
   padding: 0 0 15px !important;
   border-bottom: 1px solid var(--io-line)
}

.io-archive-layout .io-card-image {
   margin-bottom: 9px !important
}

.io-archive-layout .io-card-image img {
   aspect-ratio: 16/8.8;
   object-fit: cover
}

.io-archive-layout .io-card-title {
   font-size: 19px !important;
   line-height: 1.17;
   margin: 4px 0 !important
}

.io-archive-layout .wp-block-post-excerpt {
   margin: 8px 0 0 !important
}

.io-archive-layout .wp-block-post-excerpt__excerpt {
   font-size: 13px;
   line-height: 1.52;
   color: #5a6e7b;
   margin: 0 0 8px !important
}

.io-archive-layout .wp-block-post-excerpt__more-link {
   font-size: 12px;
   color: #007b89 !important;
   text-decoration: none !important;
   font-weight: 800
}

.io-side-image,
.io-about-photo,
.io-policy-image {
   display: flex !important;
   flex-direction: column;
   justify-content: flex-end;
   min-height: 210px;
   border-radius: 11px;
   overflow: hidden;
   padding: 22px !important;
   color: #fff;
   background-size: cover;
   background-position: center
}

.io-side-image--city {
   background-image: linear-gradient(0deg, rgba(0, 28, 40, .88), rgba(0, 28, 40, .1)), url('assets/images/cityscape.webp')
}

.io-side-photo-kicker {
   color: var(--io-cyan) !important;
   font-size: 10px !important;
   letter-spacing: .06em;
   font-weight: 850;
   text-transform: uppercase;
   margin: 0 0 5px !important
}

.io-side-image h3,
.io-about-photo h3,
.io-policy-image h3 {
   font-size: 22px;
   line-height: 1.15;
   letter-spacing: -.03em;
   font-weight: 850;
   color: #fff !important;
   margin: 0 !important
}

.io-side-topic-list {
   border: 1px solid var(--io-line);
   background: #fff;
   border-radius: 11px;
   padding: 19px 19px 12px !important
}

.io-side-topic-list h3 {
   font-size: 17px;
   font-weight: 850;
   margin: 0 0 8px !important;
   letter-spacing: -.02em
}

.io-side-topic-list p {
   margin: 0 !important
}

.io-side-topic-list a {
   display: flex;
   justify-content: space-between;
   gap: 12px;
   text-decoration: none !important;
   padding: 10px 0;
   border-bottom: 1px solid var(--io-line);
   font-size: 12px;
   font-weight: 750;
   color: #123245
}

.io-side-topic-list p:last-child a {
   border: 0
}

.io-side-topic-list a:hover {
   color: #008b9d
}

.io-side-note {
   background: var(--io-mist);
   border-radius: 11px;
   padding: 20px !important
}

.io-side-note h3 {
   font-size: 18px;
   line-height: 1.2;
   margin: 5px 0 !important
}

.io-side-note p:not(.io-eyebrow, .io-arrow-link) {
   font-size: 13px;
   color: #46606a;
   margin: 7px 0 11px !important
}

.io-inner-section {
   margin-top: 31px !important
}

.io-quick-topic-grid {
   display: grid !important;
   grid-template-columns: repeat(4, minmax(0, 1fr));
   gap: 11px !important
}

.io-quick-topic {
   min-width: 0;
   background: #eef7f9;
   border: 1px solid #e3edf1;
   border-radius: 9px;
   min-height: 86px;
   padding: 14px !important;
   display: flex;
   align-items: center;
   gap: 11px
}

.io-quick-topic::before {
   content: "";
   width: 28px;
   height: 28px;
   flex: 0 0 28px;
   background-size: contain;
   background-position: center;
   background-repeat: no-repeat
}

.io-quick-topic.io-icon-people::before {
   background-image: url('assets/icons-people.svg')
}

.io-quick-topic.io-icon-development::before {
   background-image: url('assets/icons-development.svg')
}

.io-quick-topic.io-icon-transport::before {
   background-image: url('assets/icons-transport.svg')
}

.io-quick-topic.io-icon-history::before {
   background-image: url('assets/icons-history.svg')
}

.io-quick-topic p {
   margin: 0 !important;
   flex: 1
}

.io-quick-topic a {
   font-size: 12px;
   line-height: 1.3;
   font-weight: 800;
   color: var(--io-ink);
   text-decoration: none !important
}

.io-quick-topic a:hover {
   color: #018e98
}

.io-search-banner--inner {
   margin: 34px 0 0 !important
}

/* About / longform editorial pages */
.io-about-editorial-grid,
.io-general-page-grid {
   display: grid !important;
   grid-template-columns: minmax(0, 1.5fr) minmax(270px, .8fr);
   gap: 23px !important;
   align-items: start
}

.io-editorial-prose-card,
.io-policy-main {
   min-width: 0;
   background: #fff;
   border: 1px solid #e1eaee;
   border-radius: 11px;
   padding: 28px 32px !important;
   box-shadow: 0 7px 22px rgba(0, 29, 45, .035)
}

.io-editorial-prose-card>.io-eyebrow,
.io-policy-main>.io-eyebrow {
   margin: 0 0 6px !important
}

.io-editorial-prose-card>h2,
.io-policy-main>h2 {
   font-size: clamp(25px, 2.8vw, 32px);
   font-weight: 850;
   letter-spacing: -.035em;
   margin: 0 0 14px !important
}

.io-rich-content {
   font-size: 15px;
   line-height: 1.74;
   color: #304450;
   max-width: none !important
}

.io-rich-content p {
   font-size: 15px !important;
   line-height: 1.72 !important;
   margin: 0 0 15px !important
}

.io-rich-content .wp-block-post-content {
   max-width: none !important
}

.io-rich-content h2 {
   font-size: 21px !important;
   line-height: 1.2 !important;
   font-weight: 820;
   margin: 28px 0 9px !important;
   padding-top: 17px;
   border-top: 1px solid #e2edf0
}

.io-rich-content h2::before {
   content: "";
   display: block;
   height: 3px;
   width: 36px;
   background: var(--io-cyan);
   margin-bottom: 9px;
   border-radius: 3px
}

.io-rich-content h3 {
   font-size: 18px !important
}

.io-rich-content a {
   color: #007e91 !important;
   font-weight: 750;
   text-decoration: underline;
   text-underline-offset: 3px
}

.io-rich-content ul {
   padding-left: 24px
}

.io-about-sidebar {
   display: flex !important;
   flex-direction: column;
   gap: 15px !important
}

.io-about-photo {
   min-height: 274px;
   background-image: linear-gradient(0deg, rgba(0, 26, 38, .85), rgba(0, 26, 38, .05)), url('assets/images/cityscape.webp')
}

.io-about-brief {
   border: 1px solid #e2eaee;
   background: linear-gradient(150deg, #f7fcfd, #ecf7f9);
   padding: 21px !important;
   border-radius: 11px
}

.io-about-brief h3 {
   font-size: 20px;
   line-height: 1.2;
   margin: 6px 0 9px !important
}

.io-about-brief>p:not(.io-eyebrow) {
   font-size: 13px;
   line-height: 1.56;
   color: #54707e;
   margin: 0 !important
}

.io-about-chips {
   display: flex !important;
   gap: 7px !important;
   flex-wrap: wrap;
   margin-top: 14px !important
}

.io-about-chips p {
   margin: 0 !important
}

.io-about-chips a {
   background: #fff;
   border: 1px solid #cfe3e8;
   padding: 7px 10px;
   border-radius: 100px;
   font-size: 11px;
   color: #004b60;
   text-decoration: none !important;
   font-weight: 800;
   display: inline-block
}

.io-about-chips a:hover {
   background: #d8f7f8
}

.io-values-grid,
.io-bottom-links {
   display: grid !important;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 16px !important
}

.io-small-card {
   background: #f7fafb;
   border: 1px solid #dfe9ee;
   border-radius: 10px;
   padding: 23px !important;
   min-width: 0;
   display: flex !important;
   flex-direction: column
}

.io-small-card .io-eyebrow {
   color: #00859a !important;
   margin: 0 0 8px !important
}

.io-small-card h3 {
   font-size: 21px;
   font-weight: 820;
   line-height: 1.2;
   letter-spacing: -.03em;
   margin: 0 0 10px !important
}

.io-small-card>p:not(.io-eyebrow, .io-arrow-link) {
   font-size: 13px;
   line-height: 1.5;
   color: #546e78;
   margin: 0 0 20px !important
}

.io-small-card .io-arrow-link {
   margin-top: auto !important
}

.io-endcap-panel {
   background-color: var(--io-ink);
   background-image: linear-gradient(90deg, rgba(0, 27, 43, .99), rgba(0, 31, 44, .94) 55%, rgba(0, 31, 44, .26) 100%), url('assets/images/parks.webp');
   background-position: center;
   background-size: cover;
   border-radius: 11px;
   color: #fff;
   min-height: 210px;
   padding: 28px 33px !important;
   display: flex;
   align-items: center;
   margin-top: 30px !important
}

.io-endcap-copy {
   max-width: 620px
}

.io-endcap-copy .io-eyebrow {
   color: var(--io-cyan) !important;
   margin: 0 0 6px !important
}

.io-endcap-copy h2 {
   color: #fff !important;
   font-size: clamp(25px, 3vw, 34px);
   line-height: 1.16;
   letter-spacing: -.035em;
   margin: 0 0 9px !important
}

.io-endcap-copy>p:not(.io-eyebrow) {
   color: #e8f6fa;
   font-size: 14px;
   max-width: 570px;
   line-height: 1.5;
   margin: 0 0 16px !important
}

.io-endcap-copy .wp-block-button__link {
   background: var(--io-cyan) !important;
   color: var(--io-ink) !important;
   font-size: 12px !important;
   font-weight: 850 !important;
   text-decoration: none !important;
   padding: 10px 16px !important
}

/* Editorial policy */
.io-policy-layout {
   display: grid !important;
   grid-template-columns: minmax(0, 1.62fr) minmax(260px, .85fr);
   gap: 25px !important;
   align-items: start
}

.io-policy-main .io-rich-content h2 {
   font-size: 20px !important
}

.io-policy-aside {
   min-width: 0;
   display: flex !important;
   flex-direction: column;
   gap: 15px !important
}

.io-policy-image {
   background-image: linear-gradient(0deg, rgba(0, 26, 38, .89), rgba(0, 26, 38, .1)), url('assets/images/uci.webp');
   min-height: 232px
}

.io-policy-index {
   background: #ecf8f9;
   border-radius: 11px;
   padding: 22px !important
}

.io-policy-index h3 {
   font-size: 18px;
   margin: 0 0 11px !important
}

.io-policy-tick {
   display: flex !important;
   gap: 12px;
   align-items: flex-start;
   border-bottom: 1px solid #cde3e8;
   padding: 11px 0
}

.io-policy-tick:last-child {
   border-bottom: none
}

.io-policy-tick>p {
   margin: 0 !important;
   font-weight: 750;
   font-size: 12px;
   line-height: 1.4
}

.io-policy-tick .io-policy-number {
   font-size: 18px;
   font-weight: 850;
   line-height: 1;
   background: var(--io-cyan);
   padding: 7px 9px;
   border-radius: 5px;
   color: #00455b
}

.io-policy-footnote {
   padding: 4px 10px 8px !important
}

.io-policy-footnote p {
   margin: 0 0 7px !important
}

/* Topics */
.io-topics-intro {
   max-width: 710px;
   margin: 0 0 23px !important
}

.io-topics-intro h2 {
   font-size: 28px;
   line-height: 1.16;
   font-weight: 850;
   margin: 4px 0 8px !important;
   letter-spacing: -.035em
}

.io-topics-intro>p:not(.io-eyebrow) {
   font-size: 14px;
   line-height: 1.55;
   color: #5a6d78;
   margin: 0 !important
}

.io-topic-cover-grid {
   display: grid !important;
   grid-template-columns: repeat(6, minmax(0, 1fr));
   gap: 15px !important
}

.io-cover-card {
   grid-column: span 2;
   min-height: 235px;
   background-color: var(--io-ink);
   background-size: cover;
   background-position: center;
   display: flex !important;
   flex-direction: column;
   justify-content: flex-end;
   align-items: flex-start;
   border-radius: 11px;
   overflow: hidden;
   padding: 23px !important;
   transition: filter .2s ease
}

.io-cover-card.io-cover-large {
   grid-column: span 3;
   min-height: 286px
}

.io-cover-card:hover {
   filter: brightness(1.07)
}

.io-topic-cover--news {
   background-image: linear-gradient(0deg, rgba(0, 28, 42, .96), rgba(0, 28, 42, .05) 90%), url('assets/images/local-news.webp')
}

.io-topic-cover--community {
   background-image: linear-gradient(0deg, rgba(0, 28, 42, .96), rgba(0, 28, 42, .05) 90%), url('assets/images/feature-park.webp')
}

.io-topic-cover--development {
   background-image: linear-gradient(0deg, rgba(0, 28, 42, .96), rgba(0, 28, 42, .06) 90%), url('assets/images/neighborhoods.webp')
}

.io-topic-cover--transport {
   background-image: linear-gradient(0deg, rgba(0, 28, 42, .96), rgba(0, 28, 42, .03) 90%), url('assets/images/transport.webp')
}

.io-topic-cover--history {
   background-image: linear-gradient(0deg, rgba(0, 28, 42, .96), rgba(0, 28, 42, .04) 90%), url('assets/images/guides.webp')
}

.io-cover-card .io-topic-card-kicker {
   font-size: 10px !important;
   color: var(--io-cyan) !important;
   letter-spacing: .08em;
   font-weight: 850;
   text-transform: uppercase;
   margin: 0 0 5px !important
}

.io-cover-card h3 {
   font-size: clamp(19px, 2.2vw, 27px);
   font-weight: 850;
   letter-spacing: -.03em;
   line-height: 1.12;
   margin: 0 0 8px !important;
   color: white !important
}

.io-cover-card .io-topic-card-desc {
   font-size: 12px !important;
   line-height: 1.45;
   color: #edfaff !important;
   margin: 0 0 12px !important
}

.io-cover-card .io-topic-card-link {
   margin: 0 !important
}

.io-cover-card .io-topic-card-link a {
   font-size: 12px;
   font-weight: 850;
   text-decoration: none !important;
   color: var(--io-cyan)
}

.io-topics-endcap {
   background-image: linear-gradient(90deg, rgba(0, 27, 43, .99), rgba(0, 31, 44, .94) 55%, rgba(0, 31, 44, .13) 100%), url('assets/images/coast.webp')
}

/* Articles archive */
.io-article-intro-strip {
   display: grid !important;
   grid-template-columns: 1.2fr .8fr;
   border-radius: 11px;
   overflow: hidden;
   background: #eef8fa;
   min-height: 205px
}

.io-article-intro-text {
   padding: 29px !important;
   align-self: center;
   max-width: 650px
}

.io-article-intro-text h2 {
   font-size: clamp(24px, 2.8vw, 33px);
   line-height: 1.1;
   letter-spacing: -.03em;
   margin: 5px 0 9px !important
}

.io-article-intro-text>p:not(.io-eyebrow) {
   font-size: 13px;
   line-height: 1.58;
   color: #536b75;
   margin: 0 !important
}

.io-article-intro-image {
   min-height: 205px;
   display: flex !important;
   flex-direction: column;
   justify-content: flex-end;
   padding: 19px !important;
   background-image: linear-gradient(0deg, rgba(0, 28, 41, .74), rgba(0, 28, 41, .02)), url('assets/images/feature-park.webp');
   background-position: center;
   background-size: cover
}

.io-articles-layout .io-card-title {
   font-size: 19px !important
}

.io-articles-layout .io-archive-aside {
   position: relative
}

@media(max-width:1000px) {

   .io-archive-layout,
   .io-about-editorial-grid,
   .io-general-page-grid,
   .io-policy-layout {
      grid-template-columns: minmax(0, 1.3fr) minmax(230px, .75fr) !important;
      gap: 20px !important
   }

   .io-inner-editorial {
      padding-top: 23px
   }

   .io-values-grid,
   .io-bottom-links {
      gap: 12px !important
   }

   .io-small-card {
      padding: 18px !important
   }

   .io-quick-topic-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important
   }
}

@media(max-width:782px) {
   .io-subhero {
      min-height: 280px
   }

   .io-subhero-inner {
      padding: 35px 0 39px !important
   }

   .io-editorial-feature-row {
      grid-template-columns: 1fr !important
   }

   .io-editorial-feature-image {
      min-height: 290px
   }

   .io-archive-layout,
   .io-about-editorial-grid,
   .io-general-page-grid,
   .io-policy-layout {
      grid-template-columns: 1fr !important
   }

   .io-archive-aside,
   .io-about-sidebar,
   .io-policy-aside {
      display: grid !important;
      grid-template-columns: 1fr 1fr;
      gap: 14px !important
   }

   .io-side-note,
   .io-about-chips,
   .io-policy-footnote {
      grid-column: 1/-1
   }

   .io-about-sidebar .io-about-brief {
      min-height: 230px
   }

   .io-policy-aside .io-policy-index {
      align-self: stretch
   }

   .io-topic-cover-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important
   }

   .io-cover-card,
   .io-cover-card.io-cover-large {
      grid-column: span 1;
      min-height: 258px
   }

   .io-cover-card:last-child {
      grid-column: span 2
   }

   .io-values-grid,
   .io-bottom-links {
      grid-template-columns: 1fr 1fr !important
   }

   .io-values-grid>.wp-block-group:last-child,
   .io-bottom-links>.wp-block-group:last-child {
      grid-column: 1/-1
   }

   .io-search-banner--inner {
      margin-top: 27px !important
   }
}

@media(max-width:580px) {
   .io-subhero {
      min-height: 298px;
      background-position: 63% center
   }

   .io-subhero--local,
   .io-subhero--about,
   .io-subhero--policy,
   .io-subhero--topics,
   .io-subhero--articles {
      background-image: linear-gradient(90deg, rgba(0, 24, 38, .95), rgba(0, 27, 43, .72) 100%), url('assets/images/hero-irvine.webp')
   }

   .io-subhero .io-subhero-title,
   .io-subhero .wp-block-post-title,
   .io-subhero .wp-block-query-title {
      font-size: 36px !important
   }

   .io-subhero .io-subhero-lede {
      font-size: 14px
   }

   .io-editorial-feature-image {
      min-height: 335px;
      padding: 20px !important
   }

   .io-editorial-feature-extras {
      padding: 23px !important
   }

   .io-archive-layout .io-archive-query .wp-block-post-template {
      grid-template-columns: 1fr !important
   }

   .io-archive-aside,
   .io-about-sidebar,
   .io-policy-aside {
      grid-template-columns: 1fr !important
   }

   .io-side-note,
   .io-about-chips,
   .io-policy-footnote {
      grid-column: auto
   }

   .io-values-grid,
   .io-bottom-links,
   .io-topic-cover-grid {
      grid-template-columns: 1fr !important
   }

   .io-values-grid>.wp-block-group:last-child,
   .io-bottom-links>.wp-block-group:last-child,
   .io-cover-card,
   .io-cover-card.io-cover-large,
   .io-cover-card:last-child {
      grid-column: auto;
      min-height: 232px
   }

   .io-cover-card.io-cover-large {
      min-height: 258px
   }

   .io-quick-topic-grid {
      grid-template-columns: 1fr !important
   }

   .io-editorial-prose-card,
   .io-policy-main {
      padding: 22px !important
   }

   .io-article-intro-strip {
      grid-template-columns: 1fr !important
   }

   .io-article-intro-image {
      min-height: 160px
   }

   .io-endcap-panel {
      padding: 24px !important;
      min-height: 255px
   }
}


/* === v1.2: responsive header search and redesigned search results === */
.io-header-inner {
   flex-wrap: nowrap !important
}

.io-header-inner>.wp-block-shortcode {
   margin: 0 !important;
   flex: 0 0 auto;
   min-width: 44px
}

.io-header-search {
   position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
   z-index: 50
}

.io-search-toggle {
   appearance: none;
   border: 1px solid transparent;
   border-radius: 9px;
   width: 43px;
   height: 43px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   color: #f7ffff;
   background: transparent;
   cursor: pointer;
   transition: background .16s ease, color .16s ease
}

.io-search-toggle:hover,
.io-search-toggle[aria-expanded="true"] {
   color: var(--io-cyan);
   background: rgba(255, 255, 255, .09)
}

.io-search-toggle:focus-visible,
.io-header-search-form button:focus-visible,
.io-header-search-form input:focus-visible {
   outline: 3px solid var(--io-cyan);
   outline-offset: 3px
}

.io-header-search-panel {
   position: absolute;
   top: calc(100% + 15px);
   right: 0;
   z-index: 100;
   width: min(430px, calc(100vw - 30px));
   padding: 22px;
   background: #fff;
   color: var(--io-ink);
   border: 1px solid #d4e6ea;
   border-top: 4px solid var(--io-cyan);
   border-radius: 12px;
   box-shadow: 0 18px 50px rgba(0, 26, 42, .25);
   text-align: left
}

.io-header-search-panel[hidden] {
   display: none !important
}

.io-header-search-panel::before {
   content: "";
   position: absolute;
   top: -10px;
   right: 17px;
   width: 16px;
   height: 16px;
   background: var(--io-cyan);
   transform: rotate(45deg);
   z-index: -1
}

.io-header-search-panel__heading {
   font-size: 19px;
   font-weight: 850;
   color: var(--io-ink);
   line-height: 1.15;
   letter-spacing: -.03em
}

.io-header-search-panel__description {
   color: #566e7b !important;
   font-size: 12px;
   margin: 7px 0 17px !important;
   line-height: 1.4
}

.io-header-search-form {
   display: flex;
   gap: 8px;
   align-items: stretch;
   margin: 0
}

.io-header-search-form input {
   flex: 1;
   min-width: 0;
   min-height: 44px;
   padding: 10px 12px;
   font: inherit;
   font-size: 14px;
   border: 1px solid #c7d7df;
   border-radius: 7px;
   color: var(--io-ink);
   background: #fff
}

.io-header-search-form button {
   flex: 0 0 auto;
   border: 0;
   border-radius: 7px;
   padding: 0 17px;
   font-size: 13px;
   font-weight: 850;
   color: #001d2d;
   background: var(--io-cyan);
   cursor: pointer
}

.io-header-search-form button:hover {
   background: #7cf4f1
}

/* Full-width editorial banner aligns its content with the main 1160px page grid. */
.io-search-hero {
   background-color: var(--io-ink);
   background-image: linear-gradient(90deg, rgba(0, 29, 45, .97) 0%, rgba(0, 29, 45, .92) 40%, rgba(0, 29, 45, .36) 80%), url('assets/images/hero-irvine.webp');
   background-size: cover;
   background-position: center 50%;
   color: #fff;
   min-height: 310px;
   display: flex;
   align-items: center
}

.io-search-hero-inner {
   max-width: var(--io-max) !important;
   margin-inline: auto !important;
   padding: 40px 0 !important;
   width: min(calc(100% - 48px), var(--io-max))
}

.io-search-hero-inner>.io-eyebrow {
   color: var(--io-cyan) !important;
   letter-spacing: .12em;
   font-size: 11px !important;
   margin: 0 0 8px !important
}

.io-search-hero-inner h1 {
   color: #fff !important;
   font-size: clamp(32px, 4.1vw, 51px);
   font-weight: 850;
   letter-spacing: -.045em;
   line-height: 1.07;
   margin: 0 0 13px !important;
   max-width: 720px
}

.io-search-hero-lede {
   max-width: 600px;
   color: #e1eff3;
   font-size: 15px;
   line-height: 1.48;
   margin: 0 0 20px !important
}

.io-search-hero-form {
   max-width: 650px;
   margin: 0 !important
}

.io-search-hero-form .wp-block-search__inside-wrapper {
   display: flex;
   align-items: stretch;
   gap: 7px;
   padding: 6px;
   border: 0;
   border-radius: 9px;
   background: #fff;
   box-shadow: 0 5px 20px rgba(0, 0, 0, .12)
}

.io-search-hero-form .wp-block-search__input {
   flex: 1;
   min-width: 0;
   min-height: 42px;
   padding: 10px 13px;
   border: 0 !important;
   outline: none;
   background: #fff;
   font-family: inherit;
   font-size: 14px;
   color: var(--io-ink)
}

.io-search-hero-form .wp-block-search__input:focus-visible {
   outline: 3px solid #017a90;
   outline-offset: -3px;
   border-radius: 6px
}

.io-search-hero-form .wp-block-search__button {
   flex: 0 0 auto;
   margin: 0 !important;
   border: 0;
   border-radius: 6px;
   background: var(--io-cyan);
   color: var(--io-ink);
   font-family: inherit;
   font-size: 13px;
   font-weight: 850;
   padding: 9px 19px;
   cursor: pointer
}

.io-search-hero-form .wp-block-search__button:hover {
   background: #91fbf6
}

.io-search-main {
   padding: 40px 0 65px;
   min-height: 42vh;
   max-width: var(--io-max) !important
}

.io-search-main>* {
   max-width: none !important
}

.io-search-results-heading {
   width: 100%;
   max-width: none !important;
   gap: 20px !important;
   padding: 0 0 18px;
   border-bottom: 1px solid var(--io-line);
   margin: 0 0 28px !important
}

.io-search-results-intro {
   min-width: 0;
   max-width: 100%
}

.io-search-results-intro>.io-eyebrow {
   margin: 0 0 6px !important
}

.io-search-results-title {
   font-size: clamp(26px, 2.5vw, 35px);
   line-height: 1.16;
   letter-spacing: -.036em;
   font-weight: 850;
   margin: 0 0 8px !important;
   overflow-wrap: anywhere
}

.io-search-results-description {
   font-size: 13px;
   color: var(--io-muted);
   margin: 0 !important
}

.io-search-browse-link {
   margin: 0 !important;
   white-space: nowrap
}

.io-search-browse-link a {
   color: #007d90;
   text-decoration: none;
   font-weight: 800;
   font-size: 13px
}

.io-search-browse-link a:hover {
   text-decoration: underline
}

.io-search-results-layout {
   display: grid !important;
   grid-template-columns: minmax(0, 1fr) 278px;
   gap: 32px !important;
   align-items: start;
   width: 100%;
   max-width: none !important
}

.io-search-results-list,
.io-search-results-aside {
   min-width: 0
}

.io-search-results-list .wp-block-post-template {
   display: grid !important;
   grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
   gap: 28px 20px !important;
   margin: 0;
   padding: 0;
   list-style: none
}

.io-search-results-list .wp-block-post-template>li {
   border-bottom: 1px solid var(--io-line);
   padding: 0 0 20px !important;
   min-width: 0
}

.io-search-results-list .io-card-image {
   margin: 0 0 12px !important
}

.io-search-results-list .io-card-image img {
   aspect-ratio: 16/9;
   display: block;
   width: 100%;
   object-fit: cover;
   border-radius: 9px
}

.io-search-results-list .io-card-title {
   font-size: 19px !important;
   line-height: 1.2 !important;
   margin: 5px 0 6px !important
}

.io-search-results-list .wp-block-post-excerpt__excerpt {
   font-size: 13px;
   line-height: 1.55;
   color: #536a78;
   margin: 10px 0 5px !important
}

.io-search-results-list .wp-block-post-excerpt__more-link {
   color: #047d8f !important;
   font-size: 12px;
   font-weight: 800;
   text-decoration: none !important
}

.io-search-results-aside {
   display: flex !important;
   flex-direction: column;
   gap: 19px !important
}

.io-search-side-topics {
   padding: 21px;
   background: #f0f8fa;
   border: 1px solid #dce9ec;
   border-radius: 12px
}

.io-search-side-topics .io-eyebrow {
   margin: 0 0 6px !important
}

.io-search-side-topics h3 {
   margin: 0 0 13px !important;
   font-size: 20px;
   font-weight: 800;
   letter-spacing: -.02em
}

.io-search-side-topics p:not(.io-eyebrow) {
   margin: 0 !important;
   border-bottom: 1px solid #d7e5e9
}

.io-search-side-topics p:last-child {
   border: 0
}

.io-search-side-topics p a {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 10px 0;
   color: var(--io-ink);
   font-size: 13px;
   font-weight: 720;
   text-decoration: none;
   gap: 10px
}

.io-search-side-topics p a span {
   color: #008b9a
}

.io-search-side-topics p a:hover {
   color: #008394
}

.io-search-side-feature {
   padding: 25px 22px 23px;
   border-radius: 12px;
   color: #fff;
   background-image: linear-gradient(0deg, rgba(0, 29, 45, .98) 0%, rgba(0, 29, 45, .82) 62%, rgba(0, 29, 45, .38) 100%), url('assets/images/feature-park.webp');
   background-size: cover;
   background-position: center;
   min-height: 245px;
   display: flex;
   flex-direction: column;
   justify-content: flex-end
}

.io-search-side-feature .io-eyebrow {
   margin: 0 0 7px !important;
   color: var(--io-cyan) !important
}

.io-search-side-feature h3 {
   color: #fff !important;
   font-size: 21px;
   font-weight: 820;
   line-height: 1.12;
   margin: 0 0 8px !important
}

.io-search-side-feature p:not(.io-eyebrow) {
   font-size: 13px;
   color: #e2eef0;
   margin: 0 0 11px !important;
   line-height: 1.5
}

.io-search-side-feature a {
   color: var(--io-cyan);
   font-size: 13px;
   font-weight: 800;
   text-decoration: none
}

.io-search-no-results {
   grid-column: 1/-1;
   background: var(--io-mist);
   border-radius: 12px;
   border: 1px solid #d7ebee;
   padding: 35px !important;
   max-width: 780px
}

.io-search-no-results h3 {
   font-size: 23px;
   margin: 0 0 9px !important
}

.io-search-no-results p {
   font-size: 14px;
   color: #506571;
   margin: 0 0 13px !important
}

.io-search-retry {
   max-width: 590px;
   margin: 18px 0 !important
}

.io-search-retry .wp-block-search__inside-wrapper {
   display: flex;
   gap: 7px
}

.io-search-retry .wp-block-search__input {
   flex: 1;
   min-width: 0;
   border: 1px solid #bad3d9;
   border-radius: 7px;
   padding: 10px;
   font: inherit
}

.io-search-retry .wp-block-search__button {
   background: var(--io-cyan);
   color: var(--io-ink);
   border: 0;
   border-radius: 7px;
   font-weight: 800;
   padding: 11px 17px
}

.io-search-main .io-pagination {
   margin-top: 30px !important
}

@media(max-width:930px) {
   .io-header-inner {
      gap: 10px !important
   }

   .io-main-nav {
      margin-left: auto !important;
      min-width: 0
   }

   .io-main-nav .wp-block-navigation__responsive-container:not(.is-menu-open) {
      display: none !important
   }

   .io-main-nav .wp-block-navigation__responsive-container-open {
      display: flex !important;
      align-items: center;
      justify-content: center;
      color: #fff !important
   }

   .io-main-nav .wp-block-navigation__responsive-container.is-menu-open {
      display: flex !important;
      z-index: 999;
      position: fixed;
      inset: 0
   }

   .io-search-results-layout {
      grid-template-columns: minmax(0, 1fr) 245px;
      gap: 19px !important
   }
}

@media(max-width:782px) {
   .io-search-hero-inner {
      width: min(calc(100% - 30px), var(--io-max));
      padding: 38px 0 !important
   }

   .io-search-results-layout {
      grid-template-columns: 1fr !important
   }

   .io-search-results-aside {
      display: grid !important;
      grid-template-columns: 1fr 1fr;
      gap: 14px !important
   }

   .io-search-results-list .wp-block-post-template {
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important
   }

   .io-search-main {
      padding-top: 27px
   }
}

@media(max-width:580px) {
   .io-header-inner {
      gap: 6px !important;
      padding: 9px 12px
   }

   .io-branding {
      min-width: 0
   }

   .io-branding .wp-block-site-title {
      font-size: 25px
   }

   .io-branding .wp-block-site-tagline {
      font-size: 9px
   }

   .io-header-inner>.wp-block-shortcode {
      min-width: 42px
   }

   .io-search-toggle {
      width: 41px;
      height: 41px
   }

   .io-header-search-panel {
      right: -1px;
      max-width: calc(100vw - 24px);
      padding: 18px
   }

   .io-header-search-form {
      flex-wrap: wrap
   }

   .io-header-search-form input {
      min-width: 100%
   }

   .io-header-search-form button {
      width: 100%;
      min-height: 42px
   }

   .io-search-hero {
      min-height: 310px;
      background-position: 58% center
   }

   .io-search-hero-inner h1 {
      font-size: 35px
   }

   .io-search-hero-lede {
      font-size: 14px
   }

   .io-search-hero-form .wp-block-search__inside-wrapper {
      flex-wrap: wrap;
      gap: 6px
   }

   .io-search-hero-form .wp-block-search__input {
      min-width: 100%;
      padding: 10px 12px
   }

   .io-search-hero-form .wp-block-search__button {
      width: 100%;
      min-height: 40px
   }

   .io-search-results-heading {
      gap: 13px !important
   }

   .io-search-results-title {
      font-size: 27px
   }

   .io-search-results-list .wp-block-post-template {
      grid-template-columns: 1fr !important
   }

   .io-search-results-aside {
      grid-template-columns: 1fr
   }

   .io-search-no-results {
      padding: 22px !important
   }
}

@media(prefers-reduced-motion:reduce) {
   .io-search-toggle {
      transition: none
   }
}

/* ==============================================================
   Irvine Observer v1.3: Single post editorial story page.
   Scope to .io-article-page so archives and homepage stay intact.
   ============================================================= */
.io-article-page {
   padding: 0 !important;
   margin: 0 !important;
   background: #fff
}

.io-article-page>* {
   max-width: none !important
}

.io-article-hero {
   background-color: #001d2d;
   background-image: linear-gradient(92deg, rgba(0, 25, 41, .98) 0%, rgba(0, 25, 41, .91) 43%, rgba(0, 28, 44, .73) 68%, rgba(0, 28, 44, .44) 100%), url('assets/images/cityscape.webp');
   background-size: cover;
   background-position: center 45%;
   border-bottom: 3px solid var(--io-cyan);
   color: #fff;
   position: relative;
   isolation: isolate;
   min-height: 340px
}

.io-article-hero::after {
   content: "";
   width: 23%;
   height: 100%;
   position: absolute;
   right: 0;
   top: 0;
   pointer-events: none;
   background: linear-gradient(115deg, transparent, rgba(8, 223, 223, .075));
   z-index: -1
}

.io-article-hero-inner {
   width: min(calc(100% - 48px), var(--io-max));
   max-width: var(--io-max) !important;
   padding: 29px 0 84px !important;
   margin-inline: auto !important
}

.io-article-breadcrumb {
   display: flex;
   flex-wrap: nowrap;
   align-items: center;
   gap: 10px;
   margin: 0 0 26px;
   max-width: 98%;
   font-size: 12px;
   color: #b8d5df;
   white-space: nowrap;
   overflow: hidden
}

.io-article-breadcrumb a {
   color: #d8f3f7;
   text-decoration: none;
   font-weight: 650;
   flex-shrink: 0
}

.io-article-breadcrumb a:hover {
   text-decoration: underline;
   color: var(--io-cyan)
}

.io-article-breadcrumb span[aria-hidden] {
   color: #78b2be
}

.io-article-current {
   display: inline-block;
   max-width: 450px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   color: #d7e8eb
}

.io-article-kicker {
   display: flex;
   flex-wrap: wrap;
   gap: 10px;
   font-size: 11px;
   text-transform: uppercase;
   font-weight: 850;
   letter-spacing: .09em;
   margin: 0 0 14px !important;
   max-width: 870px
}

.io-article-kicker a {
   color: var(--io-cyan) !important;
   text-decoration: none;
   border-bottom: 1px solid rgba(8, 223, 223, .5)
}

.io-article-kicker a:hover {
   border-bottom-color: var(--io-cyan)
}

.io-article-title.wp-block-post-title {
   max-width: 930px !important;
   color: #fff !important;
   font-weight: 850;
   font-size: clamp(36px, 5vw, 62px);
   line-height: 1.065;
   letter-spacing: -.048em;
   margin: 0 0 14px !important;
   text-wrap: balance
}

.io-article-deck {
   color: #e0f2f4 !important;
   max-width: 800px !important;
   margin: 0 0 18px !important;
   font-size: clamp(15px, 1.55vw, 19px);
   line-height: 1.56
}

.io-article-deck p {
   font-size: inherit !important;
   line-height: inherit !important;
   color: inherit !important;
   margin: 0 !important
}

.io-article-deck .wp-block-post-excerpt__more-link {
   display: none
}

.io-article-meta {
   display: flex !important;
   flex-wrap: wrap;
   align-items: center;
   gap: 11px !important;
   margin: 0 0 20px !important;
   color: #d4ebef;
   font-size: 12px;
   font-weight: 650
}

.io-article-meta a {
   color: #f5ffff;
   text-decoration: underline;
   text-decoration-color: rgba(255, 255, 255, .35)
}

.io-article-meta p {
   margin: 0 !important;
   color: #86b7bf;
   font-size: 12px
}

.io-article-meta .wp-block-post-date {
   margin: 0 !important
}

.io-article-meta .wp-block-shortcode {
   margin: 0 !important
}

.io-article-image-wrap {
   width: min(calc(100% - 48px), var(--io-max));
   max-width: var(--io-max) !important;
   position: relative;
   margin: 0 auto !important;
   padding: 0 !important
}

.io-article-image-wrap:has(.io-article-featured-image img) {
   margin-top: -55px !important
}

.io-article-featured-image {
   width: 100%;
   margin: 0 !important;
   border: 4px solid #fff;
   border-radius: 14px;
   box-shadow: 0 16px 36px rgba(0, 24, 39, .17);
   overflow: hidden;
   background: #dcebef
}

.io-article-featured-image img {
   display: block;
   width: 100%;
   max-height: 525px;
   aspect-ratio: 16/8;
   object-fit: cover
}

.io-article-body-wrap {
   width: min(calc(100% - 48px), var(--io-max));
   max-width: var(--io-max) !important;
   padding: 38px 0 20px !important;
   margin: auto !important
}

.io-article-page .io-post-layout {
   width: 100%;
   max-width: none !important;
   display: grid !important;
   grid-template-columns: minmax(0, 1fr) 304px;
   align-items: stretch !important;
   gap: 48px !important;
   margin: 0 !important
}

.io-article-page .io-post-layout>.wp-block-group {
   min-width: 0;
   margin: 0 !important
}

.io-article-page .io-story-content {
   min-width: 0;
   max-width: none !important;
   font-size: 17px;
   line-height: 1.82;
   color: #223644
}

.io-article-page .io-story-content>.wp-block-post-content {
   max-width: none !important
}

.io-article-page .io-story-content .wp-block-post-content>:first-child {
   margin-top: 0 !important
}

.io-article-page .io-story-content .wp-block-post-content>p:first-of-type {
   font-size: 18px;
   line-height: 1.8;
   color: #344b58
}

.io-article-page .io-story-content h2 {
   color: var(--io-ink);
   font-size: clamp(26px, 2.9vw, 33px);
   font-weight: 830;
   letter-spacing: -.032em;
   line-height: 1.24;
   margin: 1.7em 0 .55em !important;
   padding-top: 6px;
   scroll-margin-top: 28px
}

.io-article-page .io-story-content h3 {
   color: #133c4e;
   font-size: clamp(21px, 2.1vw, 24px);
   font-weight: 770;
   letter-spacing: -.024em;
   margin: 1.45em 0 .45em !important;
   scroll-margin-top: 28px
}

.io-article-page .io-story-content a {
   color: #027e90;
   text-decoration: underline;
   text-underline-offset: 3px
}

.io-article-page .io-story-content blockquote {
   border-left: 4px solid var(--io-cyan);
   background: #eef9fa;
   border-radius: 0 9px 9px 0;
   padding: 18px 23px;
   margin: 25px 0
}

.io-article-page .io-story-content blockquote p {
   font-size: 19px;
   color: #183f50;
   margin: 0 !important
}

.io-article-page .io-story-content figure img {
   border-radius: 11px
}

.io-article-page .io-story-content figcaption {
   font-size: 12px;
   color: var(--io-muted)
}

.io-article-page .io-post-side {
   min-width: 0;
   align-self: stretch !important;
   position: relative
}

.io-article-page .io-sticky-sidebar {
   position: sticky !important;
   top: 20px !important;
   display: flex !important;
   flex-direction: column;
   gap: 15px !important;
   max-height: calc(100vh - 40px);
   overflow-y: auto;
   overscroll-behavior: contain;
   padding: 1px 7px 3px 1px;
   scrollbar-color: #b5c9d2 transparent;
   scrollbar-width: thin
}

.io-article-page .io-sticky-sidebar::-webkit-scrollbar {
   width: 5px
}

.io-article-page .io-sticky-sidebar::-webkit-scrollbar-thumb {
   border-radius: 10px;
   background: #b5c9d2
}

.io-article-page .io-sticky-sidebar>div,
.io-article-page .io-sticky-sidebar>nav {
   flex: 0 0 auto;
   margin: 0 !important
}

.io-article-page .io-aside-eyebrow {
   font-size: 10px !important;
   letter-spacing: .12em;
   font-weight: 850;
   color: #038b9c !important;
   line-height: 1.3;
   margin: 0 0 6px !important
}

.io-article-page .io-toc {
   background: #eef8fa;
   border: 1px solid #d9e9ed;
   border-top: 4px solid var(--io-cyan);
   border-radius: 12px;
   padding: 21px 19px 17px;
   margin: 0 !important
}

.io-article-page .io-toc-header {
   display: flex;
   flex-direction: column;
   gap: 1px;
   padding-bottom: 13px;
   border-bottom: 1px solid #d9e6e8;
   margin-bottom: 12px
}

.io-article-page .io-toc-header h2 {
   font-size: 19px !important;
   letter-spacing: -.025em;
   font-weight: 850;
   margin: 0 !important;
   line-height: 1.2;
   color: var(--io-ink)
}

.io-article-page .io-toc-count {
   font-size: 11px;
   color: #607982;
   margin-top: 3px
}

.io-article-page .io-toc-list {
   max-height: min(39vh, 330px);
   overflow-y: auto;
   scrollbar-width: thin;
   list-style: none;
   padding: 0 5px 0 0 !important;
   margin: 0 !important;
   display: flex;
   flex-direction: column;
   gap: 0 !important
}

.io-article-page .io-toc-list li {
   margin: 0 !important;
   padding: 0 !important;
   border-bottom: 1px solid rgba(0, 40, 60, .07);
   font-size: 13px;
   line-height: 1.45;
   list-style: none
}

.io-article-page .io-toc-list li:last-child {
   border-bottom: 0
}

.io-article-page .io-toc-list a {
   color: #315261;
   display: block;
   text-decoration: none;
   padding: 8px 8px 8px 12px;
   border-left: 3px solid transparent;
   border-radius: 0 5px 5px 0
}

.io-article-page .io-toc-list a:hover,
.io-article-page .io-toc-list a[aria-current="location"],
.io-article-page .io-toc-list a[aria-current="true"] {
   color: #006b7d;
   background: #def1f3;
   border-left-color: #039ba8;
   font-weight: 730;
   text-decoration: none
}

.io-article-page .io-toc-list .io-toc-depth-3 {
   padding-left: 13px !important;
   font-size: 12px
}

.io-article-page .io-toc-empty {
   font-size: 13px;
   margin: 0 !important
}

.io-article-page .io-sidebar-categories {
   background: #fff;
   border: 1px solid var(--io-line);
   border-radius: 12px;
   padding: 19px !important;
   margin: 0 !important
}

.io-article-page .io-sidebar-categories h2 {
   font-size: 18px;
   font-weight: 840;
   letter-spacing: -.025em;
   margin: 0 0 11px !important
}

.io-article-page .io-sidebar-categories ul {
   margin: 0 !important;
   padding: 0 !important;
   list-style: none
}

.io-article-page .io-sidebar-categories li {
   padding: 8px 0 !important;
   min-width: 0;
   font-size: 13px;
   line-height: 1.35;
   justify-content: space-between
}

.io-article-page .io-sidebar-categories li a {
   color: #234657;
   font-weight: 690;
   overflow-wrap: anywhere
}

.io-article-page .io-sidebar-categories li a:hover {
   color: #008b9c;
   text-decoration: underline
}

.io-share {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: 12px !important;
   min-width: 0;
   margin: 0 !important
}

.io-share-intro {
   display: flex;
   flex-direction: column;
   gap: 2px
}

.io-share-label {
   font-weight: 820;
   font-size: 12px;
   letter-spacing: .01em;
   color: var(--io-ink)
}

.io-share-help {
   font-size: 11px;
   color: var(--io-muted);
   line-height: 1.35
}

.io-share-actions {
   display: flex;
   align-items: center;
   flex-wrap: wrap;
   gap: 7px
}

.io-share-button {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 6px;
   min-height: 38px;
   padding: 7px 11px;
   border: 1px solid #cadde3;
   border-radius: 7px;
   background: #fff;
   color: #123b4e;
   font: 700 12px/1.2 Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
   text-decoration: none !important;
   cursor: pointer;
   transition: background .17s ease, border-color .17s ease, transform .17s ease;
   white-space: nowrap
}

.io-share-button svg {
   width: 17px;
   height: 17px;
   display: block;
   flex: none
}

.io-share-button:focus-visible {
   outline: 3px solid #08dfdf;
   outline-offset: 2px
}

.io-share-button:hover {
   background: #e8fafa;
   border-color: #58c4cf;
   transform: translateY(-1px);
   color: #006a7e
}

.io-share-button--copy.is-copied {
   border-color: #17a799;
   background: #e1faf4;
   color: #076457
}

.io-share--hero {
   gap: 15px !important;
   margin: 5px 0 0 !important
}

.io-share--hero .io-share-label {
   color: #d7eef1;
   text-transform: uppercase;
   font-size: 10px;
   letter-spacing: .09em
}

.io-share--hero .io-share-button {
   background: rgba(255, 255, 255, .08);
   border: 1px solid rgba(216, 244, 249, .26);
   color: #f1ffff;
   min-height: 35px;
   padding: 7px 10px
}

.io-share--hero .io-share-button:hover {
   background: #dafcff;
   color: #002839;
   border-color: var(--io-cyan)
}

.io-share--hero .io-share-button--tech svg {
   color: var(--io-cyan)
}

.io-share--sidebar {
   display: flex !important;
   flex-direction: column;
   align-items: stretch !important;
   gap: 10px !important;
   background: #f7fafb;
   border: 1px solid var(--io-line);
   border-radius: 12px;
   padding: 18px !important
}

.io-share--sidebar .io-share-label {
   font-size: 16px;
   font-weight: 850
}

.io-share--sidebar .io-share-actions {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 7px
}

.io-share--sidebar .io-share-button {
   padding: 9px 7px;
   font-size: 11px;
   min-width: 0
}

.io-share--sidebar .io-share-button--copy {
   grid-column: 1/-1
}

.io-share--footer {
   background: #f2fafb;
   border: 1px solid #d7eaed;
   border-radius: 12px;
   padding: 17px 18px !important;
   gap: 12px !important
}

.io-share--footer .io-share-label {
   font-size: 14px
}

.io-article-finish {
   margin: 40px 0 0 !important;
   padding-top: 16px;
   border-top: 1px solid var(--io-line)
}

.io-article-finish .io-article-finish-caption {
   font-size: 11px;
   font-weight: 850;
   letter-spacing: .1em;
   color: #018c9e;
   text-transform: uppercase;
   margin: 0 0 10px !important
}

.io-article-tags {
   font-size: 13px;
   margin: 6px 0 20px !important;
   color: var(--io-muted)
}

.io-article-tags a {
   font-weight: 720
}

.io-article-after {
   width: min(calc(100% - 48px), var(--io-max));
   max-width: var(--io-max) !important;
   padding: 0 0 50px !important
}

.io-article-previous-next {
   display: flex !important;
   gap: 20px !important;
   align-items: stretch;
   justify-content: space-between;
   border-top: 1px solid var(--io-line);
   border-bottom: 1px solid var(--io-line);
   margin: 8px 0 35px !important;
   padding: 18px 0
}

.io-article-previous-next a {
   color: #08788a;
   text-decoration: none;
   font-size: 13px;
   font-weight: 760
}

.io-article-previous-next a:hover {
   text-decoration: underline
}

.io-article-after .io-related-header {
   margin: 0 0 17px !important;
   gap: 15px !important
}

.io-article-after .io-related-header p {
   margin: 0 !important;
   font-size: 13px;
   font-weight: 800
}

.io-article-after .io-related-header a {
   color: #027c8d;
   text-decoration: none
}

.io-article-after .io-related-header a:hover {
   text-decoration: underline
}

.io-article-after .io-related-stories {
   margin: 0 !important
}

.io-article-after .io-related-stories .wp-block-post-template {
   display: grid !important;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 22px !important
}

.io-article-after .io-related-stories .io-card-image img {
   aspect-ratio: 16/9
}

@media(max-width:1080px) {
   .io-article-page .io-post-layout {
      grid-template-columns: minmax(0, 1fr) 280px;
      gap: 28px !important
   }

   .io-article-hero-inner {
      padding-bottom: 79px !important
   }

   .io-share--hero .io-share-button span {
      font-size: 11px
   }
}

@media(max-width:782px) {
   .io-article-hero {
      min-height: 300px
   }

   .io-article-hero-inner {
      width: min(calc(100% - 30px), var(--io-max));
      padding: 25px 0 73px !important
   }

   .io-article-title.wp-block-post-title {
      font-size: clamp(33px, 6vw, 49px)
   }

   .io-article-image-wrap {
      width: min(calc(100% - 30px), var(--io-max))
   }

   .io-article-image-wrap:has(.io-article-featured-image img) {
      margin-top: -42px !important
   }

   .io-article-body-wrap,
   .io-article-after {
      width: min(calc(100% - 30px), var(--io-max))
   }

   .io-article-page .io-post-layout {
      grid-template-columns: minmax(0, 1fr) !important;
      gap: 30px !important
   }

   .io-article-page .io-post-side {
      grid-row: 2
   }

   .io-article-page .io-sticky-sidebar {
      position: static !important;
      max-height: none;
      overflow: visible;
      padding: 0;
      display: grid !important;
      grid-template-columns: 1fr 1fr;
      gap: 15px !important
   }

   .io-article-page .io-sticky-sidebar .io-toc {
      grid-column: 1/-1
   }

   .io-article-page .io-sticky-sidebar .io-toc-list {
      max-height: 250px
   }

   .io-article-after .io-related-stories .wp-block-post-template {
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important
   }
}

@media(max-width: 634px) {
   .io-hero {
      background-size: cover;
   }
}

@media(max-width:580px) {
   .io-article-hero {
      background-image: linear-gradient(90deg, rgba(0, 24, 38, .99), rgba(0, 27, 43, .89) 72%, rgba(0, 27, 43, .72)), url('assets/images/cityscape.webp')
   }

   .io-article-hero-inner {
      padding: 21px 0 64px !important
   }

   .io-article-breadcrumb {
      font-size: 11px;
      margin-bottom: 20px;
      gap: 7px
   }

   .io-article-current {
      max-width: 190px
   }

   .io-article-title.wp-block-post-title {
      font-size: 34px;
      line-height: 1.08
   }

   .io-article-deck {
      font-size: 14px
   }

   .io-article-meta {
      gap: 8px !important
   }

   .io-share--hero {
      display: block !important
   }

   .io-share--hero .io-share-intro {
      margin-bottom: 10px
   }

   .io-share--hero .io-share-actions {
      gap: 6px
   }

   .io-share--hero .io-share-button {
      min-height: 37px;
      padding: 8px 9px
   }

   .io-share--hero .io-share-button span {
      font-size: 10px
   }

   .io-article-image-wrap:has(.io-article-featured-image img) {
      margin-top: -30px !important
   }

   .io-article-featured-image {
      border-width: 3px;
      border-radius: 10px
   }

   .io-article-featured-image img {
      aspect-ratio: 16/9
   }

   .io-article-body-wrap {
      padding-top: 27px !important
   }

   .io-article-page .io-story-content {
      font-size: 16px;
      line-height: 1.75
   }

   .io-article-page .io-story-content .wp-block-post-content>p:first-of-type {
      font-size: 17px
   }

   .io-article-page .io-sticky-sidebar {
      grid-template-columns: 1fr !important
   }

   .io-article-page .io-sticky-sidebar .io-toc {
      grid-column: auto
   }

   .io-share--footer {
      display: flex;
      flex-direction: column;
      align-items: stretch
   }

   .io-share--footer .io-share-actions {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr))
   }

   .io-share--footer .io-share-button--copy {
      grid-column: 1/-1
   }

   .io-article-after .io-related-stories .wp-block-post-template {
      grid-template-columns: 1fr !important
   }

   .io-article-previous-next {
      gap: 12px !important;
      flex-direction: column;
      align-items: start
   }
}

@media(prefers-reduced-motion:reduce) {
   .io-share-button {
      transition: none
   }

   .io-share-button:hover {
      transform: none
   }
}