/*
Theme Name: Naftemporiki TV
Theme URI: https://tv.naftemporiki.gr
Author: MINOANDESIGN
Author URI: https://www.minoandesign.gr
Description: Custom WordPress theme for Naftemporiki TV website 
Version: 1.0.0
License: Proprietary
Text Domain: naftemporiki-tv
*/
@charset "UTF-8";:root {
  --font-sans: var(--font-system-ui);
  --font-mono: var(--font-monospace-code);
  --font-system-ui: system-ui, sans-serif;
  --font-monospace-code: Dank Mono,Operator Mono, Inconsolata, Fira Mono, ui-monospace, SF Mono, Monaco, Droid Sans Mono, Source Code Pro, Cascadia Code, Menlo, Consolas, DejaVu Sans Mono, monospace;
}
/*! tailwindcss v4.1.12 | MIT License | https://tailwindcss.com */
@layer properties {
  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
    *, :before, :after, ::backdrop {
      --tw-rotate-x: initial;
      --tw-rotate-y: initial;
      --tw-rotate-z: initial;
      --tw-skew-x: initial;
      --tw-skew-y: initial;
      --tw-border-style: solid;
      --tw-shadow: 0 0 #0000;
      --tw-shadow-color: initial;
      --tw-shadow-alpha: 100%;
      --tw-inset-shadow: 0 0 #0000;
      --tw-inset-shadow-color: initial;
      --tw-inset-shadow-alpha: 100%;
      --tw-ring-color: initial;
      --tw-ring-shadow: 0 0 #0000;
      --tw-inset-ring-color: initial;
      --tw-inset-ring-shadow: 0 0 #0000;
      --tw-ring-inset: initial;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 #0000;
      --tw-blur: initial;
      --tw-brightness: initial;
      --tw-contrast: initial;
      --tw-grayscale: initial;
      --tw-hue-rotate: initial;
      --tw-invert: initial;
      --tw-opacity: initial;
      --tw-saturate: initial;
      --tw-sepia: initial;
      --tw-drop-shadow: initial;
      --tw-drop-shadow-color: initial;
      --tw-drop-shadow-alpha: 100%;
      --tw-drop-shadow-size: initial;
    }
  }
}

@layer theme {
  :root, :host {
    --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --spacing: .25rem;
    --default-transition-duration: .15s;
    --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    --default-font-family: var(--font-sans);
    --default-mono-font-family: var(--font-mono);
  }
}

@layer base {
  *, :after, :before, ::backdrop {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
  }

  ::file-selector-button {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
  }

  html, :host {
    -webkit-text-size-adjust: 100%;
    -moz-tab-size: 4;
      -o-tab-size: 4;
         tab-size: 4;
    line-height: 1.5;
    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
    font-feature-settings: var(--default-font-feature-settings, normal);
    font-variation-settings: var(--default-font-variation-settings, normal);
    -webkit-tap-highlight-color: transparent;
  }

  hr {
    height: 0;
    color: inherit;
    border-top-width: 1px;
  }

  abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
  }

  h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
  }

  a {
    color: inherit;
    -webkit-text-decoration: inherit;
    -webkit-text-decoration: inherit;
    -webkit-text-decoration: inherit;
    text-decoration: inherit;
  }

  b, strong {
    font-weight: bolder;
  }

  code, kbd, samp, pre {
    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
    font-feature-settings: var(--default-mono-font-feature-settings, normal);
    font-variation-settings: var(--default-mono-font-variation-settings, normal);
    font-size: 1em;
  }

  small {
    font-size: 80%;
  }

  sub, sup {
    vertical-align: baseline;
    font-size: 75%;
    line-height: 0;
    position: relative;
  }

  sub {
    bottom: -.25em;
  }

  sup {
    top: -.5em;
  }

  table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
  }

  :-moz-focusring {
    outline: auto;
  }

  progress {
    vertical-align: baseline;
  }

  summary {
    display: list-item;
  }

  ol, ul, menu {
    list-style: none;
  }

  img, svg, video, canvas, audio, iframe, embed, object {
    vertical-align: middle;
    display: block;
  }

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

  button, input, select, optgroup, textarea {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    background-color: #0000;
    border-radius: 0;
  }

  ::file-selector-button {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    background-color: #0000;
    border-radius: 0;
  }

  :where(select:is([multiple], [size])) optgroup {
    font-weight: bolder;
  }

  :where(select:is([multiple], [size])) optgroup option {
    padding-inline-start: 20px;
  }

  ::file-selector-button {
    margin-inline-end: 4px;
  }

  ::-moz-placeholder {
    opacity: 1;
  }

  ::placeholder {
    opacity: 1;
  }

  @supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) {
    ::-moz-placeholder {
      color: currentColor;
    }
    ::placeholder {
      color: currentColor;
    }

    @supports (color: color-mix(in lab, red, red)) {
      ::-moz-placeholder {
        color: color-mix(in oklab, currentcolor 50%, transparent);
      }
      ::placeholder {
        color: color-mix(in oklab, currentcolor 50%, transparent);
      }
    }
  }

  textarea {
    resize: vertical;
  }

  ::-webkit-search-decoration {
    -webkit-appearance: none;
  }

  ::-webkit-date-and-time-value {
    min-height: 1lh;
    text-align: inherit;
  }

  ::-webkit-datetime-edit {
    display: inline-flex;
  }

  ::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
  }

  ::-webkit-datetime-edit {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-year-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-month-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-day-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-hour-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-minute-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-second-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-millisecond-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-meridiem-field {
    padding-block: 0;
  }

  ::-webkit-calendar-picker-indicator {
    line-height: 1;
  }

  :-moz-ui-invalid {
    box-shadow: none;
  }

  button, input:where([type="button"], [type="reset"], [type="submit"]) {
    -webkit-appearance: button;
       -moz-appearance: button;
            appearance: button;
  }

  ::file-selector-button {
    -webkit-appearance: button;
       -moz-appearance: button;
            appearance: button;
  }

  ::-webkit-inner-spin-button {
    height: auto;
  }

  ::-webkit-outer-spin-button {
    height: auto;
  }

  [hidden]:where(:not([hidden="until-found"])) {
    display: none !important;
  }
}

@layer components;

@layer utilities {
  .visible {
    visibility: visible;
  }

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

  .fixed {
    position: fixed;
  }

  .static {
    position: static;
  }

  .sticky {
    position: sticky;
  }

  .order-0 {
    order: 0;
  }

  .order-1 {
    order: 1;
  }

  .container {
    width: 100%;
  }

  @media (min-width: 30rem) {
    .container {
      max-width: 30rem;
    }
  }

  @media (min-width: 40rem) {
    .container {
      max-width: 40rem;
    }
  }

  @media (min-width: 48rem) {
    .container {
      max-width: 48rem;
    }
  }

  @media (min-width: 64rem) {
    .container {
      max-width: 64rem;
    }
  }

  @media (min-width: 80rem) {
    .container {
      max-width: 80rem;
    }
  }

  @media (min-width: 96rem) {
    .container {
      max-width: 96rem;
    }
  }

  .\!inline {
    display: inline !important;
  }

  .block {
    display: block;
  }

  .flex {
    display: flex;
  }

  .grid {
    display: grid;
  }

  .hidden {
    display: none;
  }

  .inline {
    display: inline;
  }

  .list-item {
    display: list-item;
  }

  .table {
    display: table;
  }

  .table-column {
    display: table-column;
  }

  .table-row {
    display: table-row;
  }

  .min-h-20 {
    min-height: calc(var(--spacing) * 20);
  }

  .w-full {
    width: 100%;
  }

  .max-w-0 {
    max-width: calc(var(--spacing) * 0);
  }

  .max-w-full {
    max-width: 100%;
  }

  .rotate-360 {
    rotate: 360deg;
  }

  .transform {
    transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );
  }

  .cursor-default {
    cursor: default;
  }

  .cursor-move {
    cursor: move;
  }

  .cursor-pointer {
    cursor: pointer;
  }

  .cursor-text {
    cursor: text;
  }

  .resize {
    resize: both;
  }

  .flex-col {
    flex-direction: column;
  }

  .flex-row {
    flex-direction: row;
  }

  .flex-wrap {
    flex-wrap: wrap;
  }

  .items-center {
    align-items: center;
  }

  .justify-between {
    justify-content: space-between;
  }

  .gap-0 {
    gap: calc(var(--spacing) * 0);
  }

  .gap-1 {
    gap: calc(var(--spacing) * 1);
  }

  .gap-3 {
    gap: calc(var(--spacing) * 3);
  }

  .gap-4 {
    gap: calc(var(--spacing) * 4);
  }

  .gap-5 {
    gap: calc(var(--spacing) * 5);
  }

  .gap-6 {
    gap: calc(var(--spacing) * 6);
  }

  .rounded {
    border-radius: .25rem;
  }

  .border {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }

  .border-none {
    --tw-border-style: none;
    border-style: none;
  }

  .fill-current {
    fill: currentColor;
  }

  .ring {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .blur {
    --tw-blur: blur(8px);
    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
  }

  .brightness-1 {
    --tw-brightness: brightness(1%);
    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
  }

  .brightness-2 {
    --tw-brightness: brightness(2%);
    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
  }

  .brightness-3 {
    --tw-brightness: brightness(3%);
    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
  }

  .brightness-4 {
    --tw-brightness: brightness(4%);
    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
  }

  .brightness-5 {
    --tw-brightness: brightness(5%);
    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
  }

  .brightness-6 {
    --tw-brightness: brightness(6%);
    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
  }

  .brightness-7 {
    --tw-brightness: brightness(7%);
    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
  }

  .filter {
    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
  }

  .transition {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .select-all {
    -webkit-user-select: all;
    -moz-user-select: all;
         user-select: all;
  }

  .backface-hidden {
    backface-visibility: hidden;
  }

  @media (min-width: 30rem) {
    .xs\:order-0 {
      order: 0;
    }

    .xs\:order-1 {
      order: 1;
    }

    .xs\:max-w-0 {
      max-width: calc(var(--spacing) * 0);
    }

    .xs\:max-w-full {
      max-width: 100%;
    }
  }

  @media (min-width: 40rem) {
    .sm\:grid-cols-2 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (min-width: 64rem) {
    .lg\:hidden {
      display: none;
    }

    .lg\:grid-cols-3 {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
}

@property --tw-rotate-x {
  syntax: "*";
  inherits: false
}

@property --tw-rotate-y {
  syntax: "*";
  inherits: false
}

@property --tw-rotate-z {
  syntax: "*";
  inherits: false
}

@property --tw-skew-x {
  syntax: "*";
  inherits: false
}

@property --tw-skew-y {
  syntax: "*";
  inherits: false
}

@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}

@property --tw-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-inset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-inset-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-inset-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-ring-color {
  syntax: "*";
  inherits: false
}

@property --tw-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-inset-ring-color {
  syntax: "*";
  inherits: false
}

@property --tw-inset-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-ring-inset {
  syntax: "*";
  inherits: false
}

@property --tw-ring-offset-width {
  syntax: "<length>";
  inherits: false;
  initial-value: 0;
}

@property --tw-ring-offset-color {
  syntax: "*";
  inherits: false;
  initial-value: #fff;
}

@property --tw-ring-offset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-blur {
  syntax: "*";
  inherits: false
}

@property --tw-brightness {
  syntax: "*";
  inherits: false
}

@property --tw-contrast {
  syntax: "*";
  inherits: false
}

@property --tw-grayscale {
  syntax: "*";
  inherits: false
}

@property --tw-hue-rotate {
  syntax: "*";
  inherits: false
}

@property --tw-invert {
  syntax: "*";
  inherits: false
}

@property --tw-opacity {
  syntax: "*";
  inherits: false
}

@property --tw-saturate {
  syntax: "*";
  inherits: false
}

@property --tw-sepia {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-drop-shadow-size {
  syntax: "*";
  inherits: false
}

:root{
  --font-mono: var(--font-monospace-code);
  --font-monospace-code: Dank Mono,Operator Mono, Inconsolata, Fira Mono, ui-monospace, SF Mono, Monaco, Droid Sans Mono, Source Code Pro, Cascadia Code, Menlo, Consolas, DejaVu Sans Mono, monospace;
}

/* Variables */
:root {
  --xs: 22rem;
  --sm: 36rem;
  --md: 48rem;
  --lg: 64rem;
  --xl: 80rem;
  --xxl: 96rem;
  --xxxl: 1920px;
  --content-max: var(--xxl);
  --content-m: var(--gap);
  --blue: 206 100% 22%;
  --blue-black: 208 100% 5%;
  --blue-darker: 205 100% 8%;
  --blue-dark: 205 100% 12%;
  --blue-bright: 206 100% 40%;
  --blue-subtle: 205 16% 48%;
  --blue-light: 205 25% 75%;
  --blue-border: 205 43% 42%;
  --red: 356 100% 43%;
  --red-dark: 355 100% 35%;
  --red-bright: 350 100% 55% ;
  --white: 0 0% 100%;
  --white-accent: ;
  --black: 0 0% 0%;
  --black-accent: ;
  --body-bg: var(--blue-dark);
  --body-color: var(--white);
  --body-subtle: var(--blue-subtle);
  --body-light: var(--blue-light);
  --gradient-bg: radial-gradient(50% 65.38% at 50% 0%, hsl(var(--blue)) 0%, hsl(var(--blue-dark)) 100%);
  --gradient-card: linear-gradient(var(--gradient-angle, 180deg), hsl(var(--blue-dark) / 0) 0%, hsl(var(--blue-dark) / .75) 15%, hsl(var(--blue-dark)) 30%, hsl(var(--blue-darker)) 100%);
  --shadow-long:
          0 1px 0 0 hsl(var(--blue) / .15),
          0 4px 4px 0 hsl(var(--blue-black) / .15),
          0 2px 2px 0 hsl(var(--blue-black) / .15),
          0 6px 4px 0 hsl(var(--blue-black) / .15),
          0 10px 8px 0 hsl(var(--blue-black) / .15),
          0 16px 16px 0 hsl(var(--blue-black) / .15),
          0 24px 32px 0 hsl(var(--blue-black) / .15);
  --shadow-xl:
          0 20px 40px 0 hsl(var(--blue-black)),
          0 10px 40px 10px hsl(var(--blue-dark) / .5),
          0 10px 60px -5px hsl(var(--blue-dark) / .25),
          0 0 1px 1px hsl(var(--blue-dark) / .25) inset,
          0 0 200px 0 hsl(var(--blue-dark) / .15) inset;
  --border-width: 1px;
  --border-style: solid;
  --border-color: currentColor;
  --outline-width: .1em;
  --outline-style: solid;
  --outline-focus-color: hsl(var(--body-color) / .5);
  --transition-duration: .3s;
  --transition-delay: 0;
  --transition-easing: ease-in-out;
  --gap-xs: .25rem;
  --gap-s: .5rem;
  --gap: 1rem;
  --gap-m: 1.5rem;
  --gap-l: 3rem;
  --gap-xl: 5rem;
  --gap-xxl: 8rem;
  --gap-left: 4rem;
  --header-height: 5em;
  --link-transition: .2s ease-in-out;
  --swiper-pagination-color:hsl(var(--white)/1);
  --swiper-pagination-left: auto;
  --swiper-pagination-right: .5em;
  --swiper-pagination-bottom: 0;
  --swiper-pagination-top: auto;
  --swiper-pagination-fraction-color: inherit;
  --swiper-pagination-progressbar-bg-color: hsl(var(--white) / .25);
  --swiper-pagination-progressbar-size: .5em;
  --swiper-pagination-bullet-size: var(--swiper-pagination-bullet-base, 1em);
  --swiper-pagination-bullet-width: var(--swiper-pagination-bullet-base, 1em);
  --swiper-pagination-bullet-height: 1em;
  --swiper-pagination-bullet-inactive-color: hsl(var(--white)/1);
  --swiper-pagination-bullet-inactive-opacity: 0.2;
  --swiper-pagination-bullet-opacity: 1;
  --swiper-pagination-bullet-horizontal-gap: .15em;
  --swiper-pagination-bullet-vertical-gap: 1em;
  --swiper-pagination-bullet-border-radius: .5em;
  --swiper-navigation-color: var(--white);
}

:root {
  --font-sans: "Geologica", sans-serif;
}

@layer base, util, layout, comp;
@layer base {
  :root:has(.reset:active) * {
    animation-name: none;
  }
  body {
    font-weight: 100;
    line-height: 1.33;
  }
  .logo {
    z-index: 100;
  }
  .logo svg {
    transition: max-width 0s ease-in-out;
  }
  @media (max-width: 48rem) {
    .logo {
      margin-inline-start: var(--gap, 1rem);
    }
  }
  .logo-n {
    width: 3rem;
    height: auto;
    top: 0;
    z-index: 1000;
  }
  @media (min-width: 48rem) {
    .logo-n {
      position: fixed;
      transform: translateX(calc(var(--gap-left) * -1));
    }
  }
  .logo-n svg {
    box-shadow: var(--shadow-long);
    transition: height 0.3s ease-in-out;
    width: 100%;
    height: auto;
  }
  h1, h2, h3, h4, h5, h6,
  .h1, .h2, .h3, .h4, .h5, .h6 {
    font-weight: 500;
    display: block;
  }
  h1, .h1 {
    font-size: clamp(1.5rem, 5vw, 2rem);
  }
  h2, .h2 {
    font-size: clamp(1.375em, 4vw, 1.75em);
  }
  h3, .h3 {
    font-size: clamp(1.25rem, 3.5vw, 1.5rem);
  }
  h4, .h4 {
    font-size: clamp(1rem, 3vw, 1.25rem);
    flex-flow: row wrap;
  }
  .blue-bg {
    background-color: var(--body-subtle);
  }
  .text-subtle {
    color: var(--body-subtle);
  }
  .text-light {
    color: var(--body-light);
  }
  .date--published {
    opacity: 0.5;
    font-size: 0.8125em;
    display: block;
    line-height: 1;
    font-weight: 100;
  }
  .video .date--published:not(:first-child) {
    margin-block: var(--gap-s, 0.5em);
  }
  .post .date--published {
    margin-block-end: var(--gap-xs, 0.25em);
  }
  .meta .meta-list {
    font-size: 0.875em;
  }
  .meta .meta-item {
    margin-top: var(--gap-s, 0.5rem);
    display: flex;
    align-items: center;
    gap: var(--gap-xs, 0.25rem);
  }
  .meta [data-icon] {
    color: hsl(var(--body-subtle)/1);
  }
}
@layer util {
  .hidden {
    display: none !important;
  }
  .w--full {
    width: 100%;
    text-align: center;
    justify-content: center;
  }
  .color--subtle {
    color: hsl(var(--body-subtle)/1);
  }
  .color--light {
    color: hsl(var(--body-light)/1);
  }
}
@layer layout {
  body {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: min-content 1fr min-content;
    min-height: 100svh;
    background: hsl(var(--body-bg)/1);
    color: hsl(var(--body-color)/1);
  }
  body:after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 50dvh;
    background: var(--gradient-bg);
    z-index: -99;
  }
  body:has(.btn--menu[aria-expanded=true]), body:has(.search-overlay:not(.search-overlay-alt)[aria-expanded=true]) {
    overflow-y: hidden;
  }
  main {
    display: flex;
    flex-flow: column nowrap;
    gap: clamp(4rem, 5vw, 5rem);
    padding-block: var(--gap-m, 1.5rem);
    margin-bottom: clamp(4rem, 5vw, 5rem);
  }
  @media (min-width: 64rem) {
    main {
      padding-block: var(--gap-l, 3rem);
    }
  }
  .header--main {
    z-index: 100;
    min-height: 5rem;
    position: sticky;
    top: 0;
  }
  .header--main:before {
    content: "";
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 6rem;
    backdrop-filter: blur(10px);
    z-index: -1;
    -webkit-mask-image: -webkit-gradient(linear, left center, left bottom, from(rgb(0, 0, 0)), to(rgba(0, 0, 0, 0)));
            mask-image: -webkit-gradient(linear, left center, left bottom, from(rgb(0, 0, 0)), to(rgba(0, 0, 0, 0)));
  }
  .header--main:has(.search-overlay[aria-expanded=true]) .logo, .header--main:has(.search-overlay[aria-expanded=true]) .nav-wrapper {
    display: none;
  }
  .header--main:has(.search-overlay[aria-expanded=true]) .btn--search,
  .header--main:has(.search-overlay[aria-expanded=true]) .btn--menu {
    z-index: 1;
  }
  .footer--main {
    z-index: 1;
    padding-block: var(--gap-m, 1.5rem);
    padding-inline: var(--gap-m, 1.5rem);
    background: radial-gradient(50% 100% at 50% 0%, hsla(var(--blue)/0.5) 0%, hsla(var(--blue-dark)/0.5) 100%);
  }
  .footer--main:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 5rem;
    opacity: 0.5;
    transform: translateY(-100%) scaleY(-1);
    background: radial-gradient(50% 100% at 50% 0%, hsla(var(--blue-black)/0.5) 0%, hsla(var(--blue-dark)/0.5) 100%);
    z-index: -2;
  }
  .footer--main:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    opacity: 0.25;
    background: radial-gradient(50% 100% at 50% 0%, #209DDF 50%, rgba(0, 24, 41, 0) 100%);
    z-index: -1;
  }
  .footer--main > .wrapper {
    display: flex;
    flex-flow: column nowrap;
    row-gap: var(--gap-l, 3rem);
  }
  @media (max-width: 64rem) {
    .footer--main > .wrapper {
      row-gap: var(--gap-m, 1.5rem);
    }
  }
  .footer--main small {
    color: hsl(var(--body-subtle)/1);
  }
  .footer--main .grid--flex {
    justify-content: space-between;
  }
  @media (max-width: 64rem) {
    .footer--main .grid--flex {
      flex-flow: column nowrap;
      align-items: center;
      gap: var(--gap-m, 1.5rem);
    }
    .footer--main .grid--flex.grid--copy {
      gap: var(--gap, 1rem);
    }
  }
  .footer--main .nav-link {
    color: hsl(var(--body-light)/1);
  }
  .footer--main .nav-link:hover {
    color: hsl(var(--body-color)/1);
    -webkit-text-decoration: underline 0.05em solid;
            text-decoration: underline 0.05em solid;
    text-underline-position: under;
    transition: color var(--link-transition), background-color var(--link-transition), -webkit-text-decoration var(--link-transition);
    transition: text-decoration var(--link-transition), color var(--link-transition), background-color var(--link-transition);
    transition: text-decoration var(--link-transition), color var(--link-transition), background-color var(--link-transition), -webkit-text-decoration var(--link-transition);
  }
  .footer--main .nav-sub-link {
    color: hsl(var(--body-subtle)/1);
    white-space: nowrap;
  }
  .footer--main .nav-sub-link:hover {
    color: hsl(var(--body-light)/1);
  }
  .footer--main .nav-list-secondary {
    font-size: 0.875em;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
  }
  .wrapper {
    position: relative;
    margin-inline: max(var(--content-m), 50cqw - var(--content-max) / 2);
    width: min(var(--content-max), 100% - var(--content-m) * 2);
  }
  .header--main > .wrapper {
    width: min(var(--content-max), 100vw - (var(--content-m) * 2 + 1rem));
  }
  @media (min-width: 48rem) {
    .wrapper {
      padding-inline-start: var(--gap-left);
      --content-m: var(--gap-m, 1.5rem);
    }
  }
  .wrapper.w-full {
    margin-inline: min(0px, var(--w) / 2 - 50cqw);
    max-width: none;
  }
  .carousel .wrapper, aside .wrapper {
    margin-inline: min(0px, var(--w) / 2 - 50cqw + var(--m));
    padding-inline: var(--gap, 1rem);
  }
  .swiper .wrapper {
    padding-inline: var(--gap, 1rem);
  }
  .swiper--shows .wrapper {
    padding-inline: var(--gap-m, 1.5rem);
  }
  .section {
    width: 100%;
    position: relative;
  }
  .section > .wrapper {
    display: flex;
    flex-flow: column nowrap;
  }
  .section-title {
    font-size: clamp(1.125rem, 1vw, 1.25rem);
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.15em;
    gap: 0.25em;
    margin-block: 0 0.5em;
    text-transform: uppercase;
  }
  .results-header .section-title {
    margin-block: 0;
  }
  .section-title:is(h1), .section-title.h1, .section-title:is(h2), .section-title.h2 {
    font-size: clamp(1.375rem, 3vw, 1.5rem);
  }
  .section-title:is(h1):first-child, .section-title.h1:first-child, .section-title:is(h2):first-child, .section-title.h2:first-child {
    margin-block: 0 1em;
  }
  .section-title:before {
    content: "❚";
    color: hsl(var(--red)/1);
    padding-right: 0.25em;
    font-size: 1.1em;
  }
  .section--videos {
    display: flex;
    flex-flow: column nowrap;
  }
  .section--videos .content {
    flex: 1;
  }
  .section--cover {
    display: flex;
    flex-flow: column nowrap;
    z-index: 1;
    margin-block: -5rem 2.5rem;
    padding-block: 6rem 0;
    overflow: hidden;
    container-type: inline-size;
  }
  .section--cover:has(.section-bg:not(:empty)) {
    background-color: hsl(var(--body-bg)/1);
  }
  @container (width > 64em) {
    .section--cover:before {
      --gradient-angle: 90deg;
    }
  }
  .section--cover iframe {
    z-index: 10;
  }
  .section--cover .section-bg {
    position: absolute;
    z-index: -2;
    top: 0;
    width: auto;
    height: 100%;
    min-height: 100%;
    max-width: var(--xxxl, 1920px);
  }
  .section--cover .section-bg.skin {
    left: 0;
    right: 0;
    max-width: none;
  }
  .section--cover .section-bg.skin img {
    max-width: var(--max-skin-width, none);
  }
  .section--cover .section-bg img {
    margin-inline: auto;
    -o-object-fit: cover;
       object-fit: cover;
    width: 100%;
    min-height: 100%;
  }
  .section--cover.section--video:before, .section--cover.section--live:before, .section--cover.section--show:before {
    content: "";
    position: absolute;
    z-index: 0;
    aspect-ratio: 1/1;
    top: 0;
    right: 0;
    left: auto;
    height: 100%;
    width: 100%;
    --gradient-angle: 180deg;
    background: linear-gradient(var(--gradient-angle, 90deg), hsl(var(--blue-dark)/0) 33%, hsl(var(--blue-dark)/0.9) 66%, hsl(var(--blue-dark)/1) 100%);
  }
  @container (width > 36rem) {
    .section--cover.section--video:before, .section--cover.section--live:before, .section--cover.section--show:before {
      background: linear-gradient(var(--gradient-angle, 90deg), hsl(var(--blue-dark)/0) 80%, hsl(var(--blue-dark)/1) 100%);
    }
  }
  .section--cover.section--video:after, .section--cover.section--live:after, .section--cover.section--show:after {
    content: "";
    position: absolute;
    z-index: -2;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    --gradient-angle: 0deg;
    background: linear-gradient(var(--gradient-angle, 90deg), hsl(var(--blue-dark)/0) 90%, hsl(var(--blue-dark)/0.5) 100%);
  }
  .section--cover.section--show .section-bg:after {
    content: "";
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
  }
  @container (width > 40em) {
    .section--cover.section--show .section-bg:after {
      background: linear-gradient(var(--gradient-angle, 90deg), hsl(var(--blue-dark)/0) 80%, hsl(var(--blue-dark)/1) 100%);
    }
  }
  .section--cover.section--video .section-bg:after {
    content: "";
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    background: linear-gradient(var(--gradient-angle, 180deg), hsl(var(--blue-dark)/0) 50%, hsl(var(--blue-dark)/1) 80%, hsl(var(--blue-dark)/1) 100%);
  }
  @container (width > 40em) {}
  .section--shows aside {
    border-radius: 0.5em;
  }
  .nav {
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-end;
    flex: 1 0 0%;
  }
  .nav-wrapper {
    display: flex;
  }
  .footer .nav-wrapper {
    justify-content: flex-end;
    flex: 1 0 auto;
  }
  @media (max-width: 64rem) {
    .footer .nav-wrapper {
      flex-flow: column nowrap;
      align-items: center;
      gap: var(--gap-m, 1.5rem);
    }
  }
  .header .nav-wrapper {
    transition: none;
  }
  @media (max-width: 64rem) {
    .header .nav-wrapper {
      background: hsl(var(--blue-dark)/1) var(--gradient-bg) 0 -5rem;
      background-repeat: no-repeat;
      transform: translateY(0);
      opacity: 1;
      flex-flow: column nowrap;
      align-items: center;
      justify-content: space-around;
      position: fixed;
      width: 100%;
      max-height: 100svh;
      overflow-y: auto;
      left: 0;
      right: 0;
      bottom: 0;
      top: 0;
      padding-top: 5rem;
      z-index: 10;
      transition: opacity 0.3s ease-in-out;
    }
  }
  .nav-list {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
  }
  @media (max-width: 64rem) {
    .header .nav-list-site, .header .nav-list-secondary {
      flex-flow: column nowrap;
      align-items: center;
      justify-content: center;
      width: 100%;
    }
    .header .nav-list-site [data-icon], .header .nav-list-secondary [data-icon] {
      display: none;
    }
  }
  .nav-list-site [data-icon] {
    display: none;
  }
  @media (max-width: 64rem) {
    .footer .nav-list-site {
      flex: 1;
      flex-wrap: wrap;
      row-gap: var(--gap-m, 1.5rem);
      justify-content: center;
    }
  }
  .header .nav-list-secondary {
    display: none;
  }
  @media (max-width: 64rem) {
    .header .nav-list-secondary {
      display: flex;
    }
  }
  .nav-list-soc span {
    display: none;
  }
  @media (max-width: 64rem) {
    .header .nav-list-soc {
      flex-flow: row nowrap;
    }
  }
  @media (max-width: 64rem) {
    .header .nav-item {
      width: 100%;
      text-align: center;
      display: block;
    }
  }
  @media (min-width: 64rem) {
    .header .nav-icon [data-icon] {
      display: block;
    }
    .header .nav-icon span {
      display: none;
    }
  }
  .nav-link {
    --link-bg-color: var(--blue-bright);
    --link-bg-opacity: 0;
    font-weight: 300;
    line-height: 1.25;
    padding-inline: 0.5em;
  }
  .footer .nav-link {
    font-size: 0.875em;
  }
  .header .nav-link {
    background-color: hsl(var(--link-bg-color)/var(--link-bg-opacity));
    padding: 2em 0.75em 1em;
  }
  @media (max-width: 64rem) {
    .header .nav-link {
      padding: 1em 1.5em;
      text-align: center;
      display: block;
    }
  }
  @media (max-width: 48rem) {
    .header .nav-link {
      padding: 0.75em 1.25em;
      text-align: center;
      display: block;
    }
  }
  @media (max-width: 64rem) {
    .nav--main .nav-list-secondary .nav-link {
      font-weight: 100;
      font-size: clamp(1em, 3.5vw, 1.25em);
      padding: 0.75em 1em;
      text-align: center;
      display: block;
      color: hsl(var(--blue-light)/1);
    }
    .header .nav--main .nav-list-secondary .nav-link {
      text-transform: uppercase;
    }
  }
  .nav-link.primary {
    --link-bg-color: var(--red);
  }
  .nav-link.live span:before {
    content: "•";
    display: inline-flex;
    scale: 1.25;
    color: hsl(var(--red)/1);
    padding-right: 0.25em;
  }
  .nav-link[aria-current=page] {
    --link-bg-opacity: .5;
    --link-bg-color: var(--blue-bright);
  }
  .header .nav-link[aria-current=page] {
    box-shadow: var(--shadow-long);
  }
  .header .nav-link[aria-current=page].primary {
    background-color: hsl(var(--red)/1);
    color: hsl(var(--white)/1);
  }
  .header .nav-link[aria-current=page].primary span:before {
    color: hsl(var(--white)/1);
  }
  .nav-link:hover {
    --link-bg-opacity: .5;
  }
  .nav-link:hover.primary {
    --link-bg-opacity: .5;
  }
  .nav-link span {
    font-size: 1.125em;
  }
  .header .nav-list-site .nav-link span {
    white-space: nowrap;
  }
  @media (max-width: 64rem) {
    .header .nav-list-site .nav-link span {
      font-size: clamp(1.75em, 1.5vw, 2em);
    }
  }
  .nav-link [data-icon] {
    font-size: 1.5em;
  }
  @media (max-width: 64rem) {
    .header .nav-list-site .nav-link [data-icon] {
      font-size: 2.5em;
    }
  }
  .nav-link [data-icon="mdi:youtube"] {
    scale: 1.3125;
  }
  @media (max-width: 64rem) {
    .nav .btn--menu[aria-expanded=false] ~ .nav-wrapper {
      background: transparent;
      transform: translateY(-200%);
      opacity: 0;
    }
  }
  .grid, .grid-aside {
    display: grid;
    gap: var(--gap-m, 1.5rem);
    -moz-column-gap: var(--gap-m, 1.5rem);
         column-gap: var(--gap-m, 1.5rem);
    width: 100%;
  }
  .grid aside, .grid-aside aside {
    grid-area: aside;
    height: -moz-max-content;
    height: max-content;
  }
  @media (width > 48rem) {
    .grid aside, .grid-aside aside {
      position: sticky;
      top: var(--gap-m, 1.5rem);
    }
  }
  .grid aside.player-aside, .grid-aside aside.player-aside {
    height: 100%;
  }
  .grid aside.has--sticky, .grid-aside aside.has--sticky {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    min-height: 600px;
    height: 100%;
    margin-bottom: var(--gap-xl, 5rem);
  }
  .grid aside.has--sticky .is-sticky, .grid-aside aside.has--sticky .is-sticky {
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
    align-items: center;
    gap: var(--gap-m, 1.5rem);
  }
  .grid aside.has--sticky > *, .grid-aside aside.has--sticky > * {
    width: 100%;
  }
  @media (width > 48rem) {
    .grid aside.has--sticky > *, .grid-aside aside.has--sticky > * {
      top: var(--gap-m, 1.5rem);
      position: sticky;
    }
  }
  .grid {
    display: grid;
    gap: var(--gap-m, 1.5rem);
    -moz-column-gap: var(--gap-m, 1.5rem);
         column-gap: var(--gap-m, 1.5rem);
    width: 100%;
  }
  .grid--flex {
    container-type: inline-size;
    flex: 1 0 auto;
    display: flex;
    flex-flow: row wrap;
    gap: var(--gap-m, 1.5rem);
  }
  .grid--flex aside {
    position: relative;
    flex: 0 0 100%;
    height: -moz-max-content;
    height: max-content;
    top: 0;
  }
  @container (width > 48em) {
    .grid--flex aside {
      width: min(300px, 100%);
      flex: 0 0 auto;
    }
  }
  .grid--flex .content {
    flex: 1;
  }
  .grid-aside {
    display: grid;
    gap: var(--gap-m, 1.5rem);
    -moz-column-gap: var(--gap-m, 1.5rem);
         column-gap: var(--gap-m, 1.5rem);
    max-width: 100%;
    grid-template-areas: "aside" "content" "footer";
    grid-template-columns: 1fr;
  }
  .grid-aside-left {
    grid-template-areas: "aside" "content" "footer";
  }
  @media (min-width: 48rem) {
    .grid-aside-left {
      grid-template-columns: 300px 1fr;
      grid-template-areas: "aside content" "footer footer";
    }
  }
  .grid-aside-right {
    grid-template-areas: "content" "aside" "footer";
  }
  @media (min-width: 48rem) {
    .grid-aside-right {
      grid-template-columns: 1fr 300px;
      grid-template-areas: "content aside" "footer footer";
    }
  }
  .grid-aside > .content, .grid-aside-left > .content, .grid-aside-right > .content {
    grid-area: content;
  }
  .grid--videos {
    gap: var(--gap-m, 1.5rem);
  }
  @media (width >= 36rem) {
    .grid--videos {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  @media (width >= 80rem) {
    .grid--videos {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  .grid--shows {
    display: grid;
    row-gap: var(--gap-l, 3rem);
  }
  @media (width >= 48rem) {
    .grid--shows {
      row-gap: var(--gap-xl, 5rem);
    }
  }
  .footer--main .grid--copy {
    display: flex;
    flex-flow: row wrap;
    gap: var(--gap-sm, 1rem);
    justify-content: center;
  }
  @media (width >= 80rem) {
    .footer--main .grid--copy {
      flex: 1 0 auto;
      justify-content: flex-start;
    }
  }
  .grid--footnote {
    display: flex;
    flex-flow: column;
    gap: var(--gap-sm, 0.75rem);
  }
  @media (width >= 80rem) {
    .grid--footnote {
      flex-flow: row wrap;
    }
  }
  .grid--post {
    --prose-space: 1em;
    --content-max: 68ch;
    grid-template-columns: [full-width-start] minmax(var(--content-m), 1fr) [extended-start] minmax(0, var(--content-m)) [content-start] min(var(--content-max), 100% - var(--content-m) * 2) [content-end] minmax(0, var(--content-m)) [extended-end] minmax(var(--content-m), 1fr) [full-width-end];
  }
  .grid--post, .grid--post .subgrid {
    display: grid;
    row-gap: var(--gap-m, 1.5rem);
  }
  .grid--post > *, .grid--post .subgrid > * {
    grid-column: full-width;
  }
  @media (min-width: 80rem) {
    .grid--post > *, .grid--post .subgrid > * {
      grid-column: content;
    }
    .grid--post > *.--extended, .grid--post .subgrid > *.--extended {
      grid-column: extended;
    }
    .grid--post > *.--full-width, .grid--post .subgrid > *.--full-width {
      grid-column: full-width;
    }
  }
  .grid--post .subgrid {
    grid-column: full-width;
    grid-template-columns: subgrid;
  }
  @media (min-width: 80em) {
    .grid--post .--aside-left {
      grid-column: full-width-start;
    }
  }
}
@layer comp {
  .btn {
    padding: 0.5em 1.5em;
    background-color: hsl(var(--blue)/1);
    font-weight: 100;
    line-height: 1;
    display: flex;
    flex-flow: row nowrap;
    width: -moz-fit-content;
    width: fit-content;
    align-items: center;
    transition: color, background-color, opacity, text-decoration-color;
    transition-duration: 0.2s;
    transition-timing-function: ease-in-out;
  }
  .btn.has--icon {
    padding: 0.5em 2em 0.5em 1em;
  }
  .btn em {
    font-style: normal;
    font-weight: 700;
  }
  .btn.size--small {
    font-size: 0.75em;
    padding: 0.75em 1em 0.675em;
  }
  .btn.rounded {
    border-radius: 5em;
  }
  .btn--primary {
    --hover-color: var(--red-bright);
    background-color: hsl(var(--red)/1);
  }
  .btn--primary:focus {
    outline: 0.375em solid hsl(var(--hover-color)/0.5);
  }
  .btn--primary:hover {
    background-color: hsl(var(--hover-color)/1);
    box-shadow: 0 0 0.25em 0 hsl(var(--hover-color)/0.5), 0 0 1em 0 hsl(var(--hover-color)/0.5);
  }
  .btn--secondary {
    --hover-color: var(--blue-bright);
    background-color: hsl(var(--blue)/1);
  }
  .btn--secondary:focus {
    outline: 0.375em solid hsl(var(--hover-color)/0.5);
  }
  .btn--secondary:hover {
    background-color: hsl(var(--hover-color)/1);
    box-shadow: 0 0 0.25em 0 hsl(var(--hover-color)/0.5), 0 0 1em 0 hsl(var(--hover-color)/0.5);
  }
  .btn--outlined {
    --hover-color: var(--white);
    background-color: transparent;
    color: hsl(var(--blue-light)/1);
    border: 1px solid currentColor;
  }
  .btn--outlined:focus {
    outline: 0.375em solid hsl(var(--hover-color)/0.125);
    background-color: hsl(var(--hover-color)/0.25);
  }
  .btn--outlined:hover, .btn--outlined:focus {
    color: hsl(var(--hover-color)/1);
    background-color: hsl(var(--hover-color)/0.1);
  }
  .btn--outlined:active {
    color: hsl(var(--blue-dark)/1);
    background-color: hsl(var(--hover-color)/1);
  }
  .btn--outlined:hover {
    box-shadow: 0 0 0.25em 0 hsl(var(--hover-color)/0.25), 0 0 1em 0 hsl(var(--hover-color)/0.25);
  }
  .btn--overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    font-size: 0;
  }
  .btn--ghost {
    line-height: 1;
    padding: 0;
    background-color: transparent;
    letter-spacing: 0.05em;
    -webkit-text-decoration: 1px underline transparent;
            text-decoration: 1px underline transparent;
  }
  .btn--ghost:hover {
    text-decoration-color: currentColor;
  }
  .btn--icon {
    padding: 0.5em;
    border-radius: 50%;
  }
  .btn--search, .btn--close, .btn--menu {
    background-color: transparent;
    padding: 2em 0.75em 1em;
    align-self: flex-start;
  }
  .btn--search [data-icon], .btn--close [data-icon], .btn--menu [data-icon] {
    display: block;
    font-size: 1.5em;
  }
  @media (max-width: 64rem) {
    .btn--search, .btn--close, .btn--menu {
      padding: var(--gap-m, 1.5rem) var(--gap-xs, 0.25rem);
      order: 1;
      z-index: 11;
      position: relative;
    }
    .btn--search [data-icon], .btn--close [data-icon], .btn--menu [data-icon] {
      font-size: 2rem;
    }
  }
  .btn--close {
    display: none;
  }
  .btn--close[aria-expanded=true] {
    display: flex;
  }
  @media (min-width: 64rem) {
    .btn--search {
      order: 99;
    }
  }
  .btn--menu .inactive, .btn--search .inactive {
    display: none;
  }
  .btn--menu .active, .btn--search .active {
    display: flex;
  }
  .btn--menu[aria-expanded=true], .btn--search[aria-expanded=true] {
    background-color: hsl(var(--red)/1);
    box-shadow: var(--shadow-long);
  }
  .btn--menu[aria-expanded=false] .active, .btn--search[aria-expanded=false] .active {
    display: none;
  }
  .btn--menu[aria-expanded=false] .inactive, .btn--search[aria-expanded=false] .inactive {
    display: flex;
  }
  .btn--menu {
    display: none;
  }
  @media (max-width: 64rem) {
    .btn--menu {
      display: flex;
      order: 99;
    }
  }
  .btn.w--full {
    width: 100%;
  }
  .list--share {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    gap: var(--gap-s, 0.5rem);
  }
  .list-label {
    font-size: 0.75em;
    font-weight: 100;
    letter-spacing: 0.15em;
  }
  .list-item--icon a {
    display: flex;
    flex-flow: row nowrap;
    gap: 1rem;
    align-items: center;
    border-radius: 50%;
    padding: 0.5em;
    aspect-ratio: 1;
    border: 1px solid hsl(var(--blue-border)/0.75);
    transition: all 0.2s ease-in-out;
  }
  .list-item--icon a svg {
    fill: currentColor;
    aspect-ratio: 1/1;
    width: 1em;
  }
  .list-item--icon a:hover, .list-item--icon a:focus, .list-item--icon a:active {
    border-color: hsl(var(--body-color)/1);
    background-color: hsl(var(--body-color)/1);
    color: hsl(var(--blue-black)/1);
  }
  .embed-wrapper {
    display: flex;
    justify-content: center;
  }
  .embed-wrapper > * {
    aspect-ratio: var(--aspect-ratio, 16/9);
    width: 100% !important;
  }
  .show {
    position: relative;
    z-index: 1;
    overflow: hidden;
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-end;
    container-type: inline-size;
    width: 100%;
    max-height: 100svh;
    background-color: hsl(var(--blue-dark)/1);
  }
  .intro .show {
    height: 100%;
  }
  @media (min-width: 64rem) {
    .intro .show {
      aspect-ratio: 16/9;
    }
  }
  @media (min-width: 36rem) {
    aside .show {
      border-radius: 0.5em;
    }
  }
  .swiper .show {
    box-shadow: none;
  }
  .carousel .show {
    aspect-ratio: 3/4;
    border-radius: 0.5em;
  }
  @media (max-width: 36rem) {
    .carousel .show {
      aspect-ratio: 1/1;
    }
  }
  .show-wrapper {
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-end;
    padding-inline: var(--gap, 1rem);
  }
  @media (width < 48em) {
    .show-wrapper {
      --gradient-angle: 180deg;
      background: linear-gradient(var(--gradient-angle, 90deg), hsl(var(--blue-dark)/0) 80%, hsl(var(--blue-dark)/1) 100%);
    }
  }
  .intro .show-wrapper {
    padding-inline: var(--gap-m, 1.5rem);
  }
  @media (60rem > width > 48rem) {
    .intro .show-wrapper {
      --gradient-angle: -150deg;
      background: linear-gradient(var(--gradient-angle), hsl(var(--blue-dark)/0) 33%, hsl(var(--blue-dark)/1) 100%);
    }
  }
  .show-image {
    position: absolute;
    z-index: -1;
    top: 0;
    right: 0;
    bottom: 0;
    aspect-ratio: 4/3;
    width: 100%;
    height: auto;
    overflow: hidden;
  }
  .show-image img {
    -o-object-fit: cover;
       object-fit: cover;
    max-width: var(--xxl, 1536px);
    width: 100%;
  }
  @container (width > 48rem) {
    .show-image {
      aspect-ratio: 1/1;
      width: auto;
      height: 100%;
    }
    .show-image img {
      height: 100%;
    }
  }
  @container (width > 80rem) {
    .show-image {
      aspect-ratio: 4/3;
    }
  }
  @container (width > 100rem) {
    .show-image {
      aspect-ratio: 16/9;
    }
  }
  aside .show-image, .carousel .show-image {
    width: 100%;
  }
  aside .show-image img, .carousel .show-image img {
    aspect-ratio: 4/3;
  }
  .show-image:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    --gradient-angle: 180deg;
    background: linear-gradient(var(--gradient-angle, 90deg), hsl(var(--blue-dark)/0) 50%, hsl(var(--blue-dark)/1) 100%);
  }
  @container (width > 36em) {
    .show-image:before {
      --gradient-angle: -90deg;
    }
  }
  @container (width <= 48em) {
    .swiper .show-image:before {
      --gradient-angle: 180deg;
    }
  }
  @container (width > 100em) {
    .show-image:before {
      aspect-ratio: 16/9;
      width: auto;
      left: auto;
    }
  }
  aside .show-image:before, .carousel .show-image:before {
    --gradient-angle: 180deg;
    background: linear-gradient(var(--gradient-angle, 180deg), hsl(var(--blue-dark)/0) 50%, hsl(var(--blue-dark)/0.3) 70%, hsl(var(--blue-dark)/0.6) 80%, hsl(var(--blue-dark)/0.9) 90%, hsl(var(--blue-dark)/1) 100%);
  }
  @container (40rem <= width <= 64rem) {
    aside .show-image:before {
      --gradient-angle: -90deg ;
    }
  }
  .show-content, .show-card {
    display: grid;
    gap: 1em;
    grid-auto-rows: 1fr auto auto;
  }
  .carousel .show-content, .carousel .show-card {
    gap: var(--gap-s, 0.5rem);
  }
  @media (min-width: 48rem) {
    aside .show-content, aside .show-card {
      gap: var(--gap-s, 0.5rem);
    }
  }
  .show-card {
    align-items: flex-end;
    padding-block: var(--gap-m, 1.5rem);
    padding-top: 30%;
    width: 50%;
  }
  @media (min-width: 64rem) {
    aside .show-card {
      aspect-ratio: 3/4;
      padding-top: initial;
    }
  }
  @container (width < 40em) {
    .show-card {
      margin-top: 33%;
      width: 100%;
    }
  }
  .show-header {
    flex: 1;
  }
  .intro .show-header {
    font-size: clamp(1.125em, 2.5vw, 1.75em);
  }
  .intro .show-content {
    font-size: clamp(1.125em, 2vw, 1.25em);
  }
  .show-title {
    font-size: 1.75em;
    font-weight: 100;
    line-height: 0.925;
  }
  .show-title, .show-title a {
    display: flex;
    flex-flow: var(--flow-dir, column) nowrap;
    gap: 0.1em;
  }
  .program-card .show-title, .program-card .show-title a {
    flex-wrap: wrap;
  }
  @container (width > 36rem) {}
  .show-title em {
    font-style: normal;
    font-weight: 800;
  }
  .show-title a > * {
    transform: skewX(0);
    transform-origin: 0;
    transition: all 0.2s ease-out;
    -webkit-text-decoration: underline 0.025em dashed transparent;
            text-decoration: underline 0.025em dashed transparent;
  }
  .show-title a:hover > * {
    transform: skewX(-0.04turn);
    text-decoration-color: currentColor;
  }
  @container (width > 36rem) {
    .show-title {
      font-size: clamp(1.5em, 5vw, 2em);
    }
  }
  .show-title.h2 {
    font-size: clamp(1.25em, 4vw, 1.75em);
  }
  .show-title.h3 {
    font-size: clamp(1.25rem, 4vw, 1.5rem);
  }
  .show-title.h4 {
    font-size: 1em;
    flex-flow: row wrap;
  }
  .carousel .show-title {
    flex-flow: row wrap;
    font-size: 1.25em;
  }
  .show-label, .show-status {
    font-size: 0.75em;
    letter-spacing: 0.1em;
    font-weight: 300;
    display: inline-flex;
  }
  .show-label.status--live:before, .show-status.status--live:before {
    content: "•";
    display: inline-flex;
    scale: 1.1;
    color: hsl(var(--red)/1);
    padding-right: 0.25em;
  }
  .carousel .show-label, .carousel .show-status {
    font-size: 0.675em;
  }
  .intro .show-label, .intro .show-status {
    font-size: 0.875rem;
  }
  .show-label {
    color: hsl(var(--blue-subtle)/1);
  }
  .show-card .show-label {
    text-transform: uppercase;
  }
  @media (min-width: 48rem) {
    aside .show-label {
      font-size: 0.75em;
    }
  }
  .show .description {
    line-height: 1.25;
    font-weight: 100;
    max-width: 40ch;
  }
  .carousel .show .description, aside .show .description {
    font-size: 0.875em;
  }
  .carousel .show .description {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
  }
  .show .btn {
    margin-top: 1.5em;
    font-size: clamp(1em, 2vw, 1.125em);
  }
  .show-list {
    display: flex;
    flex-wrap: wrap;
  }
  .show-list-item {
    font-size: clamp(1.125rem, 3vw, 1.25rem);
    font-weight: 400;
    line-height: 1.25;
  }
  .carousel .show-list-item {
    font-size: 1em;
  }
  aside .show-list-item {
    font-size: 1em;
  }
  @media (min-width: 36rem) {
    aside .show-list-item {
      font-size: 0.875em;
    }
  }
  .show-list-item:not(:last-of-type):not(:only-of-type):after {
    font-weight: 100;
    content: var(--list-separator, ",");
    padding-right: 0.25em;
  }
  .show-list-item:empty {
    display: none;
  }
  .show-footer {
    display: flex;
    justify-content: center;
    margin-top: var(--gap-m, 1.5rem);
    gap: var(--gap-m, 1.5rem);
  }
  @media (36em <= width <= 64em) {
    .show-footer {
      justify-content: flex-start;
    }
  }
  .show-link {
    display: none;
  }
  aside .show-link, .carousel .show-link {
    position: absolute;
    display: block;
    z-index: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  .video-row {
    display: flex;
    flex-flow: row wrap;
    gap: var(--gap-s, 0.5rem);
  }
  .video-card {
    display: flex;
    flex-flow: column nowrap;
    gap: var(--gap-xs, 0.25rem);
  }
  aside .video-card {
    gap: var(--gap-s, 0.5rem);
  }
  .video-thumbnail {
    margin-bottom: var(--gap-s, 0.5rem);
  }
  .video .show-title a:after {
    content: "";
    opacity: 0;
    font-size: 0;
    align-self: center;
    transition: all 0.2s ease-out;
  }
  .video .show-title a:hover:after {
    order: 0;
    opacity: 1;
    font-size: 1em;
    content: "⮞";
  }
  .video-title {
    font-weight: 600;
    line-height: 1.2;
  }
  .video-title.h4 {
    font-size: clamp(1rem, 1.25vw, 1.25rem);
  }
  .video-title a:hover {
    text-decoration: underline;
  }
  .video-desc {
    margin-top: var(--gap-s, 0.5rem);
    font-size: 0.875em;
    font-weight: 100;
    line-height: 1.25;
    opacity: 0.75;
  }
  .iframe-wrapper {
    width: 100%;
    box-shadow: var(--shadow-long);
    aspect-ratio: 16/9;
    background: radial-gradient(100% 100% at 50% 0%, hsl(var(--blue-bright)/0.25) 0%, hsl(var(--blue-bright)/0.125) 50%, hsl(var(--blue-bright)/0.05) 100%), linear-gradient(180deg, hsl(var(--blue-black)/0.5) 0%, hsl(var(--blue-black)/0.5) 100%);
  }
  .player-grid {
    display: grid;
    grid-template-areas: "player" "share" "aside";
  }
  @media (max-width: 64rem) {
    .player-grid {
      grid-template-columns: 1fr;
    }
  }
  @media (min-width: 64rem) {
    .player-grid {
      grid-template-areas: "content aside" "footer footer";
    }
  }
  .player--show .player-grid {
    grid-template-areas: "player" "share" "aside";
  }
  @media (min-width: 64rem) {
    .player--show .player-grid {
      grid-template-columns: 1fr;
      padding-right: calc(40vw + var(--gap-m, 1.5rem));
    }
  }
  @media (min-width: 100rem) {
    .player--show .player-grid {
      padding-right: calc(400px + var(--gap-m, 1.5rem));
    }
  }
  .player-grid aside {
    top: 0;
  }
  .player-bg {
    aspect-ratio: 1/1;
  }
  .player-bg img {
    max-height: 100%;
    max-width: 100%;
    justify-self: flex-end;
    width: auto;
  }
  .player-meta {
    --line-gap: .25rem;
    position: relative;
    height: 100%;
    display: flex;
    flex-flow: column nowrap;
    gap: var(--line-gap);
    justify-content: center;
    padding: 0.875em 1rem;
    container-type: inline-size;
    container-name: card;
  }
  .player-meta--live {
    padding-left: 2em;
  }
  .player-meta--live:before {
    content: "•" attr(data-status);
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: auto;
    background: hsl(var(--red)/1);
    writing-mode: vertical-rl;
    transform: scale(-1, -1);
    text-orientation: mixed;
    text-align: center;
    font-size: 0.875em;
    letter-spacing: 0.375em;
    font-weight: 300;
  }
  .player-show-next {
    flex: 0;
  }
  .player .show-status {
    line-height: 1;
    font-size: 0.75em;
    font-weight: 100;
  }
  .player .show-status.status--live {
    visibility: hidden;
    font-size: 0;
    margin-bottom: calc(-1 * var(--line-gap));
  }
  .player .show-status.status--live:before {
    color: inherit;
  }
  .player .show-list {
    margin-top: auto;
  }
  .player .show-list-item {
    display: flex;
    line-height: 1;
    font-size: 1em;
    font-weight: 100;
  }
  .player .show-list-item:not(:last-child):not(:only-child):after {
    content: var(--list-separator, ",");
    font-weight: 100;
    padding-right: 0.25em;
  }
  .player-card {
    --player-card-height: auto;
    display: grid;
    width: 100%;
  }
  @media (min-width: 25rem) {
    .player-card {
      grid-template-columns: 5fr minmax(10rem, 1fr);
      height: var(--player-card-height);
    }
  }
  .player--show .player-card {
    grid-template-columns: minmax(10rem, 1fr) 5fr;
  }
  .player-show-col {
    background-color: hsl(var(--blue-darker)/0.5);
  }
  .player-show-col.player-show-next {
    background-color: hsl(var(--blue-darker)/0.75);
  }
  .player--show .player-show-col {
    background-color: hsl(var(--blue)/1);
  }
  .player-video-title {
    background-color: hsl(var(--white)/1);
    color: hsl(var(--black)/1);
    padding: 0.5em 1em;
  }
  .player-video-title .video-header {
    order: 99;
  }
  .player--show .player-video-title {
    background-color: hsl(var(--white)/1);
    color: hsl(var(--black)/1);
  }
  .player-show-current {
    background-color: hsl(var(--blue)/1);
  }
  .player-share {
    width: 100%;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
    gap: var(--gap, 1rem);
    font-size: 1em;
  }
  .section--live .wrapper {
    justify-content: center;
    align-items: center;
    gap: 5%;
    aspect-ratio: var(--aspect-ratio, 16/9);
  }
  @media (max-width: 36rem) {
    .section--live .wrapper {
      aspect-ratio: var(--aspect-ratio, 4/3);
    }
  }
  .section--live .title--live {
    font-size: clamp(1.5rem, 5vw, 3rem);
    line-height: 1.25;
    font-weight: 700;
    max-width: 25ch;
    text-align: center;
    text-shadow: 0 0.05em 0.125em hsl(var(--blue-black)/0.25), 0 0.1em 0.25em hsl(var(--blue-black)/0.25), 0 0.15em 0.5em hsl(var(--blue-black)/0.25), 0 0.25em 1em hsl(var(--blue-black)/0.25);
  }
  .section--live .btn {
    font-size: clamp(0.75rem, 2vw, 1.25rem);
  }
  .live-background {
    content: "";
    position: absolute;
    top: 0;
    height: 100%;
    max-width: 100%;
    box-shadow: var(--shadow-xl);
    z-index: -1;
    overflow: hidden;
  }
  .live-background > * {
    -o-object-fit: cover;
       object-fit: cover;
    height: 100%;
  }
  .live-background iframe {
    width: 100%;
  }
  .show-image .live-background iframe {
    min-height: 100%;
  }
  @media (min-width: 36rem) {
    .live-background {
      max-width: calc(100% - var(--gap-left, 4rem));
    }
  }
  .program-wrapper {
    container-type: inline-size;
  }
  .program-planner {
    display: grid;
  }
  .program-card {
    --col-width: 6.5em;
    display: grid;
    align-items: center;
    grid-template-columns: var(--col-width) 5fr;
    position: relative;
    border-bottom: 1px dotted hsl(var(--white)/0.25);
  }
  @container (width > 36rem) {
    .program-card {
      grid-template-columns: var(--col-width) 5fr 1fr;
      --col-width: 5.5em;
    }
  }
  .program-card[data-status=live], .program-card:hover {
    background-image: linear-gradient(to right, hsl(var(--blue-bright)/0.33) 50%, hsl(var(--blue)/0));
  }
  .program-card[data-status=live] .program-img, .program-card:hover .program-img {
    opacity: 1;
    mix-blend-mode: normal;
  }
  .program-card[data-status]:before {
    content: attr(data-status);
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    height: 100%;
    width: auto;
    writing-mode: vertical-rl;
    transform: scale(-1, -1);
    text-orientation: mixed;
    text-align: center;
    font-size: 0.75em;
    letter-spacing: 0.375em;
    font-weight: 300;
    background: hsl(var(--blue-bright)/0.5);
    text-transform: uppercase;
  }
  .program-card[data-status=live]:before {
    content: "•" attr(data-status);
    background: hsl(var(--red-bright)/0.75);
  }
  .program-img {
    aspect-ratio: 1/1;
    width: var(--col-width);
    height: auto;
    position: relative;
    opacity: 0.33;
    mix-blend-mode: luminosity;
    transition: all 0.25s ease-in-out;
    -o-object-fit: cover;
       object-fit: cover;
  }
  .program-content {
    align-self: start;
    gap: 0.25em;
    padding: calc(var(--col-width) * 0.1) calc(var(--col-width) * 0.1);
  }
  @media (min-width: 64rem) {
    .program-content {
      padding-right: var(--gap-left, 4rem);
    }
  }
  @container (width > 36rem) {
    .program-content {
      display: grid;
      align-items: center;
      grid-template-columns: var(--col-width) 1fr;
      padding: 0;
    }
  }
  .program-list {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    font-size: 0.875em;
    font-weight: 100;
  }
  @container (width > 36rem) {
    .program-list {
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-align: center;
      font-size: 1em;
      aspect-ratio: 1/1;
      width: var(--col-width);
      height: var(--col-width);
      border-inline: 1px dotted hsl(var(--white)/0.25);
    }
  }
  .program-list-item {
    display: flex;
  }
  .program-list-item:not(:last-child):not(:only-child):after {
    font-weight: 100;
    content: var(--list-separator, ",");
    padding-right: 0.25em;
  }
  @container (width > 36rem) {
    .program-list-item:not(:last-child):not(:only-child):after {
      content: none;
    }
  }
  .program-info {
    align-self: start;
    display: flex;
    flex-flow: column nowrap;
    gap: 0.25em;
  }
  @container (width > 36rem) {
    .program-info {
      padding: calc(var(--col-width) * 0.15) calc(var(--col-width) * 0.1);
    }
  }
  .program-description {
    font-size: 0.875em;
    font-weight: 100;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    color: hsl(var(--body-subtle)/1);
    overflow: hidden;
  }
  .program-card:hover .program-description, .program-card--live .program-description {
    color: hsl(var(--body-light)/1);
  }
  .program-description .show-label {
    font-size: 1em;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 100;
    color: currentColor;
  }
  .program-description .show-host-name {
    font-size: 1em;
    -webkit-text-decoration: dotted underline;
            text-decoration: dotted underline;
    color: hsl(var(--body-light)/1);
  }
  .program-card:hover .program-description .show-host-name, .program-card--live .program-description .show-host-name {
    -webkit-text-decoration: dotted underline currentColor;
            text-decoration: dotted underline currentColor;
  }
  .program-description .show-host-name:hover {
    text-decoration-style: dotted;
    color: hsl(var(--body-color)/1);
  }
  .program-footer {
    display: flex;
    justify-content: center;
    content-visibility: hidden;
    opacity: 0;
    transition: all 0.25s ease-in-out;
  }
  [data-status=live] .program-footer, .program-card--live .program-footer, .program-card:hover .program-footer {
    opacity: 1;
    content-visibility: visible;
  }
  @container (width < 36rem) {
    .program-footer {
      display: none;
    }
  }
  .planner {
    position: relative;
    overflow: visible;
    background-color: transparent;
  }
  .planner-list {
    margin-inline: -1px -1px;
    width: calc(100% + 50px);
  }
  .planner-item {
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-weight: 100;
    line-height: 1.33;
    padding: 0.5em;
    cursor: pointer;
  }
  .planner-item span {
    font-size: 0.75em;
  }
  .planner-item strong {
    font-size: 0.875em;
    font-weight: 500;
  }
  .planner-item.active {
    background-color: hsl(var(--blue-bright)/0.15);
  }
  .planner-item:focus, .planner-item:hover {
    background-color: hsl(var(--blue-bright)/0.3);
  }
  .planner-item.today {
    background-color: hsl(var(--red-dark)/0.5);
  }
  .planner-item.today:focus, .planner-item.today:hover {
    background-color: hsl(var(--red-dark)/0.75);
  }
  .planner .swiper.swiper--planner {
    border-top: 1px solid hsl(var(--white)/0.15);
    border-bottom: 1px solid hsl(var(--white)/0.15);
    overflow: hidden;
  }
  .planner .swiper-slide-visible:not(:first-child) {
    border-left: 1px solid hsl(var(--white)/0.15);
  }
  .naft-services {
    background-color: hsl(var(--blue-darker)/0.25);
    border-color: hsl(var(--blue-black)/1);
    border-width: 1px 0;
  }
  .naft-service-wrapper {
    font-size: clamp(1.25rem, 1.739vw + 0.391rem, 1.75rem);
    padding-block: 0.375em;
    container-type: inline-size;
  }
  .naft-service-wrapper.wrapper {
    flex-flow: row wrap;
  }
  .naft-service-wrapper, .naft-service-list {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.125em;
    -moz-column-gap: clamp(0.5rem, 2vw, 2rem);
         column-gap: clamp(0.5rem, 2vw, 2rem);
    flex-wrap: wrap;
  }
  .naft-service-brand, .naft-service-logo {
    opacity: 0.5;
    mix-blend-mode: luminosity;
    display: block;
  }
  .naft-service-brand:hover, .naft-service-logo:hover {
    opacity: 1;
    mix-blend-mode: normal;
  }
  .naft-service-logo {
    display: block;
    height: 1em;
    font-size: 1em;
  }
  .naft-service-divider {
    font-size: 0.5em;
    line-height: 0;
    padding-block: 0.5em 0.25em;
    color: hsl(var(--body-color)/0.5);
  }
  .article + .article {
    margin-block-start: var(--gap-l, 3em);
  }
  .article:not(.subgrid):not([class*=grid-]) > * + * {
    margin-block-start: var(--gap-m, 1.5em);
  }
  .article > footer {
    margin-block-start: var(--gap-m, 1.5em);
  }
  .article > footer:before {
    content: "";
    display: block;
    height: 1px;
    width: 10rem;
    background-color: hsl(var(--body-subtle)/1);
    grid-area: content;
    grid-row: -1;
    margin-block-end: var(--gap, 1em);
  }
  .article hr {
    color: hsl(var(--body-subtle)/0.5);
  }
  .article figcaption {
    color: hsl(var(--body-light)/1);
  }
  .article figcaption:not(:first-child) {
    margin-block-start: var(--gap-sm, 0.5em);
  }
  .article address {
    font-family: var(--font-mono, monospace);
    font-style: normal;
    line-height: 1.5;
  }
  .article a {
    text-underline-position: under;
    transition: all var(--link-transition);
  }
  .article a:hover {
    color: hsl(var(--body-color)/1);
    -webkit-text-decoration: 0.1em underline;
            text-decoration: 0.1em underline;
  }
  .article table {
    --table-padding: var(--gap-sm, .5em);
    --table-border-color: hsl(var(--body-subtle) / .25);
    font-family: var(--font-mono, monospace);
    line-height: 1.5;
    text-align: left;
    width: 100%;
  }
  .article table th,
  .article table td {
    border: 1px solid;
    border-color: var(--table-border-color);
    padding: var(--table-padding);
  }
  .article table caption {
    color: hsl(var(--body-light)/1);
    background-color: var(--table-border-color);
  }
  .article header {
    text-wrap: balanced;
  }
  .article header--host {
    margin-block-end: var(--gap-l, 3rem);
  }
  .article header time {
    font-size: 0.875em;
    color: hsl(var(--body-subtle)/1);
  }
  .article header p {
    margin-block-start: 0.5em;
    color: hsl(var(--body-light)/1);
  }
  .article-title {
    max-width: 68ch;
    margin-inline: auto;
  }
  .prose {
    line-height: 1.5;
    color: hsl(var(--body-light)/1);
  }
  .prose h1, .prose h2, .prose h3, .prose h4, .prose h5, .prose h6 {
    color: hsl(var(--body-color)/1);
  }
  .prose > * + * {
    margin-block-start: var(--prose-space, 1.5em);
  }
  .prose :is(h1 + *, h2 + *, h3 + *, h4 + *, h5 + *, h6 + *) {
    --prose-space: .5em;
  }
  .prose h1, .prose h2, .prose h3 {
    line-height: 1.1;
  }
  .prose ol, .prose ul {
    --list-item-space: .5em;
    list-style: initial;
    margin-inline-start: var(--gap, 1em);
  }
  .prose ol * + *, .prose ul * + * {
    margin-block-start: var(--list-item-space);
  }
  .prose ol * + * > *, .prose ul * + * > * {
    margin-block-start: var(--list-item-space);
  }
  .prose ol {
    list-style: numeric;
  }
  .prose form {
    --row-gap: 1em;
    --el-spacing-x: .5em;
    --el-spacing-y: .25em;
  }
  .prose form > * + * {
    margin-block-start: var(--row-gap);
  }
  .prose form button {
    margin: 0;
    overflow: visible;
    font-family: inherit;
    text-transform: none;
  }
  .prose form [type=button], .prose form [type=reset], .prose form [type=submit], .prose form button {
    -webkit-appearance: button;
  }
  .prose form [role=button], .prose form [type=button], .prose form [type=file]::file-selector-button, .prose form [type=reset], .prose form [type=submit], .prose form button {
    --btn-transition: .2s ease-in-out;
    padding: var(--el-spacing-y) var(--el-spacing-x);
    border: 1px solid var(--btn-border-color, currentColor);
    border-radius: var(--btn-border-radius, 0);
    outline: 0;
    background-color: var(--btn-bg, transparent);
    color: var(--btn-color, currentColor);
    font-weight: var(--btn-font-weight, inherit);
    text-decoration: none;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    transition: background-color var(--btn-transition), border-color var(--btn-transition), color var(--btn-transition), box-shadow var(--btn-transition);
  }
  .prose form ol, .prose form ul,
  .prose fieldset ol,
  .prose fieldset ul {
    list-style: none;
    margin-inline-start: 0;
  }
  .prose input[type=email],
  .prose input[type=number],
  .prose input[type=search],
  .prose input[type=text],
  .prose input[type=tel],
  .prose input[type=url],
  .prose input[type=password],
  .prose input[type=date],
  .prose input[type=month],
  .prose textarea,
  .prose select {
    line-height: 1.5;
    padding: 0.25em 0.5em;
    border: 1px solid hsl(var(--body-subtle)/0.5);
  }
  .prose textarea {
    min-height: 3em;
    padding: 0.25em 0.5em;
  }
  .prose input[type=email]:focus,
  .prose input[type=number]:focus,
  .prose input[type=search]:focus,
  .prose input[type=text]:focus,
  .prose input[type=tel]:focus,
  .prose input[type=url]:focus,
  .prose input[type=password]:focus,
  .prose input[type=date]:focus,
  .prose input[type=month]:focus,
  .prose textarea:focus,
  .prose select:focus {
    background-color: hsl(var(--body-subtle)/0.125);
    border: 1px solid hsl(var(--body-subtle)/1);
    outline: 0;
  }
  .prose label,
  .prose legend {
    display: block;
    margin-bottom: 0.5em;
    font-weight: 300;
  }
  .prose label:has([type=checkbox], [type=radio]) {
    width: -moz-fit-content;
    width: fit-content;
    cursor: pointer;
  }
  .prose fieldset {
    width: 100%;
    margin-bottom: var(--row-gap, var(--gap, 1em));
    padding: 0;
    border: 0;
  }
  .prose ::-webkit-calendar-picker-indicator {
    filter: invert(1);
  }
  .prose [type=checkbox],
  .prose [type=radio] {
    width: 1.25em;
    height: 1.25em;
    margin-top: -0.125em;
    margin-inline-end: 0.5em;
    border-width: var(--border-width);
    vertical-align: middle;
    cursor: pointer;
  }
  .prose [type=checkbox] ~ label,
  .prose [type=radio] ~ label {
    display: inline-block;
    margin-bottom: 0;
    cursor: pointer;
  }
  .prose [type=checkbox] ~ label:not(:last-of-type),
  .prose [type=radio] ~ label:not(:last-of-type) {
    margin-inline-end: 1em;
  }
  .prose code {
    display: block;
    max-width: 100%;
    overflow-x: auto;
  }
  .host-bio {
    font-size: clamp(1rem, 3vw, 1.125rem);
    color: hsl(var(--body-light)/1);
  }
  @media (min-width: 80rem) {
    .host-img {
      grid-column: 1/2;
      grid-row: 1;
      position: sticky;
      top: 5rem;
    }
  }
  .article .host-img {
    overflow: hidden;
    border-radius: 50%;
    aspect-ratio: 1/1;
    max-width: clamp(15rem, 25vw, 25rem);
  }
  .sys-wrapper {
    --stroke-width: .1rem;
    --stroke-color: hsl(var(--body-color)/1);
    --stroke-fill: hsl(var(--body-color)/0);
    font-size: clamp(0.375em, 2vw, 1em);
    margin-block: 5em;
    line-height: 1.5;
    display: grid;
    row-gap: var(--gap-xl, 5em);
  }
  .sys-title:before, .sys-title:after {
    content: counter(variable);
    position: absolute;
    width: -moz-max-content;
    width: max-content;
    left: 0;
    top: 0;
    right: 0;
    margin-inline: auto;
    z-index: 10;
    font-size: 28em;
    font-weight: 700;
    line-height: 0.75;
    pointer-events: none;
    mix-blend-mode: plus-lighter;
    -webkit-text-stroke: var(--stroke-width) var(--stroke-color);
    -webkit-text-fill-color: var(--stroke-fill);
  }
  .sys-title:before {
    counter-reset: variable var(--L1, 4);
    transition: transform 0.2s;
    transform: translateX(-0.6ch);
  }
  @media (max-width: 48rem) {
    .sys-title:before {
      transform: translateX(-0.7ch);
    }
  }
  .sys-title:after {
    counter-reset: variable var(--L2, 4);
    transform: translateX(0.9ch);
  }
  @media (max-width: 48rem) {
    .sys-title:after {
      transform: translateX(0.8ch);
    }
  }
  .sys-msg {
    text-align: center;
  }
  .sys-msg h1, .sys-msg h2 {
    line-height: 1.2;
  }
  .sys-msg p {
    color: hsl(var(--body-light)/1);
    margin-block-start: var(--gap-sm, var(--gap, 1em));
  }
  .sys-msg p:not(:first-of-type) {
    margin-block-start: var(--gap-sm, var(--gap-sm, 0.5em));
  }
  .sys-slider {
    max-width: 20em;
    border-radius: 50%;
    aspect-ratio: 1/1;
    border: calc(var(--stroke-width) * 1.33) solid var(--stroke-color);
  }
  .sys-slider .show-wrapper {
    margin: 0;
    padding: 0;
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-end;
    align-items: flex-end;
    aspect-ratio: 1/1;
    background: linear-gradient(var(--gradient-angle, 180deg), hsl(var(--blue-dark)/0) 50%, hsl(var(--blue-dark)/0.9) 80%, hsl(var(--blue-dark)/1) 100%);
  }
  .sys-slider .show-image {
    aspect-ratio: 1/1;
  }
  .sys-slider .show-card {
    padding: 0;
    width: -moz-max-content;
    width: max-content;
    margin: 1.5em auto 2em;
    max-width: 60%;
    font-size: 0.875em;
  }
  .sys-slide {
    max-width: 20rem;
  }
  .search-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    max-width: 100dvw;
    max-height: 100dvh;
    overflow-y: auto;
    background: var(--gradient-bg);
    background: hsl(var(--blue-dark)/1);
    display: none;
    flex-flow: column nowrap;
    align-items: center;
  }
  @media (max-width: 48rem) {
    .search-overlay {
      --content-m: var(--gap-sm, 1rem);
      padding-inline: var(--content-m);
    }
  }
  .search-overlay[aria-expanded=true] {
    display: flex;
  }
  .search-overlay:after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 50dvh;
    background: var(--gradient-bg);
    z-index: -99;
  }
  .search-overlay:before {
    content: "";
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 6rem;
    backdrop-filter: blur(20px);
    z-index: 1;
    -webkit-mask-image: -webkit-gradient(linear, left center, left bottom, from(rgb(0, 0, 0)), to(rgba(0, 0, 0, 0)));
            mask-image: -webkit-gradient(linear, left center, left bottom, from(rgb(0, 0, 0)), to(rgba(0, 0, 0, 0)));
  }
  .search-overlay-alt {
    left: auto;
    right: 0;
    height: auto;
    background: transparent;
    padding-inline: calc(var(--content-m) + 3rem) calc(var(--content-m) + 5rem);
    overflow: hidden;
  }
  .search-overlay-alt:before {
    background: linear-gradient(180deg, hsl(205, 100%, 12%) 0%, hsla(205, 100%, 12%, 0.5) 40%, hsla(205, 100%, 12%, 0) 80%);
  }
  .search-overlay-alt:after {
    content: unset;
  }
  .search-form {
    position: sticky;
    top: -1px;
    z-index: 1;
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: flex-end;
    width: 100%;
  }
  header .search-form {
    padding-block: 1rem;
    padding-inline: 4rem;
    max-width: var(--content-max, 100%);
  }
  header .search-form > * {
    max-width: var(--md);
  }
  main .search-form {
    padding-block: 0 2rem;
  }
  @media (max-width: 64rem) {
    .search-overlay:not(.search-overlay-alt) .search-form {
      padding-block-start: 1.25rem;
    }
  }
  @media (36rem <= width <= 64rem) {
    .search-overlay:not(.search-overlay-alt) .search-form {
      padding-inline: 5.5rem 7.5rem;
      padding-block-start: 1rem;
    }
  }
  @media (max-width: 36rem) {
    .search-overlay:not(.search-overlay-alt) .search-form {
      padding-inline: 4rem 6rem;
    }
  }
  .search-overlay-alt .search-form {
    background: transparent;
  }
  @media (max-width: 64rem) {
    .search-overlay-alt .search-form {
      padding-inline: 1rem;
    }
  }
  .search-form label {
    width: 100%;
    padding-top: 0.25rem;
    text-align: center;
    color: hsl(var(--body-subtle)/1);
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    line-height: 1;
  }
  .search-form:has([type=search]) {
    --border-color: hsl(var(--body-subtle) / .5);
  }
  .search-form:has(input:hover, input:focus-visible) {
    --border-color: hsl(var(--body-color) / 1);
  }
  .search-form:has(input:-webkit-autofill, input:-webkit-autofill) {
    border-color: transparent;
  }
  .search-form:has(input:-webkit-autofill, input:autofill) {
    border-color: transparent;
  }
  .search-form:has(input:disabled) {
    border-color: hsl(var(--body-subtle)/0.125);
  }
  .search-btn {
    display: flex;
    flex-flow: row nowrap;
    gap: 0.5rem;
  }
  .search-overlay .search-btn {
    font-size: clamp(1.125em, 3vw, 1.5rem);
    padding-inline: 0.5em 0;
    padding-block: 0.65em;
    border-bottom: 0.125em solid var(--border-color);
    line-height: 3;
  }
  .search-overlay .search-btn span {
    display: none;
  }
  .search-btn .icon {
    opacity: 0.5;
  }
  .search-btn:hover, .search-btn:focus {
    background-color: hsl(var(--body-color)/0);
  }
  .search-btn:hover .icon, .search-btn:focus .icon {
    opacity: 1;
  }
  .search-results {
    z-index: 0;
    display: flex;
    flex-flow: column nowrap;
    gap: var(--gap, 1em);
    width: 100%;
  }
  .search-results:not(:first-child) {
    margin-block-start: var(--gap, 1em);
  }
  .search-filters {
    display: grid;
    gap: var(--gap-l);
    width: 100%;
    grid-template-columns: 100%;
    --input-color: var(--body-light);
    color: hsl(var(--input-color)/1);
    padding-right: var(--gap, 1em);
  }
  .search-filters:has(input:checked) {
    --input-color: var(--body-color);
  }
  .search-filters legend {
    display: block;
    width: 100%;
    font-size: clamp(0.875em, 3vw, 1em);
    letter-spacing: 0.15em;
    font-weight: 100;
    text-transform: uppercase;
    padding-block-end: var(--gap-xs);
    margin-block-end: var(--gap);
    border-bottom: 1px solid currentColor;
  }
  .search-filters hr {
    margin-block: 0;
    padding-block: 0;
    height: 1px;
    border: 1px dashed hsl(var(--body-subtle)/0.25);
  }
  .search-filters fieldset {
    display: grid;
    gap: var(--gap);
  }
  .search-filters .fieldset-options {
    display: flex;
    gap: 0.5em;
  }
  .search-filters .fieldset-options > * {
    text-align: center;
    justify-content: center;
    flex: 1;
  }
  .search-filters .js-selectAll, .search-filters .js-clear {
    font-size: clamp(0.75em, 3vw, 0.875em);
    font-weight: 200;
    cursor: pointer;
    --input-color: var(--body-light);
    color: hsl(var(--input-color)/1);
    padding: 0.375em 0.75em;
  }
  .search-filters .js-selectAll {
    --input-color: var(--body-light);
  }
  .search-filters .js-selectAll.active {
    --input-color: var(--body-color);
    color: hsl(var(--body-bg)/1);
    background-color: hsl(var(--input-color)/1);
  }
  .search-filters .js-clear {
    pointer-events: none;
    --input-color: var(--body-subtle);
    opacity: 0.5;
  }
  .search-filters .js-clear.enabled {
    --input-color: var(--body-light);
    pointer-events: all;
    opacity: 1;
  }
  .search-filters label {
    display: flex;
    align-items: center;
    gap: var(--gap-s);
    color: hsl(var(--body-light)/1);
  }
  .search-filters label:has(input:checked) {
    color: hsl(var(--body-color)/1);
  }
  .search-filters input[type=checkbox], .search-filters input[type=radio] {
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    margin: 0;
    font: inherit;
    color: currentColor;
    width: 1em;
    height: 1em;
    border: 1px solid hsl(var(--input-color)/0.5);
    background-color: hsl(var(--input-color)/0.125);
  }
  .search-filters input[type=checkbox]:checked, .search-filters input[type=radio]:checked {
    color: hsl(var(--input-color)/1);
    border-color: hsl(var(--input-color)/1);
    background-color: hsl(var(--input-color)/1);
  }
  .search-filters input[type=radio] {
    border-radius: 50%;
  }
  .search-filters input[type=text] {
    padding: 0.375em 0.5em;
    color: hsl(var(--body-color)/1);
    border: 1px solid hsl(var(--input-color)/0.5);
    background-color: hsl(var(--input-color)/0.125);
    transition: background-color 0.2s ease-in-out;
    font-weight: 400;
  }
  .search-filters input[type=text]:is(:-moz-placeholder) {
    font-weight: 100;
  }
  .search-filters input[type=text]:is(:placeholder-shown) {
    font-weight: 100;
  }
  .search-filters input[type=text]:is(:active, :hover, :focus, :focus-visible) {
    color: hsl(var(--blue-black)/1);
    background-color: hsl(var(--body-light)/1);
  }
  .search-filters input[type=text]:is(:valid) {
    color: hsl(var(--blue-black)/1);
    background-color: hsl(var(--body-light)/1);
  }
  .search-filters input[type=text]:is(:focus, :focus-visible) {
    background-color: hsl(var(--body-color)/1);
    outline: 0;
  }
  .search-filters footer {
    display: grid;
    gap: var(--gap);
  }
  .search-msg {
    text-align: center;
    font-size: clamp(1rem, 2vw, 1.5rem);
    color: hsl(var(--body-subtle)/1);
    padding-block: 5em;
    max-width: 56ch;
    align-self: center;
  }
  .search-title {
    display: flex;
    gap: 0.25em;
    align-items: center;
  }
  @media (max-width: 36rem) {
    .search-title {
      position: sticky;
      top: -1px;
      z-index: 10;
    }
  }
  .search-input {
    width: 100%;
    padding: 0.5em 0.5em 0.5em 1.75em;
    font-size: clamp(1.125em, 3vw, 1.5rem);
    font-weight: 300;
    border-bottom: 0.125em solid var(--border-color);
    border-radius: 0;
    background-repeat: no-repeat;
    background-size: 1.25em;
    background-position: left center;
    background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16.6 18L10.3 11.7C9.8 12.1 9.225 12.4167 8.575 12.65C7.925 12.8833 7.23333 13 6.5 13C4.68333 13 3.14583 12.3708 1.8875 11.1125C0.629167 9.85417 0 8.31667 0 6.5C0 4.68333 0.629167 3.14583 1.8875 1.8875C3.14583 0.629167 4.68333 0 6.5 0C8.31667 0 9.85417 0.629167 11.1125 1.8875C12.3708 3.14583 13 4.68333 13 6.5C13 7.23333 12.8833 7.925 12.65 8.575C12.4167 9.225 12.1 9.8 11.7 10.3L18 16.6L16.6 18ZM6.5 11C7.75 11 8.8125 10.5625 9.6875 9.6875C10.5625 8.8125 11 7.75 11 6.5C11 5.25 10.5625 4.1875 9.6875 3.3125C8.8125 2.4375 7.75 2 6.5 2C5.25 2 4.1875 2.4375 3.3125 3.3125C2.4375 4.1875 2 5.25 2 6.5C2 7.75 2.4375 8.8125 3.3125 9.6875C4.1875 10.5625 5.25 11 6.5 11Z' fill='white'/%3E%3C/svg%3E%0A");
  }
  main .search-input {
    display: block;
    font-size: 1em;
    padding-inline-end: 0;
  }
  .search-input::-moz-placeholder {
    font-weight: 100;
  }
  .search-input::placeholder {
    font-weight: 100;
  }
  .search-input:focus-visible {
    outline: none;
  }
  .search-input:is(:-webkit-autofill, :-webkit-autofill) {
    padding-inline-start: 0.75em;
    border-color: transparent;
    -webkit-text-fill-color: hsl(var(--body-color)/1);
    -webkit-box-shadow: 0 0 0 2em hsl(var(--blue-subtle)/1) inset !important;
  }
  .search-input:is(:-webkit-autofill, :autofill) {
    padding-inline-start: 0.75em;
    border-color: transparent;
    -webkit-text-fill-color: hsl(var(--body-color)/1);
    -webkit-box-shadow: 0 0 0 2em hsl(var(--blue-subtle)/1) inset !important;
  }
  .search-overlay-alt .search-input:is(:-webkit-autofill, :-webkit-autofill) {
    -webkit-text-fill-color: hsl(var(--body-color)/1);
    -webkit-box-shadow: 0 0 0 2em hsl(var(--blue)/1) inset !important;
  }
  .search-overlay-alt .search-input:is(:-webkit-autofill, :autofill) {
    -webkit-text-fill-color: hsl(var(--body-color)/1);
    -webkit-box-shadow: 0 0 0 2em hsl(var(--blue)/1) inset !important;
  }
  .search-input:disabled {
    color: hsl(var(--body-subtle)/0.75);
    background-color: hsl(var(--blue-dark)/0.125);
    border-color: hsl(var(--body-subtle)/0.125);
    cursor: not-allowed;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16.6 18L10.3 11.7C9.8 12.1 9.225 12.4167 8.575 12.65C7.925 12.8833 7.23333 13 6.5 13C4.68333 13 3.14583 12.3708 1.8875 11.1125C0.629167 9.85417 0 8.31667 0 6.5C0 4.68333 0.629167 3.14583 1.8875 1.8875C3.14583 0.629167 4.68333 0 6.5 0C8.31667 0 9.85417 0.629167 11.1125 1.8875C12.3708 3.14583 13 4.68333 13 6.5C13 7.23333 12.8833 7.925 12.65 8.575C12.4167 9.225 12.1 9.8 11.7 10.3L18 16.6L16.6 18ZM6.5 11C7.75 11 8.8125 10.5625 9.6875 9.6875C10.5625 8.8125 11 7.75 11 6.5C11 5.25 10.5625 4.1875 9.6875 3.3125C8.8125 2.4375 7.75 2 6.5 2C5.25 2 4.1875 2.4375 3.3125 3.3125C2.4375 4.1875 2 5.25 2 6.5C2 7.75 2.4375 8.8125 3.3125 9.6875C4.1875 10.5625 5.25 11 6.5 11Z' fill='hsl(205 16% 48% /.5)'/%3E%3C/svg%3E%0A");
  }
  .search-input::-webkit-search-cancel-button {
    -webkit-appearance: none;
    height: 1em;
    width: 1em;
    background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.8 18L0 16.2L7.2 9L0 1.8L1.8 0L9 7.2L16.2 0L18 1.8L10.8 9L18 16.2L16.2 18L9 10.8L1.8 18Z' fill='hsl(205 25% 75% /1)'/%3E%3C/svg%3E%0A");
    pointer-events: none;
    background-repeat: no-repeat;
    background-position: right center;
  }
  .search-input:focus::-webkit-search-cancel-button {
    opacity: 0.3;
    pointer-events: all;
  }
  .results-header {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: flex-end;
    padding-block-end: var(--gap-sm, 0.5em);
    margin-block-end: var(--gap, 1em);
    border-bottom: 1px solid hsl(var(--body-subtle)/0.5);
  }
  .results-header .section-title,
  .results-header .show-title {
    margin-block: 0;
  }
  .results-header .btn {
    color: hsl(var(--body-subtle)/1);
    display: flex;
    flex-flow: row nowrap;
    gap: 0.25em;
  }
  .results-row {
    width: 100%;
    display: grid;
    grid-template-rows: auto;
  }
  .results-row .swiper {
    padding-bottom: 4rem !important;
  }
  .post-group {
    display: flex;
    flex-flow: column nowrap;
    gap: var(--gap, 1em);
    margin-block: var(--gap, 1em);
  }
  .post-group > *:not(:first-of-type):before {
    content: "";
    display: block;
    width: clamp(2.5rem, 5vw, 5rem);
    background: hsl(var(--body-subtle)/0.5);
    height: 1px;
    margin-block: 0 var(--gap, 1em);
  }
  .post-card {
    display: flex;
    flex-flow: row nowrap;
    gap: var(--gap, 1em);
  }
  .post-thumbnail {
    width: 10rem;
    display: none;
  }
  .post-desc {
    margin-block-start: var(--gap-xs, 0.25em);
    color: hsl(var(--body-light)/1);
    font-size: 0.875em;
  }
}
.swiper {
  width: 100%;
}
.swiper.swiper--shows {
  border-radius: 0.5em;
  box-shadow: var(--shadow-long);
}
.swiper.swiper--carousel {
  margin-bottom: 1.5em;
}
.swiper-wrapper {
  width: 100%;
  max-width: 100%;
}
.carousel .swiper-slide {
  display: flex;
  flex-flow: column nowrap;
}
.swiper-slide-visible {
  z-index: 1;
}
.swiper-pagination {
  position: relative !important;
  width: auto !important;
  display: flex;
  flex-flow: row nowrap;
  margin-inline: auto;
}
.pagination-wrapper .swiper-pagination {
  margin-inline: unset;
}
.swiper--videos .swiper-pagination {
  margin-block: 3em 0;
}
.search-results .swiper-pagination {
  margin-block: 1em 0;
}
.swiper-pagination--carousel {
  width: auto;
  flex-basis: max-content;
}
.swiper-pagination-bullet {
  transition: all 0.3s ease-in-out;
  position: relative;
  --swiper-pagination-color: trasnparent;
  --swiper-pagination-bullet-inactive-color: hsl(var(--white) / 0);
}
.swiper-pagination-bullet:before {
  position: absolute;
  content: "";
  background-color: hsl(var(--white)/1);
  height: 0.7em;
  width: calc(100% - 0.3em);
  border-radius: 0.5em;
  top: 0.15em;
  left: 0.15em;
  z-index: 1;
  pointer-events: none;
}
.swiper-pagination-bullet:hover {
  --swiper-pagination-bullet-width: 2.5em;
}
.swiper-pagination-bullet-active {
  --swiper-pagination-bullet-width: 2.5em;
  --swiper-pagination-bullet-border-radius: .5em;
}
.card-footer .swiper-pagination-horizontal {
  width: auto;
}
.swiper-controls {
  --swiper-navigation-size: 3em;
  --swiper-navigation-sides-offset: calc(var(--swiper-navigation-size) * -1);
  position: absolute;
  left: 0;
  right: 0;
  height: 66%;
  top: 0;
  display: flex;
  flex-direction: column;
  gap: 1em;
  justify-content: center;
  width: var(--gap-left, 4em);
  margin-inline: 0;
}
@media (max-width: 64em) {
  .swiper-controls {
    display: none;
  }
}
.planner .swiper-controls {
  --swiper-navigation-size: 2em;
  flex-flow: row-reverse nowrap;
  justify-content: space-between;
  align-items: center;
  height: 100%;
  transform: none;
  width: 100%;
  background-color: var(--white);
}
.swiper-button-prev:after, .swiper-button-next:after {
  font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, Adwaita Sans, Cantarell, Ubuntu, roboto, noto, helvetica, arial, sans-serif;
  content: "→";
  display: none;
}
.swiper-button-prev.carousel-button-prev, .swiper-button-prev.carousel-button-next, .swiper-button-prev.video-button-prev, .swiper-button-prev.video-button-next, .swiper-button-next.carousel-button-prev, .swiper-button-next.carousel-button-next, .swiper-button-next.video-button-prev, .swiper-button-next.video-button-next {
  position: static;
}
.swiper-button-prev:after {
  content: "←";
}
.planner .swiper-button-prev {
  left: calc(var(--swiper-navigation-size) * -1.5);
}
.planner .swiper-button-next {
  right: calc(var(--swiper-navigation-size) * -1.5);
}
.swiper--carousel .swiper-button-next.carousel-button-next, .swiper--carousel .swiper-button-next.video-button-next {
  left: 0;
}

.pagination-wrapper {
  display: flex;
  flex-flow: row wrap;
  gap: var(--gap-m, 1.5rem);
  justify-content: center;
  align-items: center;
}
.pagination-wrapper *:only-child {
  justify-self: center;
}

/* --- WP fixes (στο τέλος για προτεραιότητα) --- */
.menu, .menu ul, .menu li,
.nav-menu, .nav-menu ul, .nav-menu li {
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu li {
  position: relative;
}

.menu a, .nav-menu a {
  text-decoration: none;
  display: inline-block;
}

.sub-menu, .children {
  margin: 0;
  padding: 0;
}

.section--videos > .wrapper {
  position: relative;
}

/* Compact Search Grid (χωρίς αλλαγή στο sidebar) */
.results-grid {
  display: grid;
  gap: var(--gap-m, 1.5rem);
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

@media (min-width: 36rem) {
  .results-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 80rem) {
  .results-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (min-width: 96rem) {
  .results-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.result-card {
  list-style: none;
  background: var(--card-bg, rgba(0, 0, 0, 0));
  border: none;
  border-radius: 0;
  overflow: hidden;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.result-card:hover {
  transform: translateY(-0.2em);
  background: rgba(255, 255, 255, 0.1);
  outline: 0;
  box-shadow: 0 0 0 0.75em rgba(255, 255, 255, 0.1);
}

.result-card__link {
  display: block;
  color: inherit;
  text-decoration: none;
}

/* μικρό media */
.result-card__media {
  aspect-ratio: 16/9;
  background: var(--card-bg, rgba(255, 255, 255, 0));
  overflow: hidden;
}
.result-card:hover .result-card__media {
  box-shadow: 0 0.5em 1em rgba(0, 0, 0, 0.25);
}

.result-card__thumb {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}

.result-card__thumb--placeholder {
  width: 100%;
  height: 100%;
  background: var(--card-bg, rgba(0, 0, 0, 0));
}

/* compact paddings & fonts */
.result-card__body {
  padding: var(--gap) 0;
}

.result-card__title {
  font-weight: 600;
  line-height: 1.2;
  font-size: clamp(1rem, 1.25vw, 1.25rem);
  margin-block-end: 0.5em;
}
.result-card:hover .result-card__title {
  text-decoration: underline;
}

.result-card__meta {
  margin-block-start: var(--gap-xs, 0.25em);
  color: hsl(var(--body-light)/1);
  font-size: 0.875em;
}

.result-card__excerpt {
  margin: 0;
  font-size: 13px;
  line-height: 1.35;
  opacity: 0.9;
  display: -webkit-box;
  -webkit-line-clamp: 2; /* 2 γραμμές για compact */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Pagination, διακριτικό */
.pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
  justify-content: center;
  margin: 1.25em 0 0.5em;
}

.pagination a,
.pagination span {
  border-radius: 0;
  border: 1px solid hsl(var(--body-subtle)/0.5);
  font-size: 1em;
  padding: 0.25em 0.5em;
}

.pagination .current {
  background: hsl(var(--body-color));
  color: hsl(var(--body-bg));
  border-color: hsl(var(--body-bg));
}

.only-mobile {
  display: inline-block;
}

.only-desktop {
  display: none;
}

@media (min-width: 768px) {
  .only-mobile {
    display: none;
  }
  .only-desktop {
    display: inline-block;
  }
}

.meta-inline{display:flex;align-items:center;gap:.5rem;line-height:1}
.meta-inline .icon-clock{display:block;flex:0 0 auto;width:1em;height:1em}

.group-title { letter-spacing:.5px; }
.group-title em { font-style:normal; font-weight:800; }

/* Divider ανάμεσα σε ομάδες αποτελεσμάτων */
.results-group + .results-group {
  border-top: 1px solid rgba(255,255,255,.12); /* σκουρό φόντο */
  margin-top: 28px;
  padding-top: 24px;
}

/* λεπτή γραμμή κάτω από τον τίτλο ομάδας (όπως στο mock) */
.results-group__header {
  border-bottom: 1px solid rgba(255,255,255,.12);
  padding-bottom: 8px;
  margin-bottom: 16px;
}



<style id="swiper-program-fixes">
  /* Άφησε τον Swiper να ορίσει widths στα slides */
  .planner .swiper-wrapper { display: flex !important; }
  .planner .swiper-slide  { width: auto; flex: 0 0 auto; } /* αν έχεις κανόνες τύπου width:XX%, τους ακυρώνει */

  /* Τα controls να είναι πάνω από το slider, για να “φαίνονται” πάντα */
  .planner .swiper-controls { position:absolute; inset:0 0 auto 0; z-index:10; pointer-events:none; }
  .planner .swiper-button-prev,
  .planner .swiper-button-next { pointer-events:auto; }
</style>