/*
  SUSY 2027
  Indico event CSS — v08 rebased stable clean layout

  Intended for the main SUSY 2027 Indico page:
  https://indico.ibs.re.kr/event/1301/

  Upload this single file in Indico as the event layout CSS.

  Design intent:
    - clean white / black international-conference style
    - large centered Indico header title: SUSY 2027
    - no CSS-injected official subtitle
    - official full conference title handled as real Overview-page HTML
    - centered horizontal menu below the header
    - v05 spacing: content-hugging masthead, tighter menu-to-content gap, cleaner page titles
    - readable body typography and reusable overview-page components

  Recommended Overview-page structure:
    <div class="susy2027-page">
      <div class="susy2027-overview-hero">...</div>
      ...normal overview content...
    </div>
*/

:root {
  /* ===== core palette: white / black / warm gray ===== */
  --susy2027-bg: #ffffff;
  --susy2027-paper: #ffffff;
  --susy2027-paper-soft: #f7f7f5;
  --susy2027-ink: #070707;
  --susy2027-ink-soft: rgba(7, 7, 7, 0.74);
  --susy2027-ink-muted: rgba(7, 7, 7, 0.56);
  --susy2027-ink-faint: rgba(7, 7, 7, 0.42);
  --susy2027-rule: rgba(7, 7, 7, 0.14);
  --susy2027-rule-strong: rgba(7, 7, 7, 0.32);
  --susy2027-shadow: 0 18px 48px rgba(0, 0, 0, 0.055);

  /* ===== header ===== */
  --susy2027-hero-h: clamp(270px, 31vh, 390px);
  --susy2027-title-size: clamp(52px, 8.4vw, 116px);
  --susy2027-title-letter: 0.070em;
  --susy2027-meta-size: clamp(13px, 1.05vw, 16px);
  --susy2027-meta-title-gap: clamp(18px, 2.55vh, 28px);
  --susy2027-meta-bottom-gap: clamp(16px, 2.20vh, 26px);

  /* ===== centered menu ===== */
  --susy2027-menu-font-size: 1.14rem;
  --susy2027-menu-font-size-mobile: 1.02rem;
  --susy2027-menu-sub-font-size-mobile: 0.94rem;
  --susy2027-menu-gap: clamp(0.78rem, 1.65vw, 1.42rem);
  --susy2027-menu-gap-mobile: 0.70rem;
  --susy2027-menu-offset-y: -24px;
  --susy2027-menu-bottom-gap: 0.90rem;
  --susy2027-menu-bottom-gap-mobile: 0.72rem;
  --susy2027-menu-weight: 560;
  --susy2027-menu-weight-active: 760;
  --susy2027-menu-underline: 1px;
  --susy2027-menu-underline-active: 2px;

  /* ===== body ===== */
  --susy2027-body-width: 92%;
  --susy2027-body-width-mobile: 94%;
  --susy2027-body-max: 980px;
  --susy2027-body-font-size: 1.16rem;
  --susy2027-body-font-size-mobile: 1.05rem;
  --susy2027-body-line-height: 1.72;
  --susy2027-body-line-height-mobile: 1.70;

  /* ===== reusable page components ===== */
  --susy2027-radius: 12px;
  --susy2027-radius-soft: 8px;
  --susy2027-card-border: rgba(7, 7, 7, 0.13);
  --susy2027-card-bg: rgba(255, 255, 255, 0.82);
  --susy2027-card-bg-soft: rgba(248, 248, 246, 0.92);
}

/* ========================================================================
   1. Global Indico shell
   ======================================================================== */

html,
body {
  background: var(--susy2027-bg) !important;
}

body {
  color: var(--susy2027-ink) !important;
}

/* ========================================================================
   2. Header: large centered Indico title
   ======================================================================== */

.confheader {
  min-height: var(--susy2027-hero-h) !important;
  position: relative !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  background:
    radial-gradient(
      820px 250px at 50% -48px,
      rgba(0, 0, 0, 0.050) 0%,
      rgba(0, 0, 0, 0.022) 34%,
      rgba(255, 255, 255, 0.000) 72%
    ),
    linear-gradient(180deg, #ffffff 0%, #fbfbfa 100%) !important;
  background-color: var(--susy2027-paper) !important;
  background-image: none;
  border-color: transparent !important;
  border-bottom: 1px solid var(--susy2027-rule) !important;
  box-shadow: none !important;
}

.confheader::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  background:
    linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.026) 0%,
      rgba(255, 255, 255, 0.000) 18%,
      rgba(255, 255, 255, 0.000) 82%,
      rgba(0, 0, 0, 0.026) 100%
    ),
    radial-gradient(
      580px 260px at 50% 34%,
      rgba(0, 0, 0, 0.028) 0%,
      rgba(0, 0, 0, 0.010) 32%,
      rgba(255, 255, 255, 0.000) 72%
    ) !important;
}

.confheader::after {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  bottom: 0 !important;
  z-index: 1 !important;
  width: min(1040px, 86vw) !important;
  height: 1px !important;
  transform: translateX(-50%) !important;
  pointer-events: none !important;
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.000) 0%,
    rgba(0, 0, 0, 0.25) 50%,
    rgba(0, 0, 0, 0.000) 100%
  ) !important;
}

.confheader .confTitleBox,
.confheader .confSubTitleBox {
  position: relative !important;
  z-index: 2 !important;
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

.confheader .confTitleBox {
  padding: clamp(34px, 5.0vh, 62px) 1.25rem 0.75rem !important;
}

.confheader .confTitleBox .confTitle,
.confheader .confTitleBox .confTitle h1 {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: center !important;
  line-height: 1.00 !important;
}

.confheader .confTitleBox .confTitle h1 > a,
.confheader .conference-title-link {
  display: block !important;
  width: 100% !important;
  max-width: min(1180px, 94vw) !important;
  margin: 0 auto !important;
  padding: 0 !important;
  color: var(--susy2027-ink) !important;
  text-align: center !important;
  text-decoration: none !important;
  text-shadow: none !important;
  background: transparent !important;
}

.confheader .conference-title-link,
.confheader .conference-title-link span[itemprop="title"],
.confheader .confTitleBox .confTitle h1 > a,
.confheader .confTitleBox .confTitle h1 > a span[itemprop="title"] {
  color: var(--susy2027-ink) !important;
  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    "Helvetica Neue",
    Arial,
    sans-serif !important;
  font-size: var(--susy2027-title-size) !important;
  font-weight: 820 !important;
  letter-spacing: var(--susy2027-title-letter) !important;
  line-height: 0.94 !important;
  text-transform: uppercase !important;
}

.confheader .conference-title-link span[itemprop="title"],
.confheader .confTitleBox .confTitle h1 > a span[itemprop="title"] {
  display: block !important;
}

/*
  Do not inject the official full conference title with CSS.
  Generated CSS content is not reliable as official page content and can be
  difficult to copy, search, translate, or maintain.  Use the Overview-page
  HTML hero block styled below instead.
*/
.confheader .conference-title-link::after,
.confheader .confTitleBox .confTitle h1 > a::after {
  content: none !important;
  display: none !important;
}

/* ===== Date / venue / timezone band ===== */

.confheader .confSubTitleBox {
  /* v03: give the date/venue more breathing room below the title,
     while reducing the empty band before the menu. */
  padding: var(--susy2027-meta-title-gap) 1.25rem var(--susy2027-meta-bottom-gap) !important;
}

.confheader .confSubTitleBox .confSubTitleContent,
.confheader .confSubTitleBox .confSubTitleContent.flexrow {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.confheader .confSubTitleBox .confSubTitleContent.flexrow {
  display: grid !important;
  grid-template-columns: 1fr auto 1fr !important;
  align-items: center !important;
  column-gap: 1.0rem !important;
}

.confheader .confSubTitleBox .confSubTitleContent.flexrow .confSubTitle {
  grid-column: 2 !important;
  justify-self: center !important;
  max-width: min(900px, 88vw) !important;
  color: var(--susy2027-ink-soft) !important;
  text-align: center !important;
  text-shadow: none !important;
}

.confheader .confSubTitleBox .confSubTitleContent .datePlace {
  color: var(--susy2027-ink-soft) !important;
  font-size: var(--susy2027-meta-size) !important;
  font-weight: 620 !important;
  letter-spacing: 0.045em !important;
  line-height: 1.55 !important;
  text-align: center !important;
  text-shadow: none !important;
}

.confheader .confSubTitleBox .confSubTitleContent .timezone {
  display: block !important;
  margin-top: 0.32rem !important;
  color: var(--susy2027-ink-faint) !important;
  font-size: 0.88rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.035em !important;
  text-align: center !important;
  text-shadow: none !important;
}

.confheader .confSubTitleBox .confSubTitleContent.flexrow #event-search-box {
  grid-column: 3 !important;
  justify-self: end !important;
  opacity: 0.72 !important;
  transition: opacity 130ms ease !important;
}

.confheader .confSubTitleBox .confSubTitleContent.flexrow #event-search-box:hover,
.confheader .confSubTitleBox .confSubTitleContent.flexrow #event-search-box:focus-within {
  opacity: 1 !important;
}

.confheader #event-search-box .ui.input {
  background: rgba(255, 255, 255, 0.82) !important;
  border: 1px solid var(--susy2027-rule) !important;
  border-radius: 999px !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.045) !important;
}

.confheader #event-search-box input {
  background: transparent !important;
  color: var(--susy2027-ink) !important;
}

.confheader #event-search-box input::placeholder {
  color: var(--susy2027-ink-faint) !important;
}

.confheader #event-search-box i.search.icon {
  color: var(--susy2027-ink-muted) !important;
}

/* ========================================================================
   3. Centered horizontal event menu
   ======================================================================== */

#confSectionsBox {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  background: var(--susy2027-bg) !important;
}

#confSectionsBox .conf_leftMenu {
  order: 1 !important;
  float: none !important;
  width: 100% !important;
  max-width: none !important;
  margin: var(--susy2027-menu-offset-y) auto var(--susy2027-menu-bottom-gap) !important;
  padding: 0.46rem 1.25rem 0.78rem !important;
  box-sizing: border-box !important;
  text-align: center !important;
  background: var(--susy2027-paper) !important;
  border: 0 !important;
  border-bottom: 1px solid var(--susy2027-rule) !important;
  box-shadow: none !important;
}

#confSectionsBox .conf_leftMenu > ul#outer,
#confSectionsBox .conf_leftMenu > ul,
#confSectionsBox .conf_leftMenu > div > ul,
#confSectionsBox .conf_leftMenu nav > ul,
#confSectionsBox .conf_leftMenu .page-list,
#confSectionsBox .conf_leftMenu .event-page-nav > ul,
#confSectionsBox .conf_leftMenu .event-page-header > ul {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: var(--susy2027-menu-gap) !important;
  list-style: none !important;
  width: 100% !important;
  max-width: min(1120px, 96vw) !important;
  margin: 0 auto !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

#confSectionsBox .conf_leftMenu > div,
#confSectionsBox .conf_leftMenu nav,
#confSectionsBox .conf_leftMenu .page-list,
#confSectionsBox .conf_leftMenu .event-page-nav,
#confSectionsBox .conf_leftMenu .event-page-header,
#confSectionsBox .conf_leftMenu .menuConfTitle,
#confSectionsBox .conf_leftMenu .menuConfMiddleCell {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

#confSectionsBox .conf_leftMenu > ul#outer > li,
#confSectionsBox .conf_leftMenu > ul > li,
#confSectionsBox .conf_leftMenu > div > ul > li,
#confSectionsBox .conf_leftMenu nav > ul > li,
#confSectionsBox .conf_leftMenu .page-list > li,
#confSectionsBox .conf_leftMenu .event-page-nav > ul > li,
#confSectionsBox .conf_leftMenu .event-page-header > ul > li,
#confSectionsBox .conf_leftMenu .page-list > *,
#confSectionsBox .conf_leftMenu ul.inner > li,
#confSectionsBox .conf_leftMenu ul ul > li {
  float: none !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

#confSectionsBox .conf_leftMenu .menuConfTitle > a,
#confSectionsBox .conf_leftMenu .menuConfMiddleCell > a,
#confSectionsBox .conf_leftMenu > ul > li > a,
#confSectionsBox .conf_leftMenu > ul#outer > li > a,
#confSectionsBox .conf_leftMenu > div > ul > li > a,
#confSectionsBox .conf_leftMenu nav > ul > li > a,
#confSectionsBox .conf_leftMenu .page-list > li > a,
#confSectionsBox .conf_leftMenu .event-page-nav > ul > li > a,
#confSectionsBox .conf_leftMenu .event-page-header > ul > li > a,
#confSectionsBox .conf_leftMenu .page-list a,
#confSectionsBox .conf_leftMenu ul.inner a,
#confSectionsBox .conf_leftMenu ul ul a {
  display: inline-block !important;
  padding: 0.14rem 0.08rem 0.34rem !important;
  color: var(--susy2027-ink-muted) !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: var(--susy2027-menu-underline) solid transparent !important;
  box-shadow: none !important;
  font-size: var(--susy2027-menu-font-size) !important;
  font-weight: var(--susy2027-menu-weight) !important;
  letter-spacing: 0.018em !important;
  line-height: 1.24 !important;
  text-align: center !important;
  text-decoration: none !important;
  text-shadow: none !important;
  transition:
    color 120ms ease,
    border-color 120ms ease,
    border-bottom-width 120ms ease,
    font-weight 120ms ease !important;
}

#confSectionsBox .conf_leftMenu .menuConfTitle > a:hover,
#confSectionsBox .conf_leftMenu .menuConfMiddleCell > a:hover,
#confSectionsBox .conf_leftMenu > ul > li > a:hover,
#confSectionsBox .conf_leftMenu > ul#outer > li > a:hover,
#confSectionsBox .conf_leftMenu > div > ul > li > a:hover,
#confSectionsBox .conf_leftMenu nav > ul > li > a:hover,
#confSectionsBox .conf_leftMenu .page-list > li > a:hover,
#confSectionsBox .conf_leftMenu .event-page-nav > ul > li > a:hover,
#confSectionsBox .conf_leftMenu .event-page-header > ul > li > a:hover,
#confSectionsBox .conf_leftMenu .page-list a:hover,
#confSectionsBox .conf_leftMenu ul.inner a:hover,
#confSectionsBox .conf_leftMenu ul ul a:hover {
  color: var(--susy2027-ink) !important;
  border-bottom-color: var(--susy2027-rule-strong) !important;
}

#confSectionsBox .conf_leftMenu li[class*="Selected"] > a,
#confSectionsBox .conf_leftMenu .menuConfSelected > a,
#confSectionsBox .conf_leftMenu li.selected > a,
#confSectionsBox .conf_leftMenu li.active > a,
#confSectionsBox .conf_leftMenu a[aria-current="page"],
#confSectionsBox .conf_leftMenu .current > a {
  color: var(--susy2027-ink) !important;
  font-weight: var(--susy2027-menu-weight-active) !important;
  border-bottom-color: var(--susy2027-ink) !important;
  border-bottom-width: var(--susy2027-menu-underline-active) !important;
}

#confSectionsBox .conf_leftMenu .support_box,
#confSectionsBox .conf_leftMenu .event-service-info {
  float: none !important;
  max-width: 820px !important;
  margin: 0.85rem auto 0 !important;
  text-align: center !important;
}

/* ========================================================================
   4. Body reading measure and basic typography
   ======================================================================== */

#confSectionsBox .confBodyBox {
  order: 2 !important;
  float: none !important;
  width: var(--susy2027-body-width) !important;
  max-width: var(--susy2027-body-max) !important;
  margin: 0 auto 4.0rem !important;
  color: var(--susy2027-ink) !important;
}

#confSectionsBox .confBodyBox .mainContent,
#confSectionsBox .confBodyBox .col2 {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
}

#confSectionsBox .confBodyBox p,
#confSectionsBox .confBodyBox li,
#confSectionsBox .confBodyBox dd {
  color: var(--susy2027-ink-soft) !important;
  font-size: var(--susy2027-body-font-size) !important;
  line-height: var(--susy2027-body-line-height) !important;
}

#confSectionsBox .confBodyBox p {
  margin: 0 0 1.05em 0 !important;
  text-align: left !important;
  text-align-last: left !important;
  hyphens: auto !important;
  overflow-wrap: break-word !important;
}

#confSectionsBox .confBodyBox ul,
#confSectionsBox .confBodyBox ol {
  margin: 0.36em 0 1.10em 1.45em !important;
  padding-left: 0.52em !important;
}

#confSectionsBox .confBodyBox li {
  margin-bottom: 0.10em !important;
  padding-left: 0.10em !important;
}

#confSectionsBox .confBodyBox li::marker {
  color: var(--susy2027-ink-faint) !important;
}

#confSectionsBox .confBodyBox h1,
#confSectionsBox .confBodyBox h2,
#confSectionsBox .confBodyBox h3,
#confSectionsBox .confBodyBox h4 {
  color: var(--susy2027-ink) !important;
  text-shadow: none !important;
}

#confSectionsBox .confBodyBox h2 {
  margin: 1.55em 0 0.70em !important;
  padding-top: 0.45em !important;
  border-top: 1px solid var(--susy2027-rule) !important;
  font-size: clamp(1.72rem, 2.2vw, 2.25rem) !important;
  font-weight: 760 !important;
  letter-spacing: -0.015em !important;
  line-height: 1.20 !important;
}

#confSectionsBox .confBodyBox h3 {
  margin: 1.35em 0 0.56em !important;
  padding: 0.12em 0 0.12em 0.70rem !important;
  border-left: 4px solid var(--susy2027-ink) !important;
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.050) 0%,
    rgba(255, 255, 255, 0.000) 76%
  ) !important;
  border-radius: 2px !important;
  font-size: clamp(1.28rem, 1.58vw, 1.58rem) !important;
  font-weight: 720 !important;
  line-height: 1.30 !important;
}

#confSectionsBox .confBodyBox h4 {
  margin: 1.15em 0 0.46em !important;
  color: var(--susy2027-ink-soft) !important;
  font-size: 1.12rem !important;
  font-weight: 720 !important;
  line-height: 1.34 !important;
}

#confSectionsBox .confBodyBox a {
  color: var(--susy2027-ink) !important;
  text-decoration: underline !important;
  text-decoration-color: rgba(0, 0, 0, 0.32) !important;
  text-decoration-thickness: 1px !important;
  text-underline-offset: 0.14em !important;
}

#confSectionsBox .confBodyBox a:hover,
#confSectionsBox .confBodyBox a:focus-visible {
  color: #000000 !important;
  text-decoration-color: rgba(0, 0, 0, 0.72) !important;
}

/* ========================================================================
   5. Optional reusable blocks for overview-page HTML
   Wrap custom page content as: <div class="susy2027-page">...</div>
   ======================================================================== */

#confSectionsBox .confBodyBox .susy2027-page,
#confSectionsBox .confBodyBox .susy2027-page * {
  box-sizing: border-box !important;
}

#confSectionsBox .confBodyBox .susy2027-page {
  color: var(--susy2027-ink-soft) !important;
}

#confSectionsBox .confBodyBox .susy2027-overview-hero {
  position: relative !important;
  overflow: hidden !important;
  margin: 0 auto 2.10rem !important;
  padding: clamp(2.15rem, 4.6vw, 3.85rem) clamp(1.10rem, 3.0vw, 2.40rem) !important;
  color: var(--susy2027-ink) !important;
  text-align: center !important;
  background:
    radial-gradient(
      520px 210px at 50% 0%,
      rgba(0, 0, 0, 0.040) 0%,
      rgba(0, 0, 0, 0.014) 34%,
      rgba(255, 255, 255, 0.000) 76%
    ),
    linear-gradient(180deg, #ffffff 0%, #fafafa 100%) !important;
  border-top: 1px solid var(--susy2027-rule) !important;
  border-bottom: 1px solid var(--susy2027-rule) !important;
  box-shadow: none !important;
}

#confSectionsBox .confBodyBox .susy2027-overview-hero::before,
#confSectionsBox .confBodyBox .susy2027-overview-hero::after {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  width: min(700px, 80vw) !important;
  height: 1px !important;
  transform: translateX(-50%) !important;
  pointer-events: none !important;
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.000) 0%,
    rgba(0, 0, 0, 0.22) 50%,
    rgba(0, 0, 0, 0.000) 100%
  ) !important;
}

#confSectionsBox .confBodyBox .susy2027-overview-hero::before {
  top: 0 !important;
}

#confSectionsBox .confBodyBox .susy2027-overview-hero::after {
  bottom: 0 !important;
}

#confSectionsBox .confBodyBox .susy2027-hero-kicker {
  margin: 0 0 0.78rem 0 !important;
  color: var(--susy2027-ink-muted) !important;
  font-size: clamp(0.86rem, 1.08vw, 1.02rem) !important;
  font-weight: 760 !important;
  letter-spacing: 0.16em !important;
  line-height: 1.25 !important;
  text-align: center !important;
  text-transform: uppercase !important;
}

#confSectionsBox .confBodyBox .susy2027-hero-title {
  max-width: 900px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  color: var(--susy2027-ink) !important;
  background: transparent !important;
  border: 0 !important;
  font-size: clamp(1.88rem, 3.45vw, 3.35rem) !important;
  font-weight: 820 !important;
  letter-spacing: -0.030em !important;
  line-height: 1.08 !important;
  text-align: center !important;
  text-wrap: balance;
}

#confSectionsBox .confBodyBox .susy2027-hero-divider {
  width: 76px !important;
  height: 2px !important;
  margin: clamp(1.05rem, 2.1vw, 1.55rem) auto clamp(0.88rem, 1.8vw, 1.30rem) !important;
  background: var(--susy2027-ink) !important;
}

#confSectionsBox .confBodyBox .susy2027-hero-meta {
  max-width: 820px !important;
  margin: 0 auto !important;
  color: var(--susy2027-ink-soft) !important;
  font-size: clamp(1.00rem, 1.20vw, 1.16rem) !important;
  font-weight: 610 !important;
  letter-spacing: 0.020em !important;
  line-height: 1.54 !important;
  text-align: center !important;
  text-align-last: center !important;
}

#confSectionsBox .confBodyBox .susy2027-hero-meta .susy2027-meta-sep {
  display: inline-block !important;
  margin: 0 0.42em !important;
  color: var(--susy2027-ink-faint) !important;
}

#confSectionsBox .confBodyBox .susy2027-page .susy-lead {
  color: var(--susy2027-ink-soft) !important;
  font-size: clamp(1.18rem, 1.5vw, 1.34rem) !important;
  line-height: 1.72 !important;
  margin-bottom: 1.25rem !important;
}

#confSectionsBox .confBodyBox .susy-card-grid,
#confSectionsBox .confBodyBox .susy-scope-grid,
#confSectionsBox .confBodyBox .susy-date-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
  gap: 0.82rem !important;
  margin: 0.95rem 0 1.45rem !important;
}

#confSectionsBox .confBodyBox .susy-card,
#confSectionsBox .confBodyBox .susy-scope-card,
#confSectionsBox .confBodyBox .susy-date-card,
#confSectionsBox .confBodyBox .susy-callout,
#confSectionsBox .confBodyBox .susy-hosted-card,
#confSectionsBox .confBodyBox .susy-notice {
  position: relative !important;
  overflow: hidden !important;
  background: var(--susy2027-card-bg) !important;
  border: 1px solid var(--susy2027-card-border) !important;
  border-radius: var(--susy2027-radius) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.040) !important;
}

#confSectionsBox .confBodyBox .susy-card,
#confSectionsBox .confBodyBox .susy-scope-card,
#confSectionsBox .confBodyBox .susy-date-card {
  padding: 0.95rem 1.04rem !important;
}

#confSectionsBox .confBodyBox .susy-callout,
#confSectionsBox .confBodyBox .susy-hosted-card,
#confSectionsBox .confBodyBox .susy-notice {
  padding: 1.05rem 1.14rem !important;
  margin: 0.95rem 0 1.35rem !important;
}

#confSectionsBox .confBodyBox .susy-callout,
#confSectionsBox .confBodyBox .susy-notice {
  background: var(--susy2027-card-bg-soft) !important;
  border-left: 4px solid var(--susy2027-ink) !important;
}

#confSectionsBox .confBodyBox .susy-card p,
#confSectionsBox .confBodyBox .susy-scope-card p,
#confSectionsBox .confBodyBox .susy-date-card p,
#confSectionsBox .confBodyBox .susy-callout p,
#confSectionsBox .confBodyBox .susy-hosted-card p,
#confSectionsBox .confBodyBox .susy-notice p {
  margin: 0 0 0.60em 0 !important;
  text-align: left !important;
  text-align-last: left !important;
}

#confSectionsBox .confBodyBox .susy-card p:last-child,
#confSectionsBox .confBodyBox .susy-scope-card p:last-child,
#confSectionsBox .confBodyBox .susy-date-card p:last-child,
#confSectionsBox .confBodyBox .susy-callout p:last-child,
#confSectionsBox .confBodyBox .susy-hosted-card p:last-child,
#confSectionsBox .confBodyBox .susy-notice p:last-child {
  margin-bottom: 0 !important;
}

#confSectionsBox .confBodyBox .susy-label,
#confSectionsBox .confBodyBox .susy-card-label,
#confSectionsBox .confBodyBox .susy-date-label {
  display: block !important;
  color: var(--susy2027-ink-muted) !important;
  font-size: 0.84rem !important;
  font-weight: 740 !important;
  letter-spacing: 0.070em !important;
  line-height: 1.25 !important;
  margin: 0 0 0.38rem 0 !important;
  text-transform: uppercase !important;
}

#confSectionsBox .confBodyBox .susy-card-title,
#confSectionsBox .confBodyBox .susy-date-value {
  display: block !important;
  color: var(--susy2027-ink) !important;
  font-size: 1.08rem !important;
  font-weight: 720 !important;
  line-height: 1.36 !important;
}

#confSectionsBox .confBodyBox .susy-muted {
  color: var(--susy2027-ink-muted) !important;
}

#confSectionsBox .confBodyBox .susy-divider {
  height: 1px !important;
  margin: 1.65rem 0 !important;
  border: 0 !important;
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.000) 0%,
    rgba(0, 0, 0, 0.16) 50%,
    rgba(0, 0, 0, 0.000) 100%
  ) !important;
}

#confSectionsBox .confBodyBox .susy-table-wrap {
  overflow-x: auto !important;
  margin: 0.95rem 0 1.45rem !important;
  border: 1px solid var(--susy2027-rule) !important;
  border-radius: var(--susy2027-radius-soft) !important;
}

#confSectionsBox .confBodyBox .susy-table,
#confSectionsBox .confBodyBox .susy-table-wrap table {
  width: 100% !important;
  border-collapse: collapse !important;
  background: var(--susy2027-paper) !important;
}

#confSectionsBox .confBodyBox .susy-table th,
#confSectionsBox .confBodyBox .susy-table td,
#confSectionsBox .confBodyBox .susy-table-wrap table th,
#confSectionsBox .confBodyBox .susy-table-wrap table td {
  padding: 0.66rem 0.76rem !important;
  border-bottom: 1px solid var(--susy2027-rule) !important;
  color: var(--susy2027-ink-soft) !important;
  font-size: 0.98rem !important;
  line-height: 1.44 !important;
  text-align: left !important;
  vertical-align: top !important;
}

#confSectionsBox .confBodyBox .susy-table th,
#confSectionsBox .confBodyBox .susy-table-wrap table th {
  color: var(--susy2027-ink) !important;
  background: var(--susy2027-paper-soft) !important;
  font-weight: 720 !important;
}

#confSectionsBox .confBodyBox .susy-table tr:last-child td,
#confSectionsBox .confBodyBox .susy-table-wrap table tr:last-child td {
  border-bottom: 0 !important;
}

/* ========================================================================
   6. Mobile
   ======================================================================== */

@media (max-width: 768px), (hover: none) and (pointer: coarse) {
  :root {
    --susy2027-hero-h: clamp(260px, 36vh, 360px);
    --susy2027-title-size: clamp(42px, 12.8vw, 74px);
    --susy2027-title-letter: 0.040em;
    --susy2027-meta-size: clamp(12.5px, 3.5vw, 15px);
    --susy2027-meta-title-gap: clamp(14px, 2.4vh, 22px);
    --susy2027-meta-bottom-gap: clamp(12px, 2.0vh, 20px);
    --susy2027-menu-offset-y: -18px;
    --susy2027-body-width: var(--susy2027-body-width-mobile);
    --susy2027-body-font-size: var(--susy2027-body-font-size-mobile);
    --susy2027-body-line-height: var(--susy2027-body-line-height-mobile);
  }

  .confheader .confTitleBox {
    padding: clamp(28px, 5.0vh, 48px) 0.92rem 0.65rem !important;
  }

  .confheader .confSubTitleBox {
    padding: var(--susy2027-meta-title-gap) 0.92rem var(--susy2027-meta-bottom-gap) !important;
  }

  .confheader .confSubTitleBox .confSubTitleContent.flexrow {
    grid-template-columns: 1fr !important;
    row-gap: 0.62rem !important;
  }

  .confheader .confSubTitleBox .confSubTitleContent.flexrow .confSubTitle,
  .confheader .confSubTitleBox .confSubTitleContent.flexrow #event-search-box {
    grid-column: 1 !important;
    justify-self: center !important;
  }

  .confheader .confSubTitleBox .confSubTitleContent.flexrow #event-search-box {
    width: min(520px, 100%) !important;
  }

  #confSectionsBox .conf_leftMenu {
    margin: var(--susy2027-menu-offset-y) auto var(--susy2027-menu-bottom-gap-mobile) !important;
    padding: 0.44rem 0.88rem 0.68rem !important;
  }

  #confSectionsBox .conf_leftMenu > ul#outer,
  #confSectionsBox .conf_leftMenu > ul,
  #confSectionsBox .conf_leftMenu > div > ul,
  #confSectionsBox .conf_leftMenu nav > ul,
  #confSectionsBox .conf_leftMenu .page-list,
  #confSectionsBox .conf_leftMenu .event-page-nav > ul,
  #confSectionsBox .conf_leftMenu .event-page-header > ul {
    gap: var(--susy2027-menu-gap-mobile) !important;
  }

  #confSectionsBox .conf_leftMenu .menuConfTitle > a,
  #confSectionsBox .conf_leftMenu .menuConfMiddleCell > a,
  #confSectionsBox .conf_leftMenu > ul > li > a,
  #confSectionsBox .conf_leftMenu > ul#outer > li > a,
  #confSectionsBox .conf_leftMenu > div > ul > li > a,
  #confSectionsBox .conf_leftMenu nav > ul > li > a,
  #confSectionsBox .conf_leftMenu .page-list > li > a,
  #confSectionsBox .conf_leftMenu .event-page-nav > ul > li > a,
  #confSectionsBox .conf_leftMenu .event-page-header > ul > li > a,
  #confSectionsBox .conf_leftMenu .page-list a {
    font-size: var(--susy2027-menu-font-size-mobile) !important;
    padding-bottom: 0.28rem !important;
  }

  #confSectionsBox .conf_leftMenu ul.inner,
  #confSectionsBox .conf_leftMenu ul ul {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: var(--susy2027-menu-gap-mobile) !important;
    list-style: none !important;
    margin: 0.18rem 0 0 0 !important;
    padding: 0 !important;
  }

  #confSectionsBox .conf_leftMenu ul.inner a,
  #confSectionsBox .conf_leftMenu ul ul a {
    font-size: var(--susy2027-menu-sub-font-size-mobile) !important;
    padding: 0.08rem 0.08rem 0.28rem !important;
  }

  #confSectionsBox .confBodyBox {
    max-width: none !important;
    margin-bottom: 3.0rem !important;
  }

  #confSectionsBox .confBodyBox p,
  #confSectionsBox .confBodyBox p *,
  #confSectionsBox .confBodyBox li,
  #confSectionsBox .confBodyBox li *,
  #confSectionsBox .confBodyBox dd,
  #confSectionsBox .confBodyBox dd * {
    font-size: var(--susy2027-body-font-size) !important;
    line-height: var(--susy2027-body-line-height) !important;
  }

  #confSectionsBox .confBodyBox h2 {
    font-size: 1.56rem !important;
  }

  #confSectionsBox .confBodyBox h3 {
    font-size: 1.22rem !important;
  }

  #confSectionsBox .confBodyBox .susy2027-overview-hero {
    margin-bottom: 1.55rem !important;
    padding: 1.85rem 0.92rem 2.05rem !important;
  }

  #confSectionsBox .confBodyBox .susy2027-hero-kicker {
    margin-bottom: 0.62rem !important;
    font-size: 0.78rem !important;
    letter-spacing: 0.13em !important;
  }

  #confSectionsBox .confBodyBox .susy2027-hero-title {
    font-size: clamp(1.58rem, 7.2vw, 2.26rem) !important;
    line-height: 1.12 !important;
  }

  #confSectionsBox .confBodyBox .susy2027-hero-meta {
    font-size: 0.95rem !important;
    line-height: 1.52 !important;
  }

  #confSectionsBox .confBodyBox .susy2027-hero-meta .susy2027-meta-sep {
    display: block !important;
    height: 0.18rem !important;
    margin: 0 !important;
    color: transparent !important;
  }

  #confSectionsBox .confBodyBox .susy-card-grid,
  #confSectionsBox .confBodyBox .susy-scope-grid,
  #confSectionsBox .confBodyBox .susy-date-grid {
    grid-template-columns: 1fr !important;
    gap: 0.72rem !important;
  }
}

@media (max-width: 430px) {
  :root {
    --susy2027-title-size: clamp(38px, 13.2vw, 58px);
  }
}


/*
  SUSY 2027 — v03 -> v04 compact spacing patch

  Purpose:
    1) tighten the three header gaps:
       top(header) -> main title, main title -> date/venue, date/venue -> bottom(header)
    2) reduce the distance between the centered menu and page content
    3) make ordinary page titles such as "Travel & Venue" smaller and calmer

  Usage:
    Paste this block at the very end of the current v03 CSS, or use the full v04 file.
*/

:root {
  /* ===== Header spacing controls =====
     These four variables are the main knobs for the SUSY 2027 masthead. */
  --susy2027-hero-h: clamp(232px, 24.8vh, 302px);
  --susy2027-header-title-top-gap: clamp(24px, 3.25vh, 40px);
  --susy2027-meta-title-gap: clamp(12px, 1.55vh, 19px);
  --susy2027-meta-bottom-gap: clamp(10px, 1.30vh, 17px);

  /* ===== Menu-to-content spacing controls ===== */
  --susy2027-menu-offset-y: -12px;
  --susy2027-menu-top-pad: 0.28rem;
  --susy2027-menu-bottom-pad: 0.50rem;
  --susy2027-menu-bottom-gap: 0.34rem;

  /* ===== Ordinary page-title controls, e.g. Travel & Venue ===== */
  --susy2027-page-title-top-gap: 0.48rem;
  --susy2027-page-title-pad-top: 0.24em;
  --susy2027-page-title-bottom-gap: 0.58rem;
  --susy2027-page-title-size: clamp(1.42rem, 1.76vw, 1.92rem);
  --susy2027-page-title-weight: 700;
}

/* More deterministic masthead layout: avoid extra vertical space from flex centering. */
.confheader {
  min-height: var(--susy2027-hero-h) !important;
  justify-content: flex-start !important;
}

/* Gap 1: top(header) -> SUSY 2027 title */
.confheader .confTitleBox {
  padding: var(--susy2027-header-title-top-gap) 1.25rem 0 !important;
}

/* Gap 2 and 3: title -> date/venue, and date/venue -> bottom(header) */
.confheader .confSubTitleBox {
  padding: var(--susy2027-meta-title-gap) 1.25rem var(--susy2027-meta-bottom-gap) !important;
}

/* Make the date/venue band a little more compact without making it cramped. */
.confheader .confSubTitleBox .confSubTitleContent .datePlace {
  line-height: 1.42 !important;
}

.confheader .confSubTitleBox .confSubTitleContent .timezone {
  margin-top: 0.18rem !important;
  font-size: 0.80rem !important;
  line-height: 1.25 !important;
}

/* Pull the menu only slightly into the header and reduce internal menu padding. */
#confSectionsBox .conf_leftMenu {
  margin: var(--susy2027-menu-offset-y) auto var(--susy2027-menu-bottom-gap) !important;
  padding: var(--susy2027-menu-top-pad) 1.25rem var(--susy2027-menu-bottom-pad) !important;
}

#confSectionsBox .conf_leftMenu .menuConfTitle > a,
#confSectionsBox .conf_leftMenu .menuConfMiddleCell > a,
#confSectionsBox .conf_leftMenu > ul > li > a,
#confSectionsBox .conf_leftMenu > ul#outer > li > a,
#confSectionsBox .conf_leftMenu > div > ul > li > a,
#confSectionsBox .conf_leftMenu nav > ul > li > a,
#confSectionsBox .conf_leftMenu .page-list > li > a,
#confSectionsBox .conf_leftMenu .event-page-nav > ul > li > a,
#confSectionsBox .conf_leftMenu .event-page-header > ul > li > a,
#confSectionsBox .conf_leftMenu .page-list a,
#confSectionsBox .conf_leftMenu ul.inner a,
#confSectionsBox .conf_leftMenu ul ul a {
  padding: 0.10rem 0.08rem 0.28rem !important;
}

/* Keep the body itself close to the menu; page h2 controls the final visual gap. */
#confSectionsBox .confBodyBox {
  margin: 0 auto 4.0rem !important;
}

/* Ordinary page headings.  Exclude the custom Overview hero subtitle h2. */
#confSectionsBox .confBodyBox h2:not(.susy2027-hero-title) {
  margin: 1.05em 0 var(--susy2027-page-title-bottom-gap) !important;
  padding-top: var(--susy2027-page-title-pad-top) !important;
  font-size: var(--susy2027-page-title-size) !important;
  font-weight: var(--susy2027-page-title-weight) !important;
  letter-spacing: -0.018em !important;
  line-height: 1.18 !important;
}

#confSectionsBox .confBodyBox h2:not(.susy2027-hero-title):first-of-type {
  margin-top: var(--susy2027-page-title-top-gap) !important;
}

@media (max-width: 768px), (hover: none) and (pointer: coarse) {
  :root {
    --susy2027-hero-h: clamp(224px, 32vh, 322px);
    --susy2027-header-title-top-gap: clamp(20px, 3.1vh, 34px);
    --susy2027-meta-title-gap: clamp(10px, 1.7vh, 17px);
    --susy2027-meta-bottom-gap: clamp(9px, 1.5vh, 16px);
    --susy2027-menu-offset-y: -10px;
    --susy2027-menu-bottom-gap-mobile: 0.42rem;
    --susy2027-page-title-top-gap: 0.44rem;
    --susy2027-page-title-size: 1.45rem;
  }

  .confheader .confTitleBox {
    padding: var(--susy2027-header-title-top-gap) 0.92rem 0 !important;
  }

  .confheader .confSubTitleBox {
    padding: var(--susy2027-meta-title-gap) 0.92rem var(--susy2027-meta-bottom-gap) !important;
  }

  #confSectionsBox .conf_leftMenu {
    margin: var(--susy2027-menu-offset-y) auto var(--susy2027-menu-bottom-gap-mobile) !important;
    padding: 0.32rem 0.88rem 0.54rem !important;
  }
}
/*
  SUSY 2027 — v04 -> v05 responsive header cleanup patch

  Purpose:
    1) Make the masthead compact in narrow-but-tall windows.
       v04 used vh-based header height, so a half-width browser window with
       large height could keep a tall header while the SUSY 2027 title shrank.
       v05 makes the masthead primarily width/content-controlled.

    2) Remove the unnecessary top rule above the first ordinary page title.

    3) Provide a safe compact-title helper for non-Overview pages, using <div>
       rather than <section>, because Indico/CKEditor may escape unsupported
       section tags depending on editing mode and sanitization.

  Usage:
    Paste this block at the very end of the current v04 CSS, or use the full
    v05 CSS file.
*/

:root {
  /* ===== Header spacing controls =====
     Main idea: use vw rather than vh, so half-screen/tall windows do not
     create a large empty band between date/venue and the menu. */
  --susy2027-hero-h: clamp(232px, 14.2vw, 292px);
  --susy2027-header-title-top-gap: clamp(22px, 2.40vw, 38px);
  --susy2027-meta-title-gap: clamp(10px, 0.90vw, 17px);
  --susy2027-meta-bottom-gap: clamp(8px, 0.70vw, 14px);

  /* ===== Menu-to-body spacing controls ===== */
  --susy2027-menu-offset-y: -6px;
  --susy2027-menu-top-pad: 0.22rem;
  --susy2027-menu-bottom-pad: 0.40rem;
  --susy2027-menu-bottom-gap: 0.16rem;

  /* ===== Ordinary page-title controls ===== */
  --susy2027-page-title-top-gap: 0.10rem;
  --susy2027-page-title-pad-top: 0;
  --susy2027-page-title-bottom-gap: 0.48rem;
  --susy2027-page-title-size: clamp(1.30rem, 1.50vw, 1.72rem);
  --susy2027-page-title-weight: 700;

  /* Optional compact title used inside custom body content. */
  --susy2027-compact-title-size: clamp(1.70rem, 2.65vw, 2.35rem);
}

/* Keep masthead layout deterministic and controlled by the variables above. */
.confheader {
  min-height: var(--susy2027-hero-h) !important;
  height: auto !important;
  justify-content: flex-start !important;
}

/* Gap 1: top(header) -> SUSY 2027 title */
.confheader .confTitleBox {
  padding: var(--susy2027-header-title-top-gap) 1.25rem 0 !important;
}

/* Gap 2 and 3: title -> date/venue, and date/venue -> bottom(header).
   Note: any extra gap beyond these values usually comes from --susy2027-hero-h. */
.confheader .confSubTitleBox {
  padding: var(--susy2027-meta-title-gap) 1.25rem var(--susy2027-meta-bottom-gap) !important;
}

.confheader .confSubTitleBox .confSubTitleContent .datePlace {
  line-height: 1.36 !important;
}

.confheader .confSubTitleBox .confSubTitleContent .timezone {
  margin-top: 0.12rem !important;
  font-size: 0.78rem !important;
  line-height: 1.22 !important;
}

/* Centered menu: keep it close to the masthead and the body. */
#confSectionsBox .conf_leftMenu {
  margin: var(--susy2027-menu-offset-y) auto var(--susy2027-menu-bottom-gap) !important;
  padding: var(--susy2027-menu-top-pad) 1.25rem var(--susy2027-menu-bottom-pad) !important;
}

#confSectionsBox .conf_leftMenu .menuConfTitle > a,
#confSectionsBox .conf_leftMenu .menuConfMiddleCell > a,
#confSectionsBox .conf_leftMenu > ul > li > a,
#confSectionsBox .conf_leftMenu > ul#outer > li > a,
#confSectionsBox .conf_leftMenu > div > ul > li > a,
#confSectionsBox .conf_leftMenu nav > ul > li > a,
#confSectionsBox .conf_leftMenu .page-list > li > a,
#confSectionsBox .conf_leftMenu .event-page-nav > ul > li > a,
#confSectionsBox .conf_leftMenu .event-page-header > ul > li > a,
#confSectionsBox .conf_leftMenu .page-list a,
#confSectionsBox .conf_leftMenu ul.inner a,
#confSectionsBox .conf_leftMenu ul ul a {
  padding: 0.08rem 0.08rem 0.24rem !important;
}

/* Ordinary page headings such as Travel & Venue / Previous SUSY. */
#confSectionsBox .confBodyBox h2:not(.susy2027-hero-title) {
  margin: 0.86em 0 var(--susy2027-page-title-bottom-gap) !important;
  padding-top: var(--susy2027-page-title-pad-top) !important;
  font-size: var(--susy2027-page-title-size) !important;
  font-weight: var(--susy2027-page-title-weight) !important;
  letter-spacing: -0.018em !important;
  line-height: 1.18 !important;
}

/* Remove the unnecessary horizontal rule above the page's first title. */
#confSectionsBox .confBodyBox h2:not(.susy2027-hero-title):first-of-type,
#confSectionsBox .confBodyBox .mainContent > h2:first-child,
#confSectionsBox .confBodyBox .col2 > h2:first-child {
  margin-top: var(--susy2027-page-title-top-gap) !important;
  padding-top: 0 !important;
  border-top: 0 !important;
}

/* Optional helper for subpage intro titles.
   Recommended tag:
     <div class="susy2027-page-compact-title">Previous SUSY Conferences</div>
*/
#confSectionsBox .confBodyBox .susy2027-page-compact-title {
  margin: 0.20rem auto 1.05rem !important;
  padding: 0 !important;
  color: var(--susy2027-ink) !important;
  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    "Helvetica Neue",
    Arial,
    sans-serif !important;
  font-size: var(--susy2027-compact-title-size) !important;
  font-weight: 700 !important;
  line-height: 1.16 !important;
  letter-spacing: -0.020em !important;
  text-align: center !important;
  border: 0 !important;
  background: transparent !important;
}

/* Half-width desktop / narrow laptop windows.
   This is the important correction for the screenshot case. */
@media (max-width: 1180px) {
  :root {
    --susy2027-hero-h: clamp(198px, 18.0vw, 218px);
    --susy2027-header-title-top-gap: clamp(18px, 2.10vw, 26px);
    --susy2027-meta-title-gap: clamp(8px, 0.85vw, 12px);
    --susy2027-meta-bottom-gap: clamp(7px, 0.70vw, 10px);
    --susy2027-menu-offset-y: -4px;
    --susy2027-menu-top-pad: 0.18rem;
    --susy2027-menu-bottom-pad: 0.34rem;
    --susy2027-menu-bottom-gap: 0.08rem;
    --susy2027-page-title-top-gap: 0.04rem;
    --susy2027-page-title-size: clamp(1.26rem, 1.70vw, 1.58rem);
  }
}

@media (max-width: 768px), (hover: none) and (pointer: coarse) {
  :root {
    --susy2027-hero-h: clamp(182px, 42vw, 218px);
    --susy2027-header-title-top-gap: clamp(16px, 4.0vw, 22px);
    --susy2027-meta-title-gap: clamp(7px, 1.9vw, 10px);
    --susy2027-meta-bottom-gap: clamp(6px, 1.7vw, 9px);
    --susy2027-menu-offset-y: -3px;
    --susy2027-menu-bottom-gap-mobile: 0.12rem;
    --susy2027-page-title-top-gap: 0.02rem;
    --susy2027-page-title-size: 1.32rem;
  }

  .confheader .confTitleBox {
    padding: var(--susy2027-header-title-top-gap) 0.92rem 0 !important;
  }

  .confheader .confSubTitleBox {
    padding: var(--susy2027-meta-title-gap) 0.92rem var(--susy2027-meta-bottom-gap) !important;
  }

  #confSectionsBox .conf_leftMenu {
    margin: var(--susy2027-menu-offset-y) auto var(--susy2027-menu-bottom-gap-mobile) !important;
    padding: 0.18rem 0.88rem 0.36rem !important;
  }
}
/*
  SUSY 2027 Indico CSS patch — v06
  QC-for-QFT-style header flow

  Purpose:
  - Replace the min-height-driven SUSY header spacing with a content-flow header,
    closer to the QC for QFT event page.
  - The header height is now generated mainly by explicit top/bottom padding and
    the title-to-meta gap, rather than by --susy2027-hero-h.
  - Append this block at the very end of the current v05 CSS.
*/

:root {
  /* QC-for-QFT-style content-flow header controls */
  --susy2027-header-pad-top: clamp(40px, 4.0vw, 72px);
  --susy2027-header-pad-bottom: clamp(20px, 2.0vw, 36px);
  --susy2027-title-meta-gap: clamp(18px, 1.65vw, 30px);

  /* Menu is no longer pulled upward to compensate for a too-tall header. */
  --susy2027-menu-offset-y: 0px;
  --susy2027-menu-top-pad: 0.44rem;
  --susy2027-menu-bottom-pad: 0.42rem;
  --susy2027-menu-bottom-gap: 0.18rem;
}

/*
  Main change:
  v04/v05 relied on min-height. In narrow desktop windows, the title became
  smaller while the min-height stayed large, leaving empty space below the
  date/place block. This makes the header content-based instead.
*/
.confheader {
  min-height: 0 !important;
  height: auto !important;
  padding: var(--susy2027-header-pad-top) 0 var(--susy2027-header-pad-bottom) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: stretch !important;
}

/* Title band: the only large internal gap is now title -> date/place. */
.confheader .confTitleBox {
  padding: 0 1.25rem var(--susy2027-title-meta-gap) !important;
  margin: 0 !important;
}

.confheader .confTitleBox .confTitle,
.confheader .confTitleBox .confTitle h1 {
  padding: 0 !important;
  margin: 0 !important;
}

/* Meta band: no extra top/bottom padding; spacing is controlled above. */
.confheader .confSubTitleBox {
  padding: 0 1.25rem !important;
  margin: 0 !important;
}

.confheader .confSubTitleBox .confSubTitleContent,
.confheader .confSubTitleBox .confSubTitleContent.flexrow {
  padding: 0 !important;
  margin: 0 !important;
}

.confheader .confSubTitleBox .confSubTitleContent .datePlace {
  line-height: 1.36 !important;
}

.confheader .confSubTitleBox .confSubTitleContent .timezone {
  margin-top: 0.16rem !important;
  line-height: 1.18 !important;
}

/* Menu: keep it in natural flow immediately below the header. */
#confSectionsBox .conf_leftMenu {
  margin: var(--susy2027-menu-offset-y) auto var(--susy2027-menu-bottom-gap) !important;
  padding: var(--susy2027-menu-top-pad) 1.25rem var(--susy2027-menu-bottom-pad) !important;
}

/* Narrow desktop / half-screen windows. */
@media (max-width: 1180px) {
  :root {
    --susy2027-header-pad-top: clamp(30px, 3.2vw, 40px);
    --susy2027-header-pad-bottom: clamp(12px, 1.55vw, 20px);
    --susy2027-title-meta-gap: clamp(12px, 1.45vw, 18px);
    --susy2027-menu-offset-y: 0px;
    --susy2027-menu-top-pad: 0.32rem;
    --susy2027-menu-bottom-pad: 0.32rem;
    --susy2027-menu-bottom-gap: 0.04rem;
  }
}

/* Tablet/mobile: preserve compactness without crushing the title. */
@media (max-width: 768px), (hover: none) and (pointer: coarse) {
  :root {
    --susy2027-header-pad-top: clamp(22px, 5.2vw, 34px);
    --susy2027-header-pad-bottom: clamp(10px, 2.8vw, 16px);
    --susy2027-title-meta-gap: clamp(9px, 2.5vw, 14px);
    --susy2027-menu-offset-y: 0px;
    --susy2027-menu-top-pad: 0.26rem;
    --susy2027-menu-bottom-pad: 0.34rem;
    --susy2027-menu-bottom-gap-mobile: 0.06rem;
  }

  .confheader {
    padding: var(--susy2027-header-pad-top) 0 var(--susy2027-header-pad-bottom) !important;
  }

  .confheader .confTitleBox {
    padding: 0 0.92rem var(--susy2027-title-meta-gap) !important;
  }

  .confheader .confSubTitleBox {
    padding: 0 0.92rem !important;
  }

  .confheader .confSubTitleBox .confSubTitleContent,
  .confheader .confSubTitleBox .confSubTitleContent.flexrow {
    padding: 0 !important;
  }

  #confSectionsBox .conf_leftMenu {
    margin: var(--susy2027-menu-offset-y) auto var(--susy2027-menu-bottom-gap-mobile) !important;
    padding: var(--susy2027-menu-top-pad) 0.88rem var(--susy2027-menu-bottom-pad) !important;
  }
}
/*
  SUSY 2027 Indico CSS patch — v06a
  Smaller main title

  Append this block at the very end of the current v06 CSS.
*/

:root {
  /* Previous v06 main value was roughly: clamp(52px, 8.4vw, 116px) */
  --susy2027-title-size: clamp(48px, 7.2vw, 98px);
  --susy2027-title-letter: 0.060em;
}

@media (max-width: 1180px) {
  :root {
    /* Previous narrow-desktop value was roughly: clamp(42px, 12.8vw, 74px) */
    --susy2027-title-size: clamp(40px, 10.8vw, 66px);
    --susy2027-title-letter: 0.054em;
  }
}

@media (max-width: 768px), (hover: none) and (pointer: coarse) {
  :root {
    /* Previous mobile value was roughly: clamp(38px, 13.2vw, 58px) */
    --susy2027-title-size: clamp(34px, 11.5vw, 52px);
    --susy2027-title-letter: 0.046em;
  }
}
/*
  SUSY 2027 Indico CSS patch — v06c
  QC-for-QFT-style paragraph alignment policy

  Append this block at the very end of the current v06a CSS.

  Policy inherited from the QC for QFT stylesheet:
  - normal body paragraphs are justified for long-form overview text;
  - the final line stays left-aligned;
  - compact UI/card/table/meta blocks remain left- or center-aligned where appropriate.
*/

#confSectionsBox .confBodyBox p {
  text-align: justify !important;
  text-align-last: left !important;
  text-justify: inter-word !important;
  hyphens: auto !important;
  overflow-wrap: break-word !important;
  margin: 0 0 1.05em 0 !important;
}

/* Keep the Overview hero meta centered, because it functions as display metadata. */
#confSectionsBox .confBodyBox .susy2027-hero-meta,
#confSectionsBox .confBodyBox p.susy2027-hero-meta {
  text-align: center !important;
  text-align-last: center !important;
}

/* Compact cards, notices, and date/scope boxes read better left-aligned. */
#confSectionsBox .confBodyBox .susy-card p,
#confSectionsBox .confBodyBox .susy-scope-card p,
#confSectionsBox .confBodyBox .susy-date-card p,
#confSectionsBox .confBodyBox .susy-callout p,
#confSectionsBox .confBodyBox .susy-hosted-card p,
#confSectionsBox .confBodyBox .susy-notice p,
#confSectionsBox .confBodyBox .susy-speakers-page p,
#confSectionsBox .confBodyBox .susy-profile-card p,
#confSectionsBox .confBodyBox .susy-committee-card p {
  text-align: left !important;
  text-align-last: left !important;
  hyphens: none !important;
}

/* Paragraphs inside tables should not be justified. */
#confSectionsBox .confBodyBox table p,
#confSectionsBox .confBodyBox .susy-table p,
#confSectionsBox .confBodyBox .susy-table-wrap p {
  text-align: left !important;
  text-align-last: left !important;
  hyphens: none !important;
  margin: 0 0 0.35em 0 !important;
}

#confSectionsBox .confBodyBox table p:last-child,
#confSectionsBox .confBodyBox .susy-table p:last-child,
#confSectionsBox .confBodyBox .susy-table-wrap p:last-child {
  margin-bottom: 0 !important;
}

/* Mobile: avoid awkward rivers in narrow columns. */
@media (max-width: 768px), (hover: none) and (pointer: coarse) {
  #confSectionsBox .confBodyBox p {
    text-align: left !important;
    text-align-last: left !important;
    hyphens: none !important;
  }

  #confSectionsBox .confBodyBox .susy2027-hero-meta,
  #confSectionsBox .confBodyBox p.susy2027-hero-meta {
    text-align: center !important;
    text-align-last: center !important;
  }
}
/* ========================================================================
   SUSY 2027 v06d patch — Hosted-by card, QC-for-QFT style
   Append this block at the very end of the current SUSY 2027 CSS.
   It supports both the preferred SUSY class names and the older qcqft-* names
   so that existing test HTML keeps working while you migrate the markup.
   ======================================================================== */

:root {
  --susy2027-hosted-card-bg: rgba(255, 255, 255, 0.64);
  --susy2027-hosted-card-border: rgba(0, 0, 0, 0.115);
  --susy2027-hosted-card-shadow: 0 8px 22px rgba(0, 0, 0, 0.045);
  --susy2027-hosted-card-radius: 10px;
  --susy2027-hosted-card-pad-y: 1.00rem;
  --susy2027-hosted-card-pad-x: 1.18rem;
  --susy2027-hosted-logo-w: clamp(160px, 20vw, 235px);
}

#confSectionsBox .confBodyBox .susy2027-hosted-card,
#confSectionsBox .confBodyBox .qcqft-hosted-card {
  position: relative !important;
  overflow: hidden !important;
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
  margin: 0.50em 0 1.45em 0 !important;
  padding: var(--susy2027-hosted-card-pad-y) var(--susy2027-hosted-card-pad-x) !important;
  background-color: var(--susy2027-hosted-card-bg) !important;
  border: 1px solid var(--susy2027-hosted-card-border) !important;
  border-radius: var(--susy2027-hosted-card-radius) !important;
  box-shadow:
    var(--susy2027-hosted-card-shadow),
    inset 0 1px 0 rgba(255, 255, 255, 0.82) !important;
  backdrop-filter: blur(9px) saturate(108%) !important;
  -webkit-backdrop-filter: blur(9px) saturate(108%) !important;
}

#confSectionsBox .confBodyBox .susy2027-hosted-card::before,
#confSectionsBox .confBodyBox .qcqft-hosted-card::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  border-radius: inherit !important;
  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.46) 0%,
      rgba(255, 255, 255, 0.08) 42%,
      rgba(0, 0, 0, 0.025) 100%
    ) !important;
}

#confSectionsBox .confBodyBox .susy2027-hosted-card > *,
#confSectionsBox .confBodyBox .qcqft-hosted-card > * {
  position: relative !important;
  z-index: 1 !important;
}

#confSectionsBox .confBodyBox .susy2027-hosted-card p,
#confSectionsBox .confBodyBox .qcqft-hosted-card p,
#confSectionsBox .confBodyBox .susy2027-hosted-text,
#confSectionsBox .confBodyBox .qcqft-hosted-text,
#confSectionsBox .confBodyBox .susy2027-hosted-logo,
#confSectionsBox .confBodyBox .qcqft-hosted-logo {
  text-align: left !important;
  text-align-last: left !important;
  hyphens: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

#confSectionsBox .confBodyBox .susy2027-hosted-text,
#confSectionsBox .confBodyBox .qcqft-hosted-text {
  color: var(--susy2027-ink-soft, rgba(0, 0, 0, 0.76)) !important;
  font-size: 1.05rem !important;
  line-height: 1.42 !important;
  margin-top: 0 !important;
  margin-bottom: 0.72em !important;
}

#confSectionsBox .confBodyBox .susy2027-hosted-text strong,
#confSectionsBox .confBodyBox .qcqft-hosted-text strong {
  color: var(--susy2027-ink, #000) !important;
  font-weight: 760 !important;
}

#confSectionsBox .confBodyBox .susy2027-hosted-center,
#confSectionsBox .confBodyBox .qcqft-hosted-center {
  color: var(--susy2027-ink, #000) !important;
  font-weight: 640 !important;
}

#confSectionsBox .confBodyBox .susy2027-hosted-logo,
#confSectionsBox .confBodyBox .qcqft-hosted-logo {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

#confSectionsBox .confBodyBox .susy2027-hosted-logo img,
#confSectionsBox .confBodyBox .qcqft-hosted-logo img {
  display: block !important;
  width: var(--susy2027-hosted-logo-w) !important;
  max-width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

@media (max-width: 768px), (hover: none) and (pointer: coarse) {
  :root {
    --susy2027-hosted-card-pad-y: 0.90rem;
    --susy2027-hosted-card-pad-x: 1.00rem;
    --susy2027-hosted-logo-w: clamp(145px, 48vw, 210px);
  }

  #confSectionsBox .confBodyBox .susy2027-hosted-text,
  #confSectionsBox .confBodyBox .qcqft-hosted-text {
    font-size: 1.00rem !important;
    line-height: 1.42 !important;
  }
}
/* ========================================================================
   SUSY 2027 v06f — Hosted-by one-card fix
   Append at the very end of the current SUSY 2027 CSS.
   Use with the HTML block in susy2027_hosted_by_one_card_v06f.html.
   ======================================================================== */

:root {
  --susy2027-hosted-card-bg: rgba(255, 255, 255, 0.64);
  --susy2027-hosted-card-border: rgba(0, 0, 0, 0.115);
  --susy2027-hosted-card-shadow: 0 8px 22px rgba(0, 0, 0, 0.045);
  --susy2027-hosted-card-radius: 10px;
  --susy2027-hosted-card-pad-y: 1.00rem;
  --susy2027-hosted-card-pad-x: 1.18rem;
  --susy2027-hosted-logo-w: clamp(160px, 20vw, 235px);
}

#confSectionsBox .confBodyBox .susy2027-hosted-card,
#confSectionsBox .confBodyBox .qcqft-hosted-card {
  position: relative !important;
  overflow: hidden !important;
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
  margin: 0.50em 0 1.45em 0 !important;
  padding: var(--susy2027-hosted-card-pad-y) var(--susy2027-hosted-card-pad-x) !important;
  background-color: var(--susy2027-hosted-card-bg) !important;
  border: 1px solid var(--susy2027-hosted-card-border) !important;
  border-radius: var(--susy2027-hosted-card-radius) !important;
  box-shadow:
    var(--susy2027-hosted-card-shadow),
    inset 0 1px 0 rgba(255, 255, 255, 0.82) !important;
  backdrop-filter: blur(9px) saturate(108%) !important;
  -webkit-backdrop-filter: blur(9px) saturate(108%) !important;
}

#confSectionsBox .confBodyBox .susy2027-hosted-card::before,
#confSectionsBox .confBodyBox .qcqft-hosted-card::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  border-radius: inherit !important;
  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.46) 0%,
      rgba(255, 255, 255, 0.08) 42%,
      rgba(0, 0, 0, 0.025) 100%
    ) !important;
}

#confSectionsBox .confBodyBox .susy2027-hosted-card > *,
#confSectionsBox .confBodyBox .qcqft-hosted-card > * {
  position: relative !important;
  z-index: 1 !important;
}

/* Inner elements must never become separate cards. */
#confSectionsBox .confBodyBox .susy2027-hosted-card .susy2027-hosted-text,
#confSectionsBox .confBodyBox .susy2027-hosted-card .susy2027-hosted-logo,
#confSectionsBox .confBodyBox .qcqft-hosted-card .qcqft-hosted-text,
#confSectionsBox .confBodyBox .qcqft-hosted-card .qcqft-hosted-logo,
#confSectionsBox .confBodyBox .susy2027-hosted-card p,
#confSectionsBox .confBodyBox .qcqft-hosted-card p {
  display: block !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  text-align: left !important;
  text-align-last: left !important;
  hyphens: none !important;
}

#confSectionsBox .confBodyBox .susy2027-hosted-text,
#confSectionsBox .confBodyBox .qcqft-hosted-text {
  color: var(--susy2027-ink-soft, rgba(0, 0, 0, 0.76)) !important;
  font-size: 1.05rem !important;
  font-weight: 640 !important;
  line-height: 1.42 !important;
  margin-top: 0 !important;
  margin-bottom: 0.45rem !important;
}

#confSectionsBox .confBodyBox .susy2027-hosted-text strong,
#confSectionsBox .confBodyBox .qcqft-hosted-text strong {
  color: var(--susy2027-ink, #000) !important;
  font-weight: 760 !important;
}

#confSectionsBox .confBodyBox .susy2027-hosted-logo,
#confSectionsBox .confBodyBox .qcqft-hosted-logo {
  margin-top: 0.35rem !important;
  margin-bottom: 0 !important;
}

#confSectionsBox .confBodyBox .susy2027-hosted-logo img,
#confSectionsBox .confBodyBox .qcqft-hosted-logo img {
  display: block !important;
  width: var(--susy2027-hosted-logo-w) !important;
  max-width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
/* ========================================================================
   SUSY 2027 v06m — QC-for-QFT-like conference info icon size/position fix

   Append this AFTER v06i/v06l, or use the integrated v06m CSS.

   Goal:
   - Keep the Indico-generated Conference information block in a QC-for-QFT-like
     two-column layout.
   - Prevent global body h3 section styling from affecting the internal
     icon/title structure of the Indico info grid.
   - Make the clock/location/person/material icons larger and move them
     slightly downward so they align with the first line of the text block.
   ======================================================================== */

:root {
  --susy2027-info-grid-top: 2.05rem;
  --susy2027-info-grid-bottom: 1.60rem;
  --susy2027-info-col-gap: clamp(3.4rem, 7.0vw, 6.4rem);
  --susy2027-info-row-gap: 1.35rem;

  /* Main controls */
  --susy2027-info-icon-box: 2.60rem;
  --susy2027-info-icon-font: 1.44rem;
  --susy2027-info-icon-y: 0.16rem;
  --susy2027-info-text-y: 0.00rem;

  --susy2027-info-text-size: 0.96rem;
  --susy2027-info-text-line: 1.48;
}

/* Contain the automatic Indico event-details block to the normal body width. */
#confSectionsBox .confBodyBox .conferenceDetails {
  width: 100% !important;
  max-width: none !important;
  margin-top: var(--susy2027-info-grid-top) !important;
  margin-bottom: var(--susy2027-info-grid-bottom) !important;
}

#confSectionsBox .confBodyBox .conferenceDetails .infogrid {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  column-gap: var(--susy2027-info-col-gap) !important;
  row-gap: var(--susy2027-info-row-gap) !important;
  align-items: start !important;
  margin: 0 !important;
  padding: 0 !important;
}

#confSectionsBox .confBodyBox .conferenceDetails .infogrid .infoline {
  display: grid !important;
  grid-template-columns: var(--susy2027-info-icon-box) minmax(0, 1fr) !important;
  column-gap: 0.64rem !important;
  align-items: start !important;
  margin: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
}

/* Reset section-heading styling inside Indico's automatic info grid only. */
#confSectionsBox .confBodyBox .conferenceDetails h2,
#confSectionsBox .confBodyBox .conferenceDetails h3,
#confSectionsBox .confBodyBox .conferenceDetails h4,
#confSectionsBox .confBodyBox .conferenceDetails .infogrid h2,
#confSectionsBox .confBodyBox .conferenceDetails .infogrid h3,
#confSectionsBox .confBodyBox .conferenceDetails .infogrid h4,
#confSectionsBox .confBodyBox .conferenceDetails .infogrid .icon h2,
#confSectionsBox .confBodyBox .conferenceDetails .infogrid .icon h3,
#confSectionsBox .confBodyBox .conferenceDetails .infogrid .icon h4 {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-left: 0 !important;
  border-top: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  letter-spacing: normal !important;
}

/* Icon cell.  The font-size is set on the cell itself because in Indico the
   icon glyph may be on an <i>, a nested span, or a ::before pseudo-element. */
#confSectionsBox .confBodyBox .conferenceDetails .infogrid .infoline .icon {
  grid-column: 1 !important;
  align-self: start !important;
  justify-self: start !important;
  display: inline-flex !important;
  align-items: flex-start !important;
  justify-content: center !important;
  width: var(--susy2027-info-icon-box) !important;
  min-width: var(--susy2027-info-icon-box) !important;
  height: var(--susy2027-info-icon-box) !important;
  min-height: var(--susy2027-info-icon-box) !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  line-height: 1 !important;
  font-size: var(--susy2027-info-icon-font) !important;
  color: var(--susy2027-ink, #000) !important;
  transform: translateY(var(--susy2027-info-icon-y)) !important;
  background: linear-gradient(90deg, rgba(0,0,0,0.055), rgba(255,255,255,0)) !important;
}

/* Robustly enlarge icon glyphs regardless of how Indico emitted them. */
#confSectionsBox .confBodyBox .conferenceDetails .infogrid .infoline .icon *,
#confSectionsBox .confBodyBox .conferenceDetails .infogrid .infoline .icon i,
#confSectionsBox .confBodyBox .conferenceDetails .infogrid .infoline .icon span,
#confSectionsBox .confBodyBox .conferenceDetails .infogrid .infoline .icon a,
#confSectionsBox .confBodyBox .conferenceDetails .infogrid .infoline .icon::before,
#confSectionsBox .confBodyBox .conferenceDetails .infogrid .infoline .icon::after,
#confSectionsBox .confBodyBox .conferenceDetails .infogrid .infoline .icon *::before,
#confSectionsBox .confBodyBox .conferenceDetails .infogrid .infoline .icon *::after {
  font-size: var(--susy2027-info-icon-font) !important;
  line-height: 1 !important;
  color: var(--susy2027-ink, #000) !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Text cell. */
#confSectionsBox .confBodyBox .conferenceDetails .infogrid .infoline .text {
  grid-column: 2 !important;
  align-self: start !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: translateY(var(--susy2027-info-text-y)) !important;
  color: var(--susy2027-ink-soft, rgba(0, 0, 0, 0.76)) !important;
  font-size: var(--susy2027-info-text-size) !important;
  line-height: var(--susy2027-info-text-line) !important;
  text-align: left !important;
  text-align-last: left !important;
}

#confSectionsBox .confBodyBox .conferenceDetails .infogrid .infoline .text > div,
#confSectionsBox .confBodyBox .conferenceDetails .infogrid .infoline .text > p {
  margin: 0 0 0.34rem 0 !important;
  padding: 0 !important;
  font-size: inherit !important;
  line-height: inherit !important;
  text-align: left !important;
  text-align-last: left !important;
}

#confSectionsBox .confBodyBox .conferenceDetails .infogrid .infoline .text > div:last-child,
#confSectionsBox .confBodyBox .conferenceDetails .infogrid .infoline .text > p:last-child {
  margin-bottom: 0 !important;
}

#confSectionsBox .confBodyBox .conferenceDetails .infogrid .infoline .label,
#confSectionsBox .confBodyBox .conferenceDetails .infogrid .infoline strong {
  color: var(--susy2027-ink, #000) !important;
  font-weight: 760 !important;
}

#confSectionsBox .confBodyBox .conferenceDetails .infogrid .infoline a {
  color: var(--susy2027-ink, #000) !important;
  text-decoration-color: rgba(0, 0, 0, 0.34) !important;
}

@media (max-width: 760px) {
  :root {
    --susy2027-info-grid-top: 1.70rem;
    --susy2027-info-row-gap: 1.05rem;
    --susy2027-info-icon-box: 2.35rem;
    --susy2027-info-icon-font: 1.30rem;
    --susy2027-info-icon-y: 0.12rem;
  }

  #confSectionsBox .confBodyBox .conferenceDetails .infogrid {
    grid-template-columns: 1fr !important;
  }
}
/* ========================================================================
   SUSY 2027 v06o patch
   - Restore QC-for-QFT-like body section headings with explicit class support
   - Keep normal body links bright blue
   - Compact the header date display
   - Add a two-line centered overview subtitle block using h2/h3

   Append this after v06m, or use the integrated v06o CSS.
   ======================================================================== */

:root {
  --susy2027-section-accent: #3450b8;
  --susy2027-section-accent-ink: #17244d;
  --susy2027-section-accent-soft: rgba(52, 80, 184, 0.085);
  --susy2027-link-blue: #1f5fd0;
  --susy2027-link-blue-hover: #174ea6;
  --susy2027-link-blue-decoration: rgba(31, 95, 208, 0.34);
  --susy2027-link-blue-decoration-hover: rgba(23, 78, 166, 0.62);
}

/* Two-line centered subtitle at the top of the Overview body.
   Use explicit classes so it is not affected by generic h2/h3 section rules. */
#confSectionsBox .confBodyBox .susy2027-overview-title-block {
  max-width: 920px !important;
  margin: 0.68rem auto 1.95rem !important;
  padding: 0 !important;
  text-align: center !important;
}

#confSectionsBox .confBodyBox .susy2027-overview-title-block .susy2027-overview-title-line1,
#confSectionsBox .confBodyBox .susy2027-overview-title-block .susy2027-overview-title-line2 {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-left: 0 !important;
  border-top: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #111 !important;
  font-family: Georgia, "Times New Roman", Times, serif !important;
  font-weight: 760 !important;
  letter-spacing: -0.012em !important;
  line-height: 1.18 !important;
  text-align: center !important;
  text-align-last: center !important;
}

#confSectionsBox .confBodyBox .susy2027-overview-title-block .susy2027-overview-title-line1 {
  font-size: clamp(1.34rem, 2.05vw, 1.92rem) !important;
}

#confSectionsBox .confBodyBox .susy2027-overview-title-block .susy2027-overview-title-line2 {
  margin-top: 0.16em !important;
  font-size: clamp(1.34rem, 2.05vw, 1.92rem) !important;
}

/* QC-for-QFT-like section headings.
   Explicit class is the stable path; raw h3 support is retained for convenience.
   The Overview subtitle's h3 is excluded and separately reset above. */
#confSectionsBox .confBodyBox h3.susy2027-section-title,
#confSectionsBox .confBodyBox h3.susy2027-section-heading,
#confSectionsBox .confBodyBox .susy2027-section-title,
#confSectionsBox .confBodyBox .susy2027-section-heading,
#confSectionsBox .confBodyBox .susy2027-page > h3:not(.susy2027-overview-title-line2):not(.susy2027-overview-main-title) {
  display: block !important;
  width: min(100%, 760px) !important;
  margin: 1.45em 0 0.60em !important;
  padding: 0.12em 0 0.12em 10px !important;
  color: var(--susy2027-section-accent-ink) !important;
  border: 0 !important;
  border-left: 4px solid var(--susy2027-section-accent) !important;
  border-radius: 2px !important;
  background: linear-gradient(
    90deg,
    var(--susy2027-section-accent-soft) 0%,
    rgba(255,255,255,0) 74%
  ) !important;
  box-shadow: none !important;
  font-family: inherit !important;
  font-size: clamp(1.20rem, 1.50vw, 1.48rem) !important;
  font-weight: 620 !important;
  letter-spacing: -0.010em !important;
  line-height: 1.30 !important;
  text-align: left !important;
  text-align-last: left !important;
}

/* Ensure the subtitle h3 remains a centered title, not a section heading. */
#confSectionsBox .confBodyBox h3.susy2027-overview-title-line2,
#confSectionsBox .confBodyBox h3.susy2027-overview-main-title {
  border: 0 !important;
  border-left: 0 !important;
  background: transparent !important;
  color: #111 !important;
  box-shadow: none !important;
}

/* Body links: bright, conventional blue. Keep automatic conference-info links black-ish. */
#confSectionsBox .confBodyBox a {
  color: var(--susy2027-link-blue) !important;
  text-decoration: underline !important;
  text-decoration-color: var(--susy2027-link-blue-decoration) !important;
  text-decoration-thickness: 1px !important;
  text-underline-offset: 0.15em !important;
}

#confSectionsBox .confBodyBox a:hover,
#confSectionsBox .confBodyBox a:focus-visible {
  color: var(--susy2027-link-blue-hover) !important;
  text-decoration-color: var(--susy2027-link-blue-decoration-hover) !important;
}

#confSectionsBox .confBodyBox .conferenceDetails a,
#confSectionsBox .confBodyBox .conferenceDetails .infogrid .infoline a {
  color: var(--susy2027-ink, #000) !important;
  text-decoration-color: rgba(0,0,0,0.34) !important;
}

/* Header date: visually replace the automatic Indico string with compact form. */
.confheader .confSubTitleBox .confSubTitleContent .datePlace {
  position: relative !important;
  display: block !important;
  min-height: calc(var(--susy2027-meta-size) * 2.78) !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
  overflow: visible !important;
}

.confheader .confSubTitleBox .confSubTitleContent .datePlace > * {
  display: none !important;
}

.confheader .confSubTitleBox .confSubTitleContent .datePlace::before,
.confheader .confSubTitleBox .confSubTitleContent .datePlace::after {
  display: block !important;
  color: var(--susy2027-ink-soft) !important;
  font-size: var(--susy2027-meta-size) !important;
  font-weight: 650 !important;
  letter-spacing: 0.045em !important;
  line-height: 1.36 !important;
  text-align: center !important;
  text-shadow: none !important;
}

.confheader .confSubTitleBox .confSubTitleContent .datePlace::before {
  content: "May 31 – June 4, 2027" !important;
}

.confheader .confSubTitleBox .confSubTitleContent .datePlace::after {
  content: "IBS Science Culture Center, Daejeon, Republic of Korea" !important;
}


/* ========================================================================
   SUSY 2027 v06p patch
   - Restore QC-for-QFT-like h3 section headings even when h3 has no class
   - Reduce the main masthead title size
   - Replace header location text with no comma

   Append this at the VERY END of the current SUSY 2027 CSS.
   ======================================================================== */

:root {
  /* Main masthead title: smaller than v06o/v06n. */
  --susy2027-title-size: clamp(42px, 6.35vw, 86px);
  --susy2027-title-letter: 0.052em;

  /* QC-for-QFT-like section heading accent. */
  --susy2027-section-accent: #172eb2;
  --susy2027-section-accent-ink: #172eb2;
  --susy2027-section-accent-soft: rgba(23, 46, 178, 0.075);
}

/* Make sure the smaller title variable is really applied to the masthead. */
.confheader .conference-title-link,
.confheader .conference-title-link span[itemprop="title"],
.confheader .confTitleBox .confTitle h1 > a,
.confheader .confTitleBox .confTitle h1 > a span[itemprop="title"] {
  font-size: var(--susy2027-title-size) !important;
  letter-spacing: var(--susy2027-title-letter) !important;
  line-height: 0.94 !important;
}

/* QC-for-QFT-like body h3 sections.
   This targets ordinary body h3 headings directly, so it works even if the
   Indico editor strips or changes classes.  The Overview title-line h3 is
   explicitly excluded below. */
#confSectionsBox .confBodyBox h3:not(.susy2027-overview-title-line2):not(.susy2027-overview-main-title),
#confSectionsBox .confBodyBox h3.susy2027-section-title,
#confSectionsBox .confBodyBox h3.susy2027-section-heading,
#confSectionsBox .confBodyBox .susy2027-section-title,
#confSectionsBox .confBodyBox .susy2027-section-heading {
  display: block !important;
  width: min(100%, 760px) !important;
  margin: 1.35em 0 0.52em !important;
  padding: 0.12em 0 0.12em 8px !important;
  color: var(--susy2027-section-accent-ink) !important;
  border: 0 !important;
  border-left: 4px solid currentColor !important;
  border-radius: 2px !important;
  background: linear-gradient(
    90deg,
    var(--susy2027-section-accent-soft) 0%,
    rgba(255, 255, 255, 0.00) 74%
  ) !important;
  box-shadow: none !important;
  font-family: inherit !important;
  font-size: clamp(1.20rem, 1.50vw, 1.48rem) !important;
  font-weight: 560 !important;
  letter-spacing: -0.010em !important;
  line-height: 1.30 !important;
  text-align: left !important;
  text-align-last: left !important;
}

/* Keep the two-line Overview title block as a centered title, not as a blue h3 section. */
#confSectionsBox .confBodyBox h3.susy2027-overview-title-line2,
#confSectionsBox .confBodyBox h3.susy2027-overview-main-title,
#confSectionsBox .confBodyBox .susy2027-overview-title-block h3 {
  display: block !important;
  width: auto !important;
  margin: 0.16em 0 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-left: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #111 !important;
  font-family: Georgia, "Times New Roman", Times, serif !important;
  font-size: clamp(1.34rem, 2.05vw, 1.92rem) !important;
  font-weight: 760 !important;
  line-height: 1.18 !important;
  letter-spacing: -0.012em !important;
  text-align: center !important;
  text-align-last: center !important;
}

/* Do not let body h3 styling leak into Indico's automatic Conference information block. */
#confSectionsBox .confBodyBox .conferenceDetails h3,
#confSectionsBox .confBodyBox .conferenceDetails .infogrid h3,
#confSectionsBox .confBodyBox .conferenceDetails .infogrid .icon h3 {
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-left: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
  text-align: left !important;
  text-align-last: left !important;
}

/* Header date/location replacement.
   The datePlace pseudo-content was hard-coded in v06n/v06o, so changing the
   Indico venue field does not affect it unless this content is updated. */
.confheader .confSubTitleBox .confSubTitleContent .datePlace::before {
  content: "May 31 – June 4, 2027" !important;
}

.confheader .confSubTitleBox .confSubTitleContent .datePlace::after {
  content: "IBS Science Culture Center, Daejeon, Republic of Korea" !important;
}

@media (max-width: 1180px) {
  :root {
    --susy2027-title-size: clamp(38px, 10.4vw, 62px);
    --susy2027-title-letter: 0.048em;
  }
}

@media (max-width: 640px) {
  :root {
    --susy2027-title-size: clamp(32px, 11.2vw, 48px);
    --susy2027-title-letter: 0.044em;
  }
}


/* ========================================================================
   v08 final authority layer
   This file is a single integrated stylesheet. The final layer below defines
   the canonical SUSY 2027 visual decisions and supersedes earlier fallback
   rules inherited from the stable v06 base.
   ======================================================================== */

:root {
  --susy2027-link-blue: #1f5fd0;
  --susy2027-link-blue-visited: #1f5fd0;
  --susy2027-link-blue-hover: #174ea6;
  --susy2027-link-blue-decoration: rgba(31, 95, 208, 0.42);
  --susy2027-link-blue-decoration-hover: rgba(23, 78, 166, 0.72);
}

/* Body links, including links inside paragraphs, lists, tables, the contact line,
   and Indico's automatic conference information block.  This is intentionally
   placed after all heading/footer reset rules so it wins over earlier black-link
   rules. */
#confSectionsBox .confBodyBox a,
#confSectionsBox .confBodyBox a:link,
#confSectionsBox .confBodyBox a:visited,
#confSectionsBox .confBodyBox p a,
#confSectionsBox .confBodyBox li a,
#confSectionsBox .confBodyBox table a,
#confSectionsBox .confBodyBox .susy2027-page a,
#confSectionsBox .confBodyBox .susy2027-page a:link,
#confSectionsBox .confBodyBox .susy2027-page a:visited,
#confSectionsBox .confBodyBox .conferenceDetails a,
#confSectionsBox .confBodyBox .conferenceDetails .infogrid .infoline a {
  color: var(--susy2027-link-blue) !important;
  -webkit-text-fill-color: var(--susy2027-link-blue) !important;
  text-decoration: underline !important;
  text-decoration-color: var(--susy2027-link-blue-decoration) !important;
  text-decoration-thickness: 1px !important;
  text-underline-offset: 0.15em !important;
}

#confSectionsBox .confBodyBox a:hover,
#confSectionsBox .confBodyBox a:focus-visible,
#confSectionsBox .confBodyBox p a:hover,
#confSectionsBox .confBodyBox li a:hover,
#confSectionsBox .confBodyBox .susy2027-page a:hover,
#confSectionsBox .confBodyBox .conferenceDetails a:hover,
#confSectionsBox .confBodyBox .conferenceDetails .infogrid .infoline a:hover {
  color: var(--susy2027-link-blue-hover) !important;
  -webkit-text-fill-color: var(--susy2027-link-blue-hover) !important;
  text-decoration-color: var(--susy2027-link-blue-decoration-hover) !important;
}

/* Keep the top navigation visually separate from body-link styling. */
#outer .eventHeader a,
.confheader a,
#confSectionsBox .conf_leftMenu a,
#confSectionsBox .menuConfTitle a,
#confSectionsBox .event-service-row a,
#confSectionsBox .confSubMenu a {
  -webkit-text-fill-color: currentColor !important;
}

/* ========================================================================
   v08 canonical rules: header, menu, body, headings, links, cards, info block
   ======================================================================== */

:root {
  /* Header and menu controls */
  --susy2027-title-size: clamp(40px, 5.55vw, 78px);
  --susy2027-title-letter: 0.052em;
  --susy2027-header-pad-top: clamp(38px, 3.9vw, 62px);
  --susy2027-header-pad-bottom: clamp(18px, 1.8vw, 28px);
  --susy2027-title-meta-gap: clamp(16px, 1.45vw, 24px);
  --susy2027-menu-offset-y: 0px;
  --susy2027-menu-bottom-gap: 0.10rem;

  /* Body */
  --susy2027-body-width: min(92vw, 980px);
  --susy2027-body-max: 980px;
  --susy2027-body-font-size: 1.12rem;
  --susy2027-body-line-height: 1.70;

  /* QC-for-QFT-like section heading and link colors */
  --susy2027-section-accent: #172eb2;
  --susy2027-section-accent-soft: rgba(23, 46, 178, 0.075);
  --susy2027-link-blue: #1f5fd0;
  --susy2027-link-blue-hover: #174ea6;
  --susy2027-link-blue-decoration: rgba(31, 95, 208, 0.42);
  --susy2027-link-blue-decoration-hover: rgba(23, 78, 166, 0.72);

  /* Visual compact header meta text */
  --susy2027-header-date-text: "May 31 – June 4, 2027";
  --susy2027-header-location-text: "IBS Science Culture Center, Daejeon, Republic of Korea";

  /* Hosted-by card */
  --susy2027-hosted-logo-w: 220px;
}

/* Header: content-flow layout, smaller title, compact date/location. */
.confheader {
  min-height: 0 !important;
  height: auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: center !important;
  padding: var(--susy2027-header-pad-top) 0 var(--susy2027-header-pad-bottom) !important;
  background:
    radial-gradient(760px 220px at 50% -60px, rgba(0,0,0,0.045), rgba(255,255,255,0) 72%),
    linear-gradient(180deg, #fff 0%, #fbfbfa 100%) !important;
  border-bottom: 1px solid rgba(7,7,7,0.14) !important;
  box-shadow: none !important;
}

.confheader .confTitleBox {
  margin: 0 !important;
  padding: 0 1.25rem var(--susy2027-title-meta-gap) !important;
  text-align: center !important;
}

.confheader .conference-title-link,
.confheader .conference-title-link span[itemprop="title"],
.confheader .confTitleBox .confTitle h1 > a,
.confheader .confTitleBox .confTitle h1 > a span[itemprop="title"] {
  display: block !important;
  margin: 0 auto !important;
  color: #000 !important;
  -webkit-text-fill-color: #000 !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: var(--susy2027-title-size) !important;
  font-weight: 820 !important;
  letter-spacing: var(--susy2027-title-letter) !important;
  line-height: 0.96 !important;
  text-align: center !important;
  text-decoration: none !important;
  text-shadow: none !important;
}

.confheader .confSubTitleBox,
.confheader .confSubTitleBox .confSubTitleContent,
.confheader .confSubTitleBox .confSubTitleContent.flexrow {
  margin: 0 !important;
  padding: 0 1.25rem !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.confheader .confSubTitleBox .confSubTitleContent,
.confheader .confSubTitleBox .confSubTitleContent.flexrow {
  display: grid !important;
  grid-template-columns: 1fr auto 1fr !important;
  align-items: center !important;
  column-gap: 1rem !important;
}

.confheader .confSubTitleBox .confSubTitle {
  grid-column: 2 !important;
  justify-self: center !important;
  text-align: center !important;
}

.confheader #event-search-box,
.confheader .confSubTitleBox .confSubTitleContent.flexrow #event-search-box {
  grid-column: 3 !important;
  justify-self: end !important;
}

.confheader .confSubTitleBox .confSubTitleContent .datePlace {
  display: block !important;
  min-width: 18rem !important;
  margin: 0 !important;
  padding: 0 !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  text-align: center !important;
  overflow: visible !important;
}

.confheader .confSubTitleBox .confSubTitleContent .datePlace > * {
  display: none !important;
}

.confheader .confSubTitleBox .confSubTitleContent .datePlace::before,
.confheader .confSubTitleBox .confSubTitleContent .datePlace::after {
  display: block !important;
  color: rgba(7,7,7,0.74) !important;
  -webkit-text-fill-color: rgba(7,7,7,0.74) !important;
  font-size: clamp(13px, 1.0vw, 15px) !important;
  font-weight: 700 !important;
  letter-spacing: 0.040em !important;
  line-height: 1.35 !important;
  text-align: center !important;
}

.confheader .confSubTitleBox .confSubTitleContent .datePlace::before {
  content: var(--susy2027-header-date-text) !important;
}

.confheader .confSubTitleBox .confSubTitleContent .datePlace::after {
  content: var(--susy2027-header-location-text) !important;
}

.confheader .confSubTitleBox .confSubTitleContent .timezone {
  display: none !important;
}

/* Menu: centered, no surrounding box. */
#confSectionsBox .conf_leftMenu {
  float: none !important;
  width: 100% !important;
  max-width: none !important;
  margin: var(--susy2027-menu-offset-y) auto var(--susy2027-menu-bottom-gap) !important;
  padding: 0.44rem 1.25rem 0.48rem !important;
  text-align: center !important;
  background: #fff !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(7,7,7,0.14) !important;
  box-shadow: none !important;
}

#confSectionsBox .conf_leftMenu > ul,
#confSectionsBox .conf_leftMenu > ul#outer,
#confSectionsBox .conf_leftMenu > div > ul,
#confSectionsBox .conf_leftMenu nav > ul,
#confSectionsBox .conf_leftMenu .page-list,
#confSectionsBox .conf_leftMenu .event-page-nav > ul,
#confSectionsBox .conf_leftMenu .event-page-header > ul {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: clamp(0.78rem, 1.65vw, 1.42rem) !important;
  width: 100% !important;
  max-width: min(1120px, 96vw) !important;
  margin: 0 auto !important;
  padding: 0 !important;
  list-style: none !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#confSectionsBox .conf_leftMenu li,
#confSectionsBox .conf_leftMenu .menuConfTitle,
#confSectionsBox .conf_leftMenu .menuConfMiddleCell {
  float: none !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#confSectionsBox .conf_leftMenu a,
#confSectionsBox .conf_leftMenu .menuConfTitle > a,
#confSectionsBox .conf_leftMenu .menuConfMiddleCell > a,
#confSectionsBox .conf_leftMenu .page-list a {
  display: inline-block !important;
  padding: 0.12rem 0.04rem 0.32rem !important;
  color: rgba(7,7,7,0.56) !important;
  -webkit-text-fill-color: rgba(7,7,7,0.56) !important;
  font-size: 1.08rem !important;
  font-weight: 600 !important;
  line-height: 1.22 !important;
  text-align: center !important;
  text-decoration: none !important;
  border: 0 !important;
  border-bottom: 2px solid transparent !important;
  background: transparent !important;
}

#confSectionsBox .conf_leftMenu li[class*="Selected"] > a,
#confSectionsBox .conf_leftMenu .menuConfSelected > a,
#confSectionsBox .conf_leftMenu li.selected > a,
#confSectionsBox .conf_leftMenu li.active > a,
#confSectionsBox .conf_leftMenu a[aria-current="page"],
#confSectionsBox .conf_leftMenu .current > a,
#confSectionsBox .conf_leftMenu a:hover,
#confSectionsBox .conf_leftMenu a:focus-visible {
  color: #000 !important;
  -webkit-text-fill-color: #000 !important;
  border-bottom-color: #000 !important;
}

/* Body measure and readable typography. */
#confSectionsBox .confBodyBox {
  float: none !important;
  width: var(--susy2027-body-width) !important;
  max-width: var(--susy2027-body-max) !important;
  margin: 0 auto 4rem !important;
  padding: 0 !important;
  color: rgba(7,7,7,0.74) !important;
}

#confSectionsBox .confBodyBox .mainContent,
#confSectionsBox .confBodyBox .col2 {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

#confSectionsBox .confBodyBox p,
#confSectionsBox .confBodyBox li,
#confSectionsBox .confBodyBox dd {
  color: rgba(7,7,7,0.74) !important;
  font-size: var(--susy2027-body-font-size) !important;
  line-height: var(--susy2027-body-line-height) !important;
}

#confSectionsBox .confBodyBox p {
  margin: 0 0 1.05em !important;
  text-align: justify !important;
  text-align-last: left !important;
  text-justify: inter-word !important;
  hyphens: auto !important;
  overflow-wrap: break-word !important;
}

#confSectionsBox .confBodyBox ul,
#confSectionsBox .confBodyBox ol {
  margin: 0.38em 0 1.08em 1.45em !important;
  padding-left: 0.52em !important;
}

/* Overview two-line title block. */
#confSectionsBox .confBodyBox .susy2027-overview-title-block {
  max-width: 920px !important;
  margin: 0.70rem auto 2.0rem !important;
  padding: 0 !important;
  text-align: center !important;
}

#confSectionsBox .confBodyBox .susy2027-overview-title-line1,
#confSectionsBox .confBodyBox .susy2027-overview-title-line2,
#confSectionsBox .confBodyBox .susy2027-overview-title-block h2,
#confSectionsBox .confBodyBox .susy2027-overview-title-block h3 {
  display: block !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #111 !important;
  -webkit-text-fill-color: #111 !important;
  font-family: Georgia, "Times New Roman", Times, serif !important;
  font-weight: 760 !important;
  letter-spacing: -0.012em !important;
  line-height: 1.18 !important;
  text-align: center !important;
  text-align-last: center !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#confSectionsBox .confBodyBox .susy2027-overview-title-line1 {
  font-size: clamp(1.16rem, 1.55vw, 1.48rem) !important;
}

#confSectionsBox .confBodyBox .susy2027-overview-title-line2 {
  margin-top: 0.18em !important;
  font-size: clamp(1.34rem, 2.02vw, 1.90rem) !important;
}

/* QC-for-QFT-style section headings. Placed late so it wins over Indico defaults. */
#confSectionsBox .confBodyBox h3.susy2027-section-heading,
#confSectionsBox .confBodyBox .susy2027-page h3.susy2027-section-heading,
#confSectionsBox .confBodyBox .susy2027-overview-page h3.susy2027-section-heading,
#confSectionsBox .confBodyBox h3:not(.susy2027-overview-title-line2):not(.ui):not([class*="icon"]) {
  display: block !important;
  width: min(100%, 760px) !important;
  margin: 1.40em 0 0.45em !important;
  padding: 0.12em 0 0.12em 8px !important;
  color: var(--susy2027-section-accent) !important;
  -webkit-text-fill-color: var(--susy2027-section-accent) !important;
  border: 0 !important;
  border-left: 4px solid currentColor !important;
  border-radius: 2px !important;
  background: linear-gradient(90deg, var(--susy2027-section-accent-soft) 0%, rgba(255,255,255,0) 74%) !important;
  box-shadow: none !important;
  font-family: inherit !important;
  font-size: clamp(1.18rem, 1.48vw, 1.42rem) !important;
  font-weight: 560 !important;
  line-height: 1.30 !important;
  letter-spacing: -0.010em !important;
  text-align: left !important;
  text-align-last: left !important;
}

/* Do not apply section-heading styling inside Indico's automatic information grid. */
#confSectionsBox .confBodyBox .conferenceDetails h3,
#confSectionsBox .confBodyBox .conferenceDetails .infogrid h3,
#confSectionsBox .confBodyBox .conferenceDetails h4,
#confSectionsBox .confBodyBox .conferenceDetails .infogrid h4 {
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  color: inherit !important;
  -webkit-text-fill-color: currentColor !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
  text-align: left !important;
  text-align-last: left !important;
}

/* Body links are blue; navigation links are not. */
#confSectionsBox .confBodyBox a,
#confSectionsBox .confBodyBox a:link,
#confSectionsBox .confBodyBox a:visited,
#confSectionsBox .confBodyBox p a,
#confSectionsBox .confBodyBox li a,
#confSectionsBox .confBodyBox table a,
#confSectionsBox .confBodyBox .susy2027-page a,
#confSectionsBox .confBodyBox .conferenceDetails a {
  color: var(--susy2027-link-blue) !important;
  -webkit-text-fill-color: var(--susy2027-link-blue) !important;
  text-decoration: underline !important;
  text-decoration-color: var(--susy2027-link-blue-decoration) !important;
  text-decoration-thickness: 1px !important;
  text-underline-offset: 0.15em !important;
}

#confSectionsBox .confBodyBox a:hover,
#confSectionsBox .confBodyBox a:focus-visible,
#confSectionsBox .confBodyBox p a:hover,
#confSectionsBox .confBodyBox li a:hover,
#confSectionsBox .confBodyBox .susy2027-page a:hover,
#confSectionsBox .confBodyBox .conferenceDetails a:hover {
  color: var(--susy2027-link-blue-hover) !important;
  -webkit-text-fill-color: var(--susy2027-link-blue-hover) !important;
  text-decoration-color: var(--susy2027-link-blue-decoration-hover) !important;
}

/* Hosted-by one-card block. */
#confSectionsBox .confBodyBox .susy2027-hosted-card,
#confSectionsBox .confBodyBox .qcqft-hosted-card {
  display: block !important;
  width: 100% !important;
  margin: 0.52em 0 1.40em !important;
  padding: 1.02em 1.18em !important;
  border: 1px solid rgba(7,7,7,0.13) !important;
  border-radius: 10px !important;
  background: linear-gradient(135deg, rgba(255,255,255,0.72), rgba(255,255,255,0.96)) !important;
  box-shadow: 0 8px 22px rgba(0,0,0,0.040), inset 0 1px 0 rgba(255,255,255,0.85) !important;
  box-sizing: border-box !important;
}

#confSectionsBox .confBodyBox .susy2027-hosted-text,
#confSectionsBox .confBodyBox .susy2027-hosted-logo,
#confSectionsBox .confBodyBox .qcqft-hosted-text,
#confSectionsBox .confBodyBox .qcqft-hosted-logo {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  text-align: left !important;
  text-align-last: left !important;
}

#confSectionsBox .confBodyBox .susy2027-hosted-text,
#confSectionsBox .confBodyBox .qcqft-hosted-text {
  color: rgba(7,7,7,0.78) !important;
  font-size: 1.00rem !important;
  font-weight: 640 !important;
  line-height: 1.42 !important;
}

#confSectionsBox .confBodyBox .susy2027-hosted-logo,
#confSectionsBox .confBodyBox .qcqft-hosted-logo {
  margin-top: 0.52rem !important;
}

#confSectionsBox .confBodyBox .susy2027-hosted-logo img,
#confSectionsBox .confBodyBox .qcqft-hosted-logo img {
  display: block !important;
  width: var(--susy2027-hosted-logo-w) !important;
  max-width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Automatic conference information: reset h3 and keep icons readable. */
#confSectionsBox .confBodyBox .conferenceDetails {
  margin-top: 2.10rem !important;
  color: rgba(7,7,7,0.74) !important;
}

#confSectionsBox .confBodyBox .conferenceDetails > h2:first-child {
  display: none !important;
}

#confSectionsBox .confBodyBox .conferenceDetails .infogrid .infoline .icon {
  color: #000 !important;
  -webkit-text-fill-color: #000 !important;
  font-size: 1.34rem !important;
  line-height: 1 !important;
  transform: translateY(0.10rem) !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

#confSectionsBox .confBodyBox .conferenceDetails .infogrid .infoline .icon *,
#confSectionsBox .confBodyBox .conferenceDetails .infogrid .infoline .icon::before,
#confSectionsBox .confBodyBox .conferenceDetails .infogrid .infoline .icon *::before {
  color: #000 !important;
  -webkit-text-fill-color: #000 !important;
  font-size: 1.34rem !important;
  line-height: 1 !important;
}

@media (max-width: 1180px) {
  :root {
    --susy2027-title-size: clamp(38px, 9.8vw, 62px);
    --susy2027-title-letter: 0.048em;
    --susy2027-header-pad-top: clamp(30px, 3.2vw, 42px);
    --susy2027-header-pad-bottom: clamp(12px, 1.55vw, 20px);
    --susy2027-title-meta-gap: clamp(12px, 1.45vw, 18px);
    --susy2027-body-font-size: 1.06rem;
  }
}

@media (max-width: 760px), (hover: none) and (pointer: coarse) {
  :root {
    --susy2027-title-size: clamp(32px, 11.2vw, 48px);
    --susy2027-title-letter: 0.044em;
    --susy2027-body-width: 94vw;
    --susy2027-body-font-size: 1.00rem;
    --susy2027-body-line-height: 1.66;
  }

  .confheader .confSubTitleBox .confSubTitleContent,
  .confheader .confSubTitleBox .confSubTitleContent.flexrow {
    grid-template-columns: 1fr !important;
    row-gap: 0.65rem !important;
  }

  .confheader .confSubTitleBox .confSubTitle,
  .confheader #event-search-box,
  .confheader .confSubTitleBox .confSubTitleContent.flexrow #event-search-box {
    grid-column: 1 !important;
    justify-self: center !important;
  }

  #confSectionsBox .confBodyBox p {
    text-align: left !important;
    text-align-last: left !important;
  }
}