/* ACRT 2027 — shared stylesheet
   A journal-masthead system, not a SaaS template.
   Design tokens
   ink        #1E1330  primary text / masthead background (deep aubergine)
   paper      #F7F5FA  page background (soft lavender-white)
   violet     #6C3FA0  primary accent
   violet-tnt #EDE4F7  soft violet backgrounds
   plum       #9C2F63  CTA / "confirmed" accent (deep magenta-plum)
   gold       #B0842A  running numerals, marginalia, "invited" accent
   line       #E1DCE8  hairline rules
*/

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,500&family=Space+Grotesk:wght@400;500;600;700&family=Source+Serif+4:opsz,wght@8..60,400;8..60,500;8..60,600;8..60,700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
  --ink: #1E1330;
  --ink-soft: #5B4E6E;
  --paper: #F7F5FA;
  --paper-raised: #FFFFFF;
  --teal: #6C3FA0;
  /* violet */
  --teal-deep: #4E2D77;
  /* deep violet */
  --teal-tint: #EDE4F7;
  /* violet tint */
  --eosin: #9C2F63;
  /* plum */
  --eosin-tint: #F5E1EC;
  --gold: #A87A22;
  --line: #E1DCE8;
  --line-strong: #C7BFD4;
  --radius: 2px;
  --max: 1230px;
}

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background:
    radial-gradient(circle, rgba(30, 19, 48, 0.07) 1px, transparent 1px) 0 0/24px 24px,
    var(--paper);
  color: var(--ink);
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: var(--teal-deep);
}

h1,
h2,
h3,
h4 {
  font-family: 'Space Grotesk', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 600;
  line-height: 1.14;
  margin: 0 0 .5em;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.display {
  font-family: 'Fraunces', 'Source Serif 4', serif;
  font-weight: 500;
  font-style: italic;
}

p {
  margin: 0 0 1em;
}

.mono {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
}

.wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 28px;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--eosin);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- ticker ---------- */
.ticker {
  background: var(--ink);
  color: #C9A6E8;
  font-family: 'IBM Plex Mono', monospace;
  font-size: .72rem;
  letter-spacing: .06em;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.ticker .wrap {
  display: flex;
  gap: 12px 30px;
  text-transform: uppercase;
  flex-wrap: wrap;
}

.ticker span {
  opacity: .92;
}

.ticker span strong {
  color: #fff;
  font-weight: 600;
}

/* ---------- masthead / header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(247, 245, 250, 0.95);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line-strong);
}

.header-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 14px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--ink);
}

.seal {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1.4px solid var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.seal span {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 600;
  font-size: .92rem;
}

.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.brand-mark {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: -0.01em;
}

.brand-sub {
  font-family: 'IBM Plex Mono', monospace;
  font-size: .63rem;
  letter-spacing: .08em;
  color: var(--ink-soft);
  text-transform: uppercase;
}

nav.primary-nav {
  display: flex;
  align-items: center;
  gap: 2px;
}

nav.primary-nav a {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  padding: 9px 12px;
  border-radius: var(--radius);
}

nav.primary-nav a:hover {
  color: var(--teal-deep);
}

nav.primary-nav a.is-active {
  color: var(--eosin);
}

.nav-cta {
  background: var(--ink);
  color: var(--paper) !important;
  padding: 9px 16px !important;
}

.nav-cta:hover {
  background: var(--teal-deep);
  color: #fff !important;
}

.nav-toggle {
  display: none;
}

/* ============================================================
   MOBILE NAVIGATION
   ============================================================ */

@media (max-width: 900px) {

    .site-header {
        position: sticky;
        top: 0;
        z-index: 9999;
    }

    .header-inner {
        position: relative;
        z-index: 10000;
    }

    /* Menu button */
    .nav-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;

        background: transparent;
        border: 1px solid var(--line-strong);
        border-radius: var(--radius);

        padding: 8px 12px;

        font-family: 'IBM Plex Mono', monospace;
        font-size: .72rem;
        letter-spacing: .06em;
        text-transform: uppercase;

        color: var(--ink);

        cursor: pointer;
    }


    /* Closed menu */
    nav.primary-nav {
        position: fixed !important;

        top: 82px !important;
        left: 0 !important;
        right: 0 !important;

        width: 100% !important;

        display: none !important;

        flex-direction: column !important;
        align-items: stretch !important;

        gap: 0 !important;

        margin: 0 !important;

        padding: 12px 20px 24px !important;

        background: var(--paper-raised) !important;

        border-top: 1px solid var(--line-strong) !important;
        border-bottom: 1px solid var(--line-strong) !important;

        box-shadow: 0 12px 30px rgba(30, 19, 48, .15);

        max-height: calc(100vh - 82px) !important;

        overflow-y: auto !important;
        overflow-x: hidden !important;

        z-index: 99999 !important;
    }


    /* Open menu */
    nav.primary-nav.is-open {
        display: flex !important;
    }


    /* Main links */
    nav.primary-nav > a {
        display: flex !important;

        align-items: center !important;

        width: 100% !important;

        min-height: 46px !important;

        padding: 12px 4px !important;

        margin: 0 !important;

        border-bottom: 1px solid var(--line) !important;

        color: var(--ink) !important;

        background: transparent !important;

        font-family: 'IBM Plex Mono', monospace !important;

        font-size: .68rem !important;

        letter-spacing: .05em !important;

        line-height: 1.4 !important;

        text-transform: uppercase !important;

        text-decoration: none !important;
    }


    nav.primary-nav > a:hover {
        color: var(--teal-deep) !important;
        background: var(--teal-tint) !important;
    }


    nav.primary-nav > a.is-active {
        color: var(--eosin) !important;
    }


    /* Register button */
    nav.primary-nav > a.nav-cta {
        display: flex !important;

        align-items: center !important;
        justify-content: center !important;

        width: 100% !important;

        margin-top: 16px !important;

        padding: 11px 16px !important;

        background: var(--ink) !important;

        color: #fff !important;

        border: 1px solid var(--ink) !important;

        text-align: center !important;
    }


    /* ========================================================
       SCIENTIFIC SESSIONS
       ======================================================== */

    nav.primary-nav .nav-dropdown {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }


    nav.primary-nav .nav-dropdown-toggle {
        display: flex !important;

        align-items: center !important;
        justify-content: space-between !important;

        width: 100% !important;

        min-height: 46px !important;

        padding: 12px 4px !important;

        border-bottom: 1px solid var(--line) !important;

        color: var(--ink) !important;

        background: transparent !important;

        font-family: 'IBM Plex Mono', monospace !important;

        font-size: .68rem !important;

        letter-spacing: .05em !important;

        text-transform: uppercase !important;

        text-decoration: none !important;
    }


    /* Dropdown */
    nav.primary-nav .nav-dropdown-menu {
        position: static !important;

        display: none !important;

        width: 100% !important;

        min-width: 0 !important;

        margin: 0 !important;

        padding: 4px 0 8px 14px !important;

        transform: none !important;

        background: var(--teal-tint) !important;

        border: 0 !important;

        box-shadow: none !important;
    }


    
    nav.primary-nav .nav-dropdown.is-open .nav-dropdown-menu {
        display: block !important;
    }


   
    nav.primary-nav .nav-dropdown:hover .nav-dropdown-menu {
        display: none !important;
    }


    nav.primary-nav .nav-dropdown.is-open:hover .nav-dropdown-menu {
        display: block !important;
    }


    nav.primary-nav .nav-dropdown-menu a {
        display: block !important;

        width: 100% !important;

        padding: 10px 12px !important;

        border-bottom: 1px solid var(--line) !important;

        color: var(--ink-soft) !important;

        font-family: 'Source Serif 4', Georgia, serif !important;

        font-size: 16px !important;

        line-height: 1.4 !important;

        text-decoration: none !important;
    }
}


/* ============================================================
   SMALL PHONES
   ============================================================ */

@media (max-width: 480px) {

    nav.primary-nav {
        top: 76px !important;

        max-height: calc(100vh - 76px) !important;

        padding: 10px 16px 20px !important;
    }

    nav.primary-nav > a,
    nav.primary-nav .nav-dropdown-toggle {
        min-height: 44px !important;

        font-size: .62rem !important;
    }

    nav.primary-nav > a.nav-cta {
        margin-top: 14px !important;
    }
}
/* ---------- masthead hero (journal cover) ---------- */
.masthead {
  background: var(--ink);
  color: #fff;
  position: relative;
  overflow: hidden;
  border-bottom: 3px double rgba(255, 255, 255, .28);
}

.masthead-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 10px 28px 18px;
}

.masthead-rule-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: 'IBM Plex Mono', monospace;
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #B9A0D6;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(255, 255, 255, .18);
  margin-bottom: 38px;
  flex-wrap: wrap;
  gap: 10px;
}

.masthead-grid {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 40px;
}

@media (max-width:820px) {
  .masthead-grid {
    grid-template-columns: 1fr;
  }
}

.issue-block {
  border-right: 1px solid rgba(255, 255, 255, .18);
  padding-right: 30px;
}

@media (max-width:820px) {
  .issue-block {
    border-right: 0;
    padding-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .18);
    padding-bottom: 20px;
    margin-bottom: 6px;
  }
}

.issue-block .k {
  font-family: 'IBM Plex Mono', monospace;
  font-size: .66rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #8E76B2;
  display: block;
  margin-bottom: 6px;
}

.issue-block .v {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  font-size: 1rem;
  margin-bottom: 22px;
  color: #EDE4F7;
}

.masthead h1 {
  color: #fff;
  font-family: 'Fraunces', 'Source Serif 4', serif;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(3rem, 7vw, 1rem);
  line-height: .98;
  letter-spacing: -0.01em;
  margin-bottom: .3em;
}

.masthead h1 em {
  color: #C9A6E8;
  font-style: italic;
}

.masthead-dek {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.02rem;
  color: #D6CCE3;
  max-width: 56ch;
  margin-bottom: 28px;
  font-weight: 400;
}

.masthead-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 40px;
}

.masthead-figure {
  width: 100%;
  opacity: .9;
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: .8rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 13px 22px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor: pointer;
}

.btn-primary {
  background: var(--eosin);
  color: #fff;
}

.btn-primary:hover {
  background: #7A2350;
}

.btn-ghost {
  border-color: rgba(255, 255, 255, .4);
  color: #fff;
}

.btn-ghost:hover {
  border-color: #fff;
  background: rgba(255, 255, 255, .08);
}

.btn-outline {
  border-color: var(--ink) !important;
  color: var(--ink) !important;
}

.btn-outline:hover {
  background: var(--ink) !important;
  color: #fff !important;
}

/* ---------- trust strip ---------- */
.trust-strip {
  border-bottom: 1px solid var(--line);
  background: var(--paper-raised);
}

.trust-inner {
    max-width: var(--max);
    margin: 0 auto;
    padding: 5px 10px;
    display: flex;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
}

.trust-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: .66rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  flex-shrink: 0;
}

.trust-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 0;
  font-family: 'Space Grotesk', sans-serif;
  font-size: .86rem;
  color: var(--ink-soft);
}

.trust-list span {
  padding: 0 14px;
  border-left: 1px solid var(--line-strong);
}

.trust-list span:first-child {
  border-left: 0;
  padding-left: 0;
}

/* ---------- section system ---------- */
section {
  padding: 0px 0;
}

section.tight {
  padding: 44px 0;
}

.section-frame {
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: 0 30px;
}

@media (max-width:760px) {
  .section-frame {
    grid-template-columns: 1fr;
  }
}

.section-num {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 1.8rem;
  color: var(--gold);
  border-top: 1px solid var(--line-strong);
  padding-top: 10px;
}

@media (max-width:760px) {
  .section-num {
    border-top: 0;
    padding-top: 0;
    margin-bottom: 14px;
  }
}

.section-body {
  border-top: 1px solid var(--line-strong);
  padding-top: 10px;
  margin-bottom:10px;
}

@media (max-width:760px) {
  .section-body {
    border-top: 1px solid var(--line-strong);
    padding-top: 16px;
    margin-bottom:10px;
  }
}

.section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.section-head h2 {
  font-size: clamp(1.7rem, 3vw, 2.35rem);
  max-width: 60ch;
}

.section-label,
.eyebrow {
  font-family: 'IBM Plex Mono', monospace;
  font-size: .7rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 10px;
}

.lede {
  font-size: 1.05rem;
  color: var(--ink-soft);
  max-width: 62ch;
}

.band {
  background: var(--paper-raised);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.band-teal {
  background: var(--teal-tint);
}

/* key facts ledger */
.facts-ledger {
  border-top: 1px solid var(--line-strong);
}

.facts-row {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 20px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  font-family: 'IBM Plex Mono', monospace;
  font-size: .85rem;
}

.facts-row .k {
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: .72rem;
  padding-top: 2px;
}

.facts-row .v {
  color: var(--ink);
  font-family: 'Space Grotesk', sans-serif;
  font-size: .98rem;
}

@media (max-width:600px) {
  .facts-row {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}

/* ---------- video / field notes ---------- */
.video-feature {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 40px;
  align-items: start;
}

@media (max-width:900px) {
  .video-feature {
    grid-template-columns: 1fr;
  }
}

.video-frame {
  position: relative;
  aspect-ratio: 16/9;
  background: var(--ink);
  overflow: hidden;
  border: 1px solid var(--line-strong);
  background-image: radial-gradient(circle, rgba(201, 166, 232, 0.16) 1px, transparent 1px);
  background-size: 24px 24px;
}

.video-frame video,
.video-frame iframe {
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
  position: relative;
  z-index: 1;
}

.video-play {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 14px;
  background: rgba(30, 19, 48, .35);
  border: 0;
  cursor: pointer;
  width: 100%;
  height: 100%;
  color: #fff;
  font-family: 'IBM Plex Mono', monospace;
}

.video-play .ring {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  border: 1.4px solid rgba(255, 255, 255, .55);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s ease, border-color .15s ease;
}

.video-play:hover .ring {
  background: var(--eosin);
  border-color: var(--eosin);
}

.video-play .ring svg {
  width: 20px;
  height: 20px;
  margin-left: 3px;
}

.video-play .label {
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #E2D9EC;
}

.video-caption {
  font-family: 'IBM Plex Mono', monospace;
  font-size: .72rem;
  color: var(--ink-soft);
  margin-top: 3px;
  margin-bottom: 5px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}

.video-note {
  display: none;
  margin-top: 14px;
}

.video-note.is-visible {
  display: block;
}

.marginalia {
  border-left: 2px solid var(--gold);
  padding-left: 16px;
}

.marginalia .section-label {
  margin-bottom: 14px;
}

/* ---------- table of contents (sessions) ---------- */
.toc {
  border-top: 1px solid var(--line-strong);
}

.toc-row {
  display: grid;
  grid-template-columns: 38px 30px 1fr auto;
  gap: 16px;
  align-items: baseline;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  color: inherit;
}

.toc-row .num {
  font-family: 'Fraunces', serif;
  font-style: italic;
  color: var(--gold);
  font-size: 1.15rem;
}

.toc-row .icon {
  width: 22px;
  height: 22px;
}

.toc-row h3 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.06rem;
  margin: 0;
  font-weight: 600;
}

.toc-row .desc {
  font-family: 'Source Serif 4', serif;
  color: var(--ink-soft);
  font-size: .92rem;
  margin-top: 5px;
  max-width: 64ch;
}

.toc-row .leader {
  display: none;
}

@media (min-width:760px) {
  .toc-row {
    grid-template-columns: 38px 30px 1fr auto;
  }
}

/* ---------- contact sheet (speakers) ---------- */
.contact-sheet {
    display: grid;
    grid-template-columns: repeat(4, 1.5fr);
    gap: 1px;
    /* background: var(--line-strong);
    border: 1px solid var(--line-strong); */
}

@media (max-width:900px) {
  .contact-sheet {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width:560px) {
  .contact-sheet {
    grid-template-columns: 1fr;
  }
}

.frame {
    background: var(--paper-raised);
    padding: 26px 24px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    justify-content: center;
    text-align: center;
}

.frame-mono {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 1.02rem;
  flex-shrink: 0;
}

.frame-top {
  display: flex;
  align-items: center;
  gap: 14px;
}

.tag {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 6px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: .63rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 99px;
}

.tag-confirmed {
  background: var(--teal-tint);
  color: var(--teal-deep);
  border: 1px solid #D9C6EF;
}

.tag-invited {
  background: var(--eosin-tint);
  color: var(--eosin);
  border: 1px solid #E8C3D6;
}

.frame-name {
  font-size: 1.14rem;
  margin: 2px 0 0;
}

.frame-role {
  font-family: 'IBM Plex Mono', monospace;
  font-size: .74rem;
  color: var(--ink-soft);
  line-height: 1.5;
}

.frame-bio {
  font-size: .94rem;
  color: var(--ink-soft);
  margin-top: 2px;
}

/* generic card (used sparingly: why-attend, registration tiers) */
.grid {
  display: grid;
  gap: 1px;
  background: var(--line-strong);
  border: 1px solid var(--line-strong);
}

.grid-3 {
  grid-template-columns: repeat(3, 1fr);
}

.grid-2 {
  grid-template-columns: repeat(2, 1fr);
}

@media (max-width:900px) {
  .grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width:640px) {

  .grid-3,
  .grid-2 {
    grid-template-columns: 1fr;
  }
}

.card {
  background: var(--paper-raised);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.card .num {
  font-family: 'Fraunces', serif;
  font-style: italic;
  color: var(--gold);
  font-size: 1.3rem;
}

/* committee ledger */
.committee-list {
  border-top: 1px solid var(--line-strong);
}

.committee-row {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 24px;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
  align-items: start;
}

.committee-name {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  font-size: 1.02rem;
}

.committee-affil {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 1rem;
  color: var(--ink-soft);
  margin-top: 3px;
}

.committee-note {
  color: var(--ink-soft);
  font-size: .94rem;
  text-align: justify;
}

@media (max-width:700px) {
  .committee-row {
    grid-template-columns: 1fr;
  }
}

/* notice */
.notice {
  border: 1px solid var(--line-strong);
  border-left: 3px solid var(--eosin);
  background: var(--paper-raised);
  padding: 18px 22px;
  font-size: .94rem;
  color: var(--ink-soft);
}

.notice strong {
  color: var(--ink);
}

/* table (registration) */
table.data {
  width: 100%;
  border-collapse: collapse;
  background: var(--paper-raised);
  border: 1px solid var(--line);
}

table.data th,
table.data td {
  text-align: left;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  font-size: .94rem;
}

table.data th {
  font-family: 'IBM Plex Mono', monospace;
  font-size: .7rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gold);
  background: var(--teal-tint);
  border-bottom: 1px solid var(--line);
}

table.data tr:last-child td {
  border-bottom: 0;
}

/* pricing */
.price-tier {
  background: var(--paper-raised);
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.price-tier .amount {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 2.1rem;
  color: var(--ink);
}

.price-tier ul {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.price-tier li {
  font-size: .9rem;
  color: var(--ink-soft);
  padding-left: 18px;
  position: relative;
}

.price-tier li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--gold);
}

/* form */
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.form-grid .full {
  grid-column: 1/-1;
}

label {
  display: block;
  font-family: 'IBM Plex Mono', monospace;
  font-size: .72rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 7px;
}

input,
select,
textarea {
  width: 100%;
  font-family: 'Source Serif 4', serif;
  font-size: 1rem;
  padding: 11px 13px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: #fff;
  color: var(--ink);
}

textarea {
  resize: vertical;
  min-height: 120px;
}

@media (max-width:640px) {
  .form-grid {
    grid-template-columns: 1fr;
  }
}

/* ---------- colophon footer ---------- */
footer.site-footer {
  background: var(--ink);
  color: #C7BED4;
  padding: 56px 0 26px;
  background-image: radial-gradient(circle, rgba(201, 166, 232, 0.10) 1px, transparent 1px);
  background-size: 26px 26px;
}

.colophon-top {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1fr;
  gap: 30px;
  padding-bottom: 34px;
  border-bottom: 1px solid rgba(255, 255, 255, .14);
}

@media (max-width:820px) {
  .colophon-top {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width:520px) {
  .colophon-top {
    grid-template-columns: 1fr;
  }
}

footer.site-footer h4 {
    color: #fff;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 1.1rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    margin-bottom: 8px;
    font-weight: 500;
}

footer.site-footer a {
  color: #C7BED4;
  text-decoration: none;
  font-size: 1.1rem;
}

footer.site-footer a:hover {
  color: #fff;
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.colophon-bottom {
  padding-top: 20px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: .7rem;
  letter-spacing: .02em;
  color: #9186A0;
}

/* page masthead (non-home) */
.page-masthead {
  background: var(--ink);
  color: #fff;
  padding: 0px 0 0px;
  border-bottom: 3px double rgba(255, 255, 255, .28);
}

.page-masthead h1 {
  color: #fff;
  font-family: 'Fraunces', 'Source Serif 4', serif;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(2.2rem, 4.4vw, 3.4rem);
}

.page-masthead .lede {
  color: #D6CCE3;
}

.crumbs {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 1rem;
  letter-spacing: .08em;
  color: #B9A0D6;
  text-transform: uppercase;
  margin-bottom: 16px;
}

.crumbs a {
  color: #B9A0D6;
  text-decoration: none;
}

/* =========================================================
   ACRT 2027 — ABOUT CONFERENCE IMAGE CAROUSEL
   Added without modifying the existing design system
   ========================================================= */


/* ---------- About Layout ---------- */

.about-conference-layout {
    /* display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, 0.78fr); */
    gap: 52px;
    align-items: start;
}


/* ---------- Left Content ---------- */

.about-conference-content {
    min-width: 0;
}

.about-conference-content .section-head {
    display: block;
    margin-bottom: 10px;
}

.about-conference-content .section-head h2 {
    max-width: 100%;
}

.about-conference-content .lede {
    max-width: 100%;
    text-align: justify;
}

.about-description {
    /* max-width: 70ch; */
    color: var(--ink-soft);
    margin-bottom: 8px;
    text-align: justify;
}


/* ---------- Right Carousel ---------- */

.about-conference-carousel {
    width: 100%;
    min-width: 0;
    padding-top: 2px;
    margin-top: 150px;
}


/* Main carousel */

.about-carousel {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: var(--ink);
    border: 1px solid var(--line-strong);
}


/* Subtle frame */

.about-carousel::before {
    content: "";
    position: absolute;
    inset: 10px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    z-index: 3;
    pointer-events: none;
}


/* Slides */

.about-carousel-track {
    position: relative;
    width: 100%;
    height: 100%;
}

.about-carousel-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    transform: scale(1.025);
    transition:
        opacity 0.65s ease,
        transform 1s ease,
        visibility 0.65s ease;
}

.about-carousel-slide.is-active {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
    z-index: 1;
}


/* Images */

.about-carousel-slide img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}


/* Slight image overlay */

.about-carousel-slide::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            to bottom,
            rgba(30, 19, 48, 0.02) 45%,
            rgba(30, 19, 48, 0.48) 100%
        );
    pointer-events: none;
}


/* ---------- Carousel Buttons ---------- */

.about-carousel-btn {
    position: absolute;
    top: 50%;
    z-index: 5;

    width: 42px;
    height: 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    transform: translateY(-50%);

    border: 1px solid rgba(255, 255, 255, 0.65);
    border-radius: 50%;

    background: rgba(30, 19, 48, 0.55);
    backdrop-filter: blur(5px);

    color: #fff;

    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.1rem;

    cursor: pointer;

    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease;
}

.about-carousel-btn:hover {
    background: var(--eosin);
    border-color: var(--eosin);
}

.about-carousel-btn:active {
    transform: translateY(-50%) scale(0.94);
}

.about-carousel-prev {
    left: 22px;
}

.about-carousel-next {
    right: 22px;
}


/* ---------- Dots ---------- */

.about-carousel-dots {
    position: absolute;
    z-index: 5;

    left: 50%;
    bottom: 22px;

    transform: translateX(-50%);

    display: flex;
    align-items: center;
    gap: 7px;
}

.about-carousel-dot {
    width: 7px;
    height: 7px;

    padding: 0;

    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 50%;

    background: transparent;

    cursor: pointer;

    transition:
        width 0.25s ease,
        background 0.25s ease,
        border-color 0.25s ease;
}

.about-carousel-dot.is-active {
    width: 24px;
    border-radius: 10px;
    background: #fff;
    border-color: #fff;
}


/* ---------- Caption ---------- */

.about-carousel-caption {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;

    gap: 12px;

    margin-top: 12px;

    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.68rem;
    line-height: 1.4;

    letter-spacing: 0.05em;
    text-transform: uppercase;

    color: var(--ink-soft);
}

.about-carousel-caption span:last-child {
    text-align: right;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1000px) {

    .about-conference-layout {
        grid-template-columns: minmax(0, 1fr) minmax(300px, 0.72fr);
        gap: 35px;
    }

    .about-carousel {
        aspect-ratio: 4 / 5;
    }

    .about-carousel-btn {
        width: 38px;
        height: 38px;
    }

    .about-carousel-prev {
        left: 16px;
    }

    .about-carousel-next {
        right: 16px;
    }
}


/* =========================================================
   TABLET / SMALL LAPTOP
   ========================================================= */

@media (max-width: 820px) {

    .about-conference-layout {
        grid-template-columns: 1fr;
        gap: 38px;
    }

    .about-conference-content {
        width: 100%;
    }

    .about-conference-carousel {
        max-width: 620px;
        margin: 0 auto;
        width: 100%;
    }

    .about-carousel {
        aspect-ratio: 16 / 10;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 760px) {

    .about-conference-layout {
        gap: 30px;
    }

    .about-conference-content .section-head {
        margin-bottom: 10px;
    }

    .about-description {
        margin-bottom: 24px;
    }

    .about-conference-carousel {
        max-width: 100%;
    }

    .about-carousel {
        aspect-ratio: 4 / 3;
    }

    .about-carousel::before {
        inset: 7px;
    }

    .about-carousel-btn {
        width: 36px;
        height: 36px;

        font-size: 0.95rem;
    }

    .about-carousel-prev {
        left: 12px;
    }

    .about-carousel-next {
        right: 12px;
    }

    .about-carousel-dots {
        bottom: 15px;
    }

    .about-carousel-caption {
        font-size: 0.61rem;
    }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

    .about-conference-layout {
        gap: 26px;
    }

    .about-carousel {
        aspect-ratio: 1 / 1;
    }

    .about-carousel-btn {
        width: 32px;
        height: 32px;
    }

    .about-carousel-prev {
        left: 10px;
    }

    .about-carousel-next {
        right: 10px;
    }

    .about-carousel-caption {
        flex-direction: column;
        gap: 4px;
    }

    .about-carousel-caption span:last-child {
        text-align: left;
    }

    .about-carousel-dots {
        bottom: 12px;
    }

    .about-carousel-dot {
        width: 6px;
        height: 6px;
    }

    .about-carousel-dot.is-active {
        width: 20px;
    }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .about-carousel-slide {
        transition: none;
    }

    .about-carousel-btn,
    .about-carousel-dot {
        transition: none;
    }

}

/* ============================================================
   REFUND POLICY
   ACRT 2027 Editorial Design
   ============================================================ */

.refund-section {
    padding: 80px 0;
}


/* ---------- Header ---------- */

.refund-header {
    max-width: 820px;
    margin-bottom: 48px;
}

.refund-header h2 {
    font-size: clamp(2rem, 4vw, 3rem);
    margin-bottom: 18px;
}

.refund-lede {
    max-width: 68ch;
    color: var(--ink-soft);
    font-size: 1.05rem;
    line-height: 1.7;
}


/* ---------- Policy Block ---------- */

.refund-block {
    border-top: 1px solid var(--line-strong);
    padding: 28px 0 34px;
}

.refund-block:last-of-type {
    border-bottom: 1px solid var(--line-strong);
}


/* ---------- Block Heading ---------- */

.refund-block-header {
    display: grid;
    grid-template-columns: 52px 1fr;
    gap: 18px;
    align-items: start;
    margin-bottom: 28px;
}

.refund-block-number {
    font-family: 'Fraunces', serif;
    font-style: italic;
    font-size: 1.35rem;
    color: var(--gold);
    padding-top: 2px;
}

.refund-block-label {
    display: block;
    font-family: 'IBM Plex Mono', monospace;
    font-size: .65rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin-bottom: 6px;
}

.refund-block-header h3 {
    font-size: clamp(1.25rem, 2.5vw, 1.65rem);
    margin: 0;
}


/* ---------- Refund Rules ---------- */

.refund-rules {
    border-top: 1px solid var(--line);
    margin-left: 70px;
}

.refund-rule {
    display: grid;
    grid-template-columns: 38px 1fr;
    gap: 18px;
    padding: 22px 0;
    border-bottom: 1px solid var(--line);
}

.refund-rule:last-child {
    border-bottom: 0;
}


/* ---------- Rule Icon ---------- */

.refund-rule-mark {
    width: 30px;
    height: 30px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid var(--line-strong);
    border-radius: 50%;

    font-family: 'IBM Plex Mono', monospace;
    font-size: .78rem;
    font-weight: 600;

    color: var(--teal-deep);
    background: var(--teal-tint);
}

.refund-rule-negative .refund-rule-mark {
    color: var(--eosin);
    background: var(--eosin-tint);
    border-color: #E8C3D6;
}


/* ---------- Rule Content ---------- */

.refund-rule-title {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 600;
    font-size: 1rem;
    color: var(--ink);
    margin-bottom: 6px;
}

.refund-rule-content p {
    max-width: 70ch;
    margin: 0;
    color: var(--ink-soft);
    font-size: .94rem;
    line-height: 1.65;
}


/* ---------- Normal Text Blocks ---------- */

.refund-text {
    margin-left: 70px;
}

.refund-text p {
    max-width: 70ch;
    margin: 0;
    color: var(--ink-soft);
    font-size: .98rem;
    line-height: 1.7;
}

.refund-text a {
    color: var(--teal-deep);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}


/* ============================================================
   EVENT CANCELLATION
   ============================================================ */

.refund-event-cancellation {
    display: grid;
    grid-template-columns: 58px 1fr;
    gap: 22px;

    margin-top: 42px;

    padding: 28px 30px;

    background: var(--paper-raised);

    border: 1px solid var(--line-strong);
    border-left: 3px solid var(--eosin);
}


/* ---------- Event Mark ---------- */

.refund-event-mark {
    width: 38px;
    height: 38px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: var(--eosin-tint);
    border: 1px solid #E8C3D6;

    color: var(--eosin);

    font-family: 'Fraunces', serif;
    font-size: 1.25rem;
    font-style: italic;
}


/* ---------- Event Content ---------- */

.refund-event-label {
    display: block;

    font-family: 'IBM Plex Mono', monospace;
    font-size: .65rem;
    letter-spacing: .1em;
    text-transform: uppercase;

    color: var(--eosin);

    margin-bottom: 6px;
}

.refund-event-content h3 {
    font-size: 1.3rem;
    margin-bottom: 10px;
}

.refund-event-content p {
    max-width: 75ch;
    margin: 0;

    color: var(--ink-soft);
    font-size: .94rem;
    line-height: 1.7;
}


/* ============================================================
   POLICY SUMMARY
   ============================================================ */

.refund-summary {
    margin-top: 48px;

    border-top: 1px solid var(--line-strong);
    border-bottom: 1px solid var(--line-strong);
}

.refund-summary-label {
    padding: 14px 0;

    font-family: 'IBM Plex Mono', monospace;
    font-size: .66rem;
    letter-spacing: .1em;
    text-transform: uppercase;

    color: var(--gold);

    border-bottom: 1px solid var(--line);
}

.refund-summary-table {
    width: 100%;
}

.refund-summary-row {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 30px;

    padding: 15px 0;

    border-bottom: 1px solid var(--line);

    font-family: 'IBM Plex Mono', monospace;
    font-size: .76rem;
}

.refund-summary-row:last-child {
    border-bottom: 0;
}

.refund-summary-row span {
    color: var(--ink-soft);
}

.refund-summary-row strong {
    color: var(--ink);
    font-family: 'Space Grotesk', sans-serif;
    font-size: .88rem;
    font-weight: 500;
}


/* ============================================================
   TABLET
   ============================================================ */

@media (max-width: 760px) {

    .refund-section {
        padding: 60px 0;
    }

    .refund-header {
        margin-bottom: 36px;
    }

    .refund-block {
        padding: 24px 0 28px;
    }

    .refund-rules,
    .refund-text {
        margin-left: 0;
    }

    .refund-event-cancellation {
        grid-template-columns: 46px 1fr;
        gap: 16px;

        padding: 22px;
    }

    .refund-summary-row {
        grid-template-columns: 1fr;
        gap: 5px;
    }

}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 520px) {

    .refund-section {
        padding: 48px 0;
    }

    .refund-header h2 {
        font-size: 2rem;
    }

    .refund-lede {
        font-size: .98rem;
    }

    .refund-block-header {
        grid-template-columns: 40px 1fr;
        gap: 12px;
    }

    .refund-block-number {
        font-size: 1.15rem;
    }

    .refund-rule {
        grid-template-columns: 32px 1fr;
        gap: 12px;
        padding: 18px 0;
    }

    .refund-rule-mark {
        width: 28px;
        height: 28px;
        font-size: .7rem;
    }

    .refund-rule-content p,
    .refund-text p,
    .refund-event-content p {
        font-size: .9rem;
    }

    .refund-event-cancellation {
        grid-template-columns: 1fr;
        gap: 14px;

        padding: 20px;
        margin-top: 32px;
    }

    .refund-event-mark {
        width: 34px;
        height: 34px;
    }

    .refund-summary {
        margin-top: 34px;
    }

    .refund-summary-row {
        padding: 14px 0;
    }

}

/* ============================================================
   ACRT 2027 — ABSTRACT SUBMISSION
   Editorial / Journal Style
   CSS ONLY — FUNCTIONAL CONTROLS ARE UNCHANGED
   ============================================================ */


/* ============================================================
   MAIN SECTION
   ============================================================ */

.abstract-submission-section {
    padding: 75px 0 90px;
    background: transparent;
}

.abstract-submission-page {
    position: relative;
    overflow: hidden;
}


/* Remove/soften old decorative background if present */

.abstract-bg-network {
    pointer-events: none;
}


/* ============================================================
   HEADER
   ============================================================ */

.abstract-header {
    max-width: var(--max);
    margin: 0 auto 42px;
    padding: 0 28px;

    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 40px;
}


/* Heading */

.abstract-heading {
    max-width: 760px;
}

.abstract-heading h1 {
    margin: 0 0 14px;

    font-family: 'Fraunces', 'Source Serif 4', serif;
    font-size: clamp(2.4rem, 5vw, 4.2rem) !important;
    line-height: .98;
    font-weight: 500;
    font-style: italic;
    letter-spacing: -0.02em;

    color: var(--ink);
}

.abstract-heading h1 span {
    color: var(--teal);
}


/* Description */

.abstract-heading > p {
    max-width: 55ch;

    margin: 0 0 18px;

    color: var(--ink-soft);

    font-family: 'Source Serif 4', Georgia, serif;
    font-size: 1.02rem;
    line-height: 1.65;
}


/* Required note */

.required-note {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    font-family: 'IBM Plex Mono', monospace;
    font-size: .67rem;
    letter-spacing: .04em;

    color: var(--ink-soft);
}

.required-note i {
    color: var(--gold);
}

.required-note strong {
    color: var(--eosin);
}


/* ============================================================
   DOWNLOAD TEMPLATE
   ============================================================ */

.template-card {
    width: 245px;
    flex-shrink: 0;

    display: flex;
    align-items: center;
    gap: 15px;

    padding: 17px 18px;

    text-decoration: none;

    background: var(--paper-raised);

    border: 1px solid var(--line-strong);

    color: var(--ink);

    transition:
        background .2s ease,
        border-color .2s ease,
        transform .2s ease;
}

.template-card:hover {
    color: var(--ink);
    background: var(--teal-tint);
    border-color: var(--teal);
    transform: translateY(-2px);
}

.template-icon {
    width: 42px;
    height: 42px;

    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    background: var(--ink);
    color: #fff;

    font-size: .9rem;
}

.template-card:hover .template-icon {
    background: var(--teal-deep);
}

.template-content {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.template-content strong {
    font-family: 'Space Grotesk', sans-serif;
    font-size: .9rem;
    font-weight: 600;
}

.template-content span {
    font-family: 'IBM Plex Mono', monospace;
    font-size: .62rem;
    line-height: 1.45;
    color: var(--ink-soft);
}


/* ============================================================
   FORM CARD
   ============================================================ */

.abstract-form-card {
    max-width: var(--max);
    margin: 0 auto;

    padding: 42px 28px 38px;

    background: var(--paper-raised);

    border-top: 1px solid var(--line-strong);
    border-bottom: 1px solid var(--line-strong);
}


/* Bootstrap row adjustment */

.abstract-form-card .row {
    --bs-gutter-x: 28px;
    --bs-gutter-y: 0;
}


/* ============================================================
   FIELD
   ============================================================ */

.abstract-field {
    position: relative;
    margin-bottom: 4px;
}


/* Labels */

.abstract-field label {
    display: block;

    margin: 0 0 8px;

    font-family: 'IBM Plex Mono', monospace;
    font-size: .66rem;
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase;

    color: var(--ink-soft);
}

.abstract-field label span {
    color: var(--eosin);
    font-weight: 600;
}


/* ============================================================
   INPUTS / SELECTS
   ============================================================ */

.abstract-input {
    width: 100%;
    height: 48px;

    padding: 10px 13px;

    border: 1px solid var(--line-strong);
    border-radius: var(--radius);

    background: #fff;

    color: var(--ink);

    font-family: 'Source Serif 4', Georgia, serif;
    font-size: .98rem;

    outline: none;

    transition:
        border-color .2s ease,
        box-shadow .2s ease,
        background .2s ease;
}


/* Text inputs */

.abstract-input::placeholder {
    color: #91869F;
    opacity: 1;
}


/* Select */

select.abstract-input {
    cursor: pointer;

    appearance: auto;
}


/* Focus */

.abstract-input:focus {
    border-color: var(--teal);

    box-shadow:
        0 0 0 3px rgba(108, 63, 160, .10);

    background: #fff;
}


/* Hover */

.abstract-input:hover {
    border-color: var(--line-strong);
}


/* Invalid */

.abstract-input.is-invalid {
    border-color: var(--eosin) !important;

    box-shadow:
        0 0 0 3px rgba(156, 47, 99, .08);
}


/* ============================================================
   VALIDATION MESSAGE
   ============================================================ */

.field-error {
    display: none;

    margin-top: 7px;

    font-family: 'IBM Plex Mono', monospace;
    font-size: .64rem;
    line-height: 1.45;

    color: var(--eosin);
}

.field-error.show {
    display: block;
}


/* ============================================================
   FILE UPLOAD
   ============================================================ */

.abstract-upload-section {
    margin-top: 38px;
    padding-top: 34px;

    border-top: 1px solid var(--line);
}


/* Drop zone */

.abstract-drop-zone {
    position: relative;

    min-height: 235px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    padding: 30px;

    text-align: center;

    background:
        linear-gradient(
            135deg,
            rgba(237, 228, 247, .45),
            rgba(255, 255, 255, .7)
        );

    border: 1px dashed var(--line-strong);

    cursor: pointer;

    transition:
        border-color .2s ease,
        background .2s ease;
}

.abstract-drop-zone:hover {
    border-color: var(--teal);
    background: var(--teal-tint);
}


/* Drag active */

.abstract-drop-zone.drag-active {
    border-color: var(--teal);
    background: var(--teal-tint);

    box-shadow:
        inset 0 0 0 1px var(--teal);
}


/* Upload icon */

.upload-cloud {
    width: 54px;
    height: 54px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 15px;

    background: var(--ink);
    color: #fff;

    font-size: 1rem;
}

.abstract-drop-zone:hover .upload-cloud,
.abstract-drop-zone.drag-active .upload-cloud {
    background: var(--teal);
}


/* Upload heading */

.abstract-drop-zone h4 {
    margin: 0 0 6px;

    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.08rem;
    font-weight: 600;
}


/* Upload paragraph */

.abstract-drop-zone > p {
    margin: 0 0 13px;

    color: var(--ink-soft);

    font-family: 'Source Serif 4', Georgia, serif;
    font-size: .92rem;
}


/* Browse button */

.abstract-drop-zone label {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    margin: 0;
    padding: 7px 13px;

    border: 1px solid var(--ink);

    color: var(--ink);

    background: transparent;

    font-family: 'IBM Plex Mono', monospace;
    font-size: .65rem;
    letter-spacing: .05em;
    text-transform: uppercase;

    cursor: pointer;

    transition:
        background .2s ease,
        color .2s ease;
}

.abstract-drop-zone label:hover {
    background: var(--ink);
    color: #fff;
}


/* Accepted formats */

.accepted-format {
    margin-top: 14px;

    font-family: 'IBM Plex Mono', monospace;
    font-size: .61rem;
    line-height: 1.5;

    color: var(--ink-soft);
}

.accepted-format strong {
    color: var(--teal-deep);
    font-weight: 600;
}


/* Selected file */

.selected-file {
    margin-top: 10px;

    max-width: 100%;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    font-family: 'IBM Plex Mono', monospace;
    font-size: .65rem;

    color: var(--gold);
}


/* File error */

.abstract-upload-section .file-error {
    text-align: center;
}


/* ============================================================
   SUBMIT AREA
   ============================================================ */

.abstract-submit-area {
    display: flex;
    justify-content: flex-end;

    margin-top: 32px;
    padding-top: 28px;

    border-top: 1px solid var(--line);
}


/* Submit button */

.abstract-submit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;

    min-width: 190px;

    padding: 13px 22px;

    border: 1px solid var(--ink);
    border-radius: var(--radius);

    background: var(--ink);
    color: #fff;

    font-family: 'IBM Plex Mono', monospace;
    font-size: .7rem;
    font-weight: 500;

    letter-spacing: .06em;
    text-transform: uppercase;

    cursor: pointer;

    transition:
        background .2s ease,
        border-color .2s ease,
        transform .2s ease;
}

.abstract-submit-btn:hover {
    background: var(--teal-deep);
    border-color: var(--teal-deep);
    color: #fff;
    transform: translateY(-1px);
}

.abstract-submit-btn:disabled {
    opacity: .65;
    cursor: not-allowed;
    transform: none;
}


/* ============================================================
   IMPORTANT INFORMATION
   ============================================================ */

.abstract-important {
    display: grid;
    grid-template-columns: 48px 1fr;
    gap: 18px;

    margin-top: 34px;
    padding: 22px 24px;

    border: 1px solid var(--line-strong);
    border-left: 3px solid var(--gold);

    background: var(--paper);

}


/* Icon */

.important-icon {
    width: 38px;
    height: 38px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: var(--teal-tint);
    color: var(--teal-deep);

    font-size: .9rem;
}


/* Content */

.important-content h4 {
    margin: 0 0 10px;

    font-family: 'Space Grotesk', sans-serif;
    font-size: 1rem;
    font-weight: 600;
}

.important-content ul {
    margin: 0;
    padding: 0;

    list-style: none;
}

.important-content li {
    position: relative;

    padding-left: 17px;
    margin-bottom: 5px;

    color: var(--ink-soft);

    font-family: 'Source Serif 4', Georgia, serif;
    font-size: .9rem;
    line-height: 1.55;
}

.important-content li:last-child {
    margin-bottom: 0;
}

.important-content li::before {
    content: "—";

    position: absolute;
    left: 0;

    color: var(--gold);
}


/* ============================================================
   SUCCESS POPUP
   ============================================================ */

.abstract-success-overlay {
    position: fixed;
    inset: 0;

    z-index: 9999;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 20px;

    background: rgba(30, 19, 48, .72);

    backdrop-filter: blur(5px);

    opacity: 0;
    visibility: hidden;

    transition:
        opacity .25s ease,
        visibility .25s ease;
}

.abstract-success-overlay.show {
    opacity: 1;
    visibility: visible;
}


/* Popup */

.abstract-success-popup {
    width: min(480px, 100%);

    padding: 38px 34px;

    text-align: center;

    background: var(--paper-raised);

    border: 1px solid var(--line-strong);
    border-top: 3px solid var(--teal);

    box-shadow: 0 25px 70px rgba(30, 19, 48, .25);

    transform: translateY(15px);

    transition: transform .25s ease;
}

.abstract-success-overlay.show .abstract-success-popup {
    transform: translateY(0);
}


/* Success icon */

.success-icon {
    width: 58px;
    height: 58px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin: 0 auto 20px;

    border: 1px solid #D9C6EF;

    border-radius: 50%;

    background: var(--teal-tint);
    color: var(--teal-deep);

    font-size: 1.2rem;
}


/* Success title */

.abstract-success-popup h3 {
    margin: 0 0 10px;

    font-family: 'Fraunces', 'Source Serif 4', serif;
    font-style: italic;
    font-weight: 500;

    font-size: 1.65rem;
}


/* Success message */

.abstract-success-popup p {
    max-width: 38ch;

    margin: 0 auto 24px;

    color: var(--ink-soft);

    font-size: .94rem;
    line-height: 1.6;
}


/* Close */

.success-close-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 11px 22px;

    border: 1px solid var(--ink);
    border-radius: var(--radius);

    background: var(--ink);
    color: #fff;

    font-family: 'IBM Plex Mono', monospace;
    font-size: .68rem;

    letter-spacing: .05em;
    text-transform: uppercase;

    cursor: pointer;

    transition:
        background .2s ease,
        transform .2s ease;
}

.success-close-btn:hover {
    background: var(--teal-deep);
    transform: translateY(-1px);
}


/* ============================================================
   TABLET
   ============================================================ */

@media (max-width: 900px) {

    .abstract-header {
        align-items: flex-start;
        flex-direction: column;
        gap: 28px;
    }

    .template-card {
        width: 100%;
        max-width: 320px;
    }

    .abstract-form-card {
        padding: 36px 28px;
    }

}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 767px) {

    .abstract-submission-section {
        padding: 55px 0 65px;
    }

    .abstract-header {
        padding: 0 20px;
        margin-bottom: 30px;
    }

    .abstract-heading h1 {
        font-size: clamp(2.2rem, 12vw, 3.2rem);
    }

    .abstract-heading > p {
        font-size: .95rem;
    }

    .template-card {
        max-width: 100%;
    }

    .abstract-form-card {
        padding: 30px 20px;
    }

    .abstract-form-card .row {
        --bs-gutter-x: 0;
    }

    .abstract-field {
        margin-bottom: 18px;
    }

    .abstract-upload-section {
        margin-top: 15px;
        padding-top: 25px;
    }

    .abstract-drop-zone {
        min-height: 210px;
        padding: 25px 18px;
    }

    .abstract-submit-area {
        margin-top: 22px;
        padding-top: 22px;
    }

    .abstract-submit-btn {
        width: 100%;
    }

    .abstract-important {
        grid-template-columns: 1fr;
        gap: 12px;

        padding: 20px;
    }

}


/* ============================================================
   SMALL MOBILE
   ============================================================ */

@media (max-width: 480px) {

    .abstract-submission-section {
        padding: 45px 0 55px;
    }

    .abstract-header {
        padding: 0 16px;
    }

    .abstract-form-card {
        padding: 25px 16px;
    }

    .abstract-heading h1 {
        font-size: 2.15rem;
    }

    .abstract-heading > p {
        font-size: .9rem;
    }

    .required-note {
        align-items: flex-start;
    }

    .template-card {
        padding: 14px;
    }

    .template-icon {
        width: 38px;
        height: 38px;
    }

    .abstract-input {
        height: 46px;
        font-size: .94rem;
    }

    .abstract-drop-zone {
        min-height: 200px;
    }

    .abstract-drop-zone h4 {
        font-size: .98rem;
    }

    .abstract-success-popup {
        padding: 30px 22px;
    }

}


/* ============================================================
   REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

    .template-card,
    .abstract-input,
    .abstract-submit-btn,
    .abstract-success-overlay,
    .abstract-success-popup {
        transition: none;
    }

}

/* ============================================================
   SCIENTIFIC SESSIONS DROPDOWN
   ============================================================ */

.nav-dropdown {
    position: relative;
}


/* Main dropdown link */

.nav-dropdown-toggle {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;

    white-space: nowrap;
}


/* Arrow */

.dropdown-arrow {
    display: inline-block;

    font-family: Arial, sans-serif;
    font-size: .85rem;
    line-height: 1;

    transform: translateY(-1px);

    transition: transform .2s ease;
}


/* Rotate arrow when hovering */

.nav-dropdown:hover .dropdown-arrow {
    transform: rotate(180deg);
}


/* ============================================================
   DROPDOWN MENU
   ============================================================ */

.nav-dropdown-menu {
    position: absolute;

    top: calc(100% + 8px);
    left: 50%;

    width: 300px;

    transform:
        translateX(-50%)
        translateY(8px);

    padding: 8px 0;

    background: var(--paper-raised);

    border: 1px solid var(--line-strong);

    box-shadow:
        0 12px 30px rgba(30, 19, 48, .12);

    opacity: 0;
    visibility: hidden;

    pointer-events: none;

    transition:
        opacity .18s ease,
        transform .18s ease,
        visibility .18s ease;

    z-index: 100;
}

.nav-dropdown::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;

    top: 100%;

    height: 15px;

    background: transparent;

    z-index: 999998;
}



/* Small top connector */

.nav-dropdown-menu::before {
    content: "";

    position: absolute;

    top: -5px;
    left: 50%;

    width: 9px;
    height: 9px;

    transform: translateX(-50%) rotate(45deg);

    background: var(--paper-raised);

    border-left: 1px solid var(--line-strong);
    border-top: 1px solid var(--line-strong);
}


/* Show */

.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu {
    opacity: 1;
    visibility: visible;

    pointer-events: auto;

    transform:
        translateX(-50%)
        translateY(0);
}


/* ============================================================
   DROPDOWN ITEMS
   ============================================================ */

.nav-dropdown-menu a {
    display: block !important;

    width: 100% !important;

    padding: 11px 16px !important;

    border-bottom: 1px solid var(--line);

    color: var(--ink) !important;

    font-family: 'IBM Plex Mono', monospace !important;
    font-size: 16px !important;

    line-height: 1.45;

    letter-spacing: .02em;

    text-transform: none !important;

    text-decoration: none;

    transition:
        background .15s ease,
        color .15s ease,
        padding-left .15s ease;
}


.nav-dropdown-menu a:last-child {
    border-bottom: 0;
}


.nav-dropdown-menu a:hover {
    background: var(--teal-tint);

    color: var(--teal-deep) !important;

    padding-left: 20px !important;
}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 900px) {

    .nav-dropdown {
        width: 100%;
    }

    .nav-dropdown-toggle {
        width: 100% !important;

        justify-content: space-between;

        padding: 14px 0 !important;
    }


    /* Mobile dropdown */

    .nav-dropdown-menu {
        position: static;

        width: 100%;

        transform: none;

        padding: 0;

        background: transparent;

        border: 0;

        box-shadow: none;

        opacity: 1;
        visibility: visible;

        pointer-events: auto;

        display: none;
    }


    .nav-dropdown:hover .nav-dropdown-menu,
    .nav-dropdown:focus-within .nav-dropdown-menu {
        transform: none;
    }


    /* Remove connector */

    .nav-dropdown-menu::before {
        display: none;
    }


    /* Mobile items */

    .nav-dropdown-menu a {
        padding: 11px 14px 11px 18px !important;

        border-bottom: 1px solid var(--line);

        background: rgba(237, 228, 247, .35);

        font-size: .66rem !important;
    }


    /*
       On mobile, keep the menu closed by default.
       It opens when Scientific Sessions receives focus.
    */

    .nav-dropdown:focus-within .nav-dropdown-menu {
        display: block;
    }

}

/* ============================================================
   ACRT 2027 — PRESENTATION REQUIREMENTS
   Editorial / Journal Style
   CSS ONLY — EXISTING TAB FUNCTIONALITY PRESERVED
   ============================================================ */


/* ============================================================
   MAIN SECTION
   ============================================================ */

.presentation-guide-section {
    padding: 80px 0 100px;
    background: transparent;
}

.presentation-guide-section .container {
    max-width: var(--max);
}


/* ============================================================
   HEADER
   ============================================================ */

.presentation-guide-header {
    max-width: 850px;
    margin-bottom: 42px;
}

.presentation-guide-eyebrow {
    display: block;

    margin-bottom: 12px;

    font-family: 'IBM Plex Mono', monospace;
    font-size: .66rem;
    font-weight: 500;

    letter-spacing: .1em;
    text-transform: uppercase;

    color: var(--gold);
}

.presentation-guide-header h2 {
    margin: 0 0 16px;

    font-family: 'Fraunces', 'Source Serif 4', serif;
    font-size: clamp(2.3rem, 5vw, 4rem);
    line-height: 1;
    font-weight: 500;
    font-style: italic;
    letter-spacing: -.025em;

    color: var(--ink);
}

.presentation-guide-header p {
    max-width: 62ch;

    margin: 0;

    color: var(--ink-soft);

    font-family: 'Source Serif 4', Georgia, serif;
    font-size: 1rem;
    line-height: 1.7;
}


/* ============================================================
   TAB NAVIGATION
   ============================================================ */

.presentation-tabs-wrapper {
    border-top: 1px solid var(--line-strong);
    border-bottom: 1px solid var(--line-strong);

    margin-bottom: 30px;

    overflow-x: auto;
    overflow-y: hidden;

    scrollbar-width: thin;
    scrollbar-color: var(--line-strong) transparent;
}

.presentation-tabs-wrapper::-webkit-scrollbar {
    height: 4px;
}

.presentation-tabs-wrapper::-webkit-scrollbar-track {
    background: transparent;
}

.presentation-tabs-wrapper::-webkit-scrollbar-thumb {
    background: var(--line-strong);
}


/* Tab row */

.presentation-tabs {
    display: flex;
    align-items: stretch;

    min-width: max-content;
}


/* Individual tab */

.presentation-tab {
    position: relative;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 9px;

    min-height: 64px;

    padding: 12px 18px;

    border: 0;
    border-right: 1px solid var(--line);

    border-radius: 0;

    background: transparent;

    color: var(--ink-soft);

    font-family: 'IBM Plex Mono', monospace;
    font-size: .64rem;
    font-weight: 500;

    letter-spacing: .04em;
    text-transform: uppercase;

    white-space: nowrap;

    cursor: pointer;

    transition:
        color .2s ease,
        background .2s ease;
}


/* First tab */

.presentation-tab:first-child {
    border-left: 1px solid var(--line);
}


/* Icon */

.presentation-tab i {
    font-size: .8rem;

    color: var(--gold);

    transition:
        color .2s ease,
        transform .2s ease;
}


/* Hover */

.presentation-tab:hover {
    color: var(--ink);

    background: var(--paper-raised);
}

.presentation-tab:hover i {
    color: var(--teal-deep);
    transform: translateY(-1px);
}


/* Active */

.presentation-tab.active {
    color: var(--ink);

    background: var(--teal-tint);
}


/* Active gold line */

.presentation-tab.active::after {
    content: "";

    position: absolute;

    left: 14px;
    right: 14px;
    bottom: -1px;

    height: 3px;

    background: var(--teal);
}


/* Active icon */

.presentation-tab.active i {
    color: var(--teal-deep);
}


/* ============================================================
   TAB CONTENT
   ============================================================ */

.presentation-content-area {
    width: 100%;
}


/* ============================================================
   PANEL
   ============================================================ */

.presentation-panel {
    display: none;

    background: var(--paper-raised);

    border-top: 1px solid var(--line-strong);
    border-bottom: 1px solid var(--line-strong);
}

.presentation-panel.active {
    display: block;

    animation: presentationPanelIn .3s ease;
}


@keyframes presentationPanelIn {

    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}


/* ============================================================
   PANEL HEADER
   ============================================================ */

.presentation-panel-header {
    display: grid;

    grid-template-columns: 62px 1fr;

    gap: 20px;

    align-items: center;

    padding: 30px 32px;

    border-bottom: 1px solid var(--line);

    background:
        linear-gradient(
            135deg,
            rgba(237, 228, 247, .55),
            rgba(255, 255, 255, .55)
        );
}


/* Header icon */

.presentation-panel-icon {
    width: 50px;
    height: 50px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: var(--ink);

    color: #fff;

    font-size: 1rem;
}


/* Small label */

.presentation-panel-header > div:last-child > span {
    display: block;

    margin-bottom: 5px;

    font-family: 'IBM Plex Mono', monospace;
    font-size: .63rem;
    letter-spacing: .1em;
    text-transform: uppercase;

    color: var(--gold);
}


/* Panel heading */

.presentation-panel-header h3 {
    margin: 0;

    font-family: 'Fraunces', 'Source Serif 4', serif;
    font-size: clamp(1.45rem, 3vw, 2.15rem);
    line-height: 1.1;
    font-weight: 500;

    color: var(--ink);
}


/* ============================================================
   PANEL BODY
   ============================================================ */

.presentation-panel-body {
    padding: 34px 32px 40px;
}

.presentation-panel-body > p {
    max-width: 72ch;

    margin: 0 0 25px;

    color: var(--ink-soft);

    font-family: 'Source Serif 4', Georgia, serif;
    font-size: .98rem;
    line-height: 1.7;
}


/* ============================================================
   CHECK LIST
   ============================================================ */

.presentation-check-list {
    list-style: none;

    margin: 0;
    padding: 0;

    max-width: 850px;
}


/* List item */

.presentation-check-list li {
    position: relative;

    display: grid;

    grid-template-columns: 28px 1fr;

    gap: 12px;

    padding: 15px 0;

    border-bottom: 1px solid var(--line);

    color: var(--ink-soft);

    font-family: 'Source Serif 4', Georgia, serif;
    font-size: .94rem;

    line-height: 1.65;
}

.presentation-check-list li:first-child {
    border-top: 1px solid var(--line);
}


/* Check icon */

.presentation-check-list li > i {
    width: 25px;
    height: 25px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-top: 1px;

    border: 1px solid #D9C6EF;

    border-radius: 50%;

    background: var(--teal-tint);

    color: var(--teal-deep);

    font-size: .62rem;
}


/* Strong text */

.presentation-check-list li strong {
    color: var(--ink);

    font-family: 'Space Grotesk', sans-serif;
    font-weight: 600;
}


/* ============================================================
   SUBSECTION
   ============================================================ */

.presentation-subsection {
    max-width: 850px;

    margin-top: 35px;
}

.presentation-subsection h4 {
    margin: 0 0 12px;

    font-family: 'Space Grotesk', sans-serif;
    font-size: 1rem;
    font-weight: 600;

    color: var(--ink);
}

.presentation-subheading {
    margin: 0 0 22px;

    font-family: 'Fraunces', 'Source Serif 4', serif;
    font-size: 1.45rem;
    font-style: italic;
    font-weight: 500;

    color: var(--ink);
}


/* ============================================================
   DIVIDER
   ============================================================ */

.presentation-divider {
    height: 1px;

    margin: 38px 0;

    background: var(--line-strong);
}


/* ============================================================
   TEXT ITEMS
   ============================================================ */

.presentation-text-item {
    display: grid;

    grid-template-columns: 125px 1fr;

    gap: 25px;

    padding: 15px 0;

    border-bottom: 1px solid var(--line);

    color: var(--ink-soft);

    font-family: 'Source Serif 4', Georgia, serif;
    font-size: .94rem;

    line-height: 1.65;
}

.presentation-text-item:first-child {
    border-top: 1px solid var(--line);
}

.presentation-text-item strong {
    color: var(--ink);

    font-family: 'IBM Plex Mono', monospace;
    font-size: .66rem;

    letter-spacing: .05em;
    text-transform: uppercase;
}

.presentation-intro-text {
    margin: 25px 0 8px !important;
}


/* ============================================================
   HIGHLIGHT
   ============================================================ */

.presentation-highlight {
    display: grid;

    grid-template-columns: 46px 1fr;

    gap: 16px;

    max-width: 850px;

    margin-bottom: 25px;

    padding: 20px 22px;

    border: 1px solid var(--line-strong);
    border-left: 3px solid var(--gold);

    background: var(--paper);
}


/* Highlight icon */

.presentation-highlight > i {
    width: 36px;
    height: 36px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: var(--teal-tint);

    color: var(--teal-deep);

    font-size: .85rem;
}


/* Highlight title */

.presentation-highlight strong {
    display: block;

    margin-bottom: 5px;

    font-family: 'Space Grotesk', sans-serif;
    font-size: .95rem;
    font-weight: 600;

    color: var(--ink);
}

.presentation-highlight p {
    margin: 0;

    color: var(--ink-soft);

    font-family: 'Source Serif 4', Georgia, serif;
    font-size: .9rem;
    line-height: 1.55;
}


/* ============================================================
   INFORMATION BLOCKS
   ============================================================ */

.presentation-info-block {
    max-width: 850px;

    margin-bottom: 30px;

    border-top: 1px solid var(--line-strong);
}

.presentation-info-block:last-child {
    margin-bottom: 0;
}


/* Heading */

.presentation-info-heading {
    display: flex;

    align-items: center;

    gap: 12px;

    padding: 17px 0;

    border-bottom: 1px solid var(--line);
}

.presentation-info-heading i {
    width: 30px;
    height: 30px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: var(--teal-deep);

    background: var(--teal-tint);

    font-size: .7rem;
}

.presentation-info-heading h4 {
    margin: 0;

    font-family: 'Space Grotesk', sans-serif;
    font-size: .98rem;
    font-weight: 600;

    color: var(--ink);
}


/* ============================================================
   ACCESSIBILITY / FOCUS
   ============================================================ */

.presentation-tab:focus-visible {
    outline: 2px solid var(--teal);

    outline-offset: -2px;
}


/* ============================================================
   TABLET
   ============================================================ */

@media (max-width: 900px) {

    .presentation-guide-section {
        padding: 65px 0 80px;
    }

    .presentation-guide-header {
        margin-bottom: 32px;
    }

    .presentation-tabs {
        width: max-content;
    }

    .presentation-tab {
        min-height: 58px;

        padding: 10px 15px;

        font-size: .6rem;
    }

    .presentation-panel-header {
        padding: 25px 25px;
    }

    .presentation-panel-body {
        padding: 28px 25px 34px;
    }

}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 767px) {

    .presentation-guide-section {
        padding: 52px 0 65px;
    }


    /* Header */

    .presentation-guide-header {
        margin-bottom: 28px;
    }

    .presentation-guide-header h2 {
        font-size: 2.35rem;
    }

    .presentation-guide-header p {
        font-size: .93rem;
    }


    /* Tabs */

    .presentation-tabs-wrapper {
        margin-bottom: 22px;
    }

    .presentation-tab {
        min-height: 54px;

        padding: 9px 13px;

        gap: 7px;

        font-size: .58rem;
    }

    .presentation-tab i {
        font-size: .72rem;
    }


    /* Panel */

    .presentation-panel-header {
        grid-template-columns: 48px 1fr;

        gap: 14px;

        padding: 22px 20px;
    }

    .presentation-panel-icon {
        width: 42px;
        height: 42px;

        font-size: .85rem;
    }

    .presentation-panel-header h3 {
        font-size: 1.45rem;
    }

    .presentation-panel-body {
        padding: 24px 20px 30px;
    }


    /* Lists */

    .presentation-check-list li {
        grid-template-columns: 25px 1fr;

        gap: 10px;

        font-size: .9rem;
    }

    .presentation-check-list li > i {
        width: 23px;
        height: 23px;
    }


    /* Text items */

    .presentation-text-item {
        grid-template-columns: 1fr;

        gap: 5px;

        font-size: .9rem;
    }


    /* Highlight */

    .presentation-highlight {
        grid-template-columns: 40px 1fr;

        gap: 12px;

        padding: 17px;
    }


    /* Info blocks */

    .presentation-info-heading {
        padding: 15px 0;
    }

}


/* ============================================================
   SMALL MOBILE
   ============================================================ */

@media (max-width: 480px) {

    .presentation-guide-section {
        padding: 45px 0 55px;
    }

    .presentation-guide-header h2 {
        font-size: 2.05rem;
    }

    .presentation-guide-header p {
        font-size: .88rem;
    }

    .presentation-tab {
        min-height: 50px;

        padding: 8px 12px;

        font-size: .55rem;
    }

    .presentation-panel-header {
        grid-template-columns: 1fr;

        gap: 12px;

        padding: 20px 16px;
    }

    .presentation-panel-icon {
        width: 40px;
        height: 40px;
    }

    .presentation-panel-body {
        padding: 22px 16px 28px;
    }

    .presentation-panel-header h3 {
        font-size: 1.35rem;
    }

    .presentation-check-list li {
        padding: 13px 0;
    }

    .presentation-highlight {
        grid-template-columns: 1fr;

        gap: 10px;

        padding: 16px;
    }

}


/* ============================================================
   REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

    .presentation-panel.active {
        animation: none;
    }

    .presentation-tab,
    .presentation-tab i {
        transition: none;
    }

}


/* ============================================================
   ACRT 2027 — REGISTRATION / PRICING
   Editorial Journal Style
   ============================================================ */

.registration-section {
    padding: 85px 0 20px;
}


/* ============================================================
   HEADER
   ============================================================ */

.registration-wrap {
    max-width: var(--max);
}

.registration-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 40px;

    margin-bottom: 45px;

    padding-bottom: 28px;

    border-bottom: 1px solid var(--line-strong);
}


.registration-header h2 {
    margin: 10px 0 0;

    font-family: 'Fraunces', 'Source Serif 4', serif;

    font-size: clamp(2.3rem, 5vw, 4rem);

    line-height: .98;

    font-weight: 500;

    font-style: italic;

    letter-spacing: -.025em;

    color: var(--ink);
}


.registration-header > p {
    max-width: 35ch;

    margin: 0;

    color: var(--ink-soft);

    font-family: 'Source Serif 4', Georgia, serif;

    font-size: .98rem;

    line-height: 1.65;
}


/* ============================================================
   PRICING GRID
   ============================================================ */

.registration-plans {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    border-top: 1px solid var(--line-strong);
    border-left: 1px solid var(--line-strong);
}


/* ============================================================
   PLAN
   ============================================================ */

.registration-plan {
    position: relative;

    display: flex;
    flex-direction: column;

    min-width: 0;

    padding: 25px 22px 24px;

    background: var(--paper-raised);

    border-right: 1px solid var(--line-strong);
    border-bottom: 1px solid var(--line-strong);

    transition:
        background .2s ease,
        transform .2s ease;
}


.registration-plan:hover {
    background: #fff;

    transform: translateY(-3px);

    z-index: 2;

    box-shadow:
        0 12px 30px rgba(30, 19, 48, .08);
}


/* ============================================================
   PLAN TOP
   ============================================================ */

.registration-plan-top {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 10px;

    margin-bottom: 26px;
}


.registration-number {
    font-family: 'Fraunces', serif;

    font-size: 1.15rem;

    font-style: italic;

    color: var(--gold);
}


.registration-category {
    display: inline-block;

    padding: 6px 9px;

    border: 1px solid var(--line-strong);

    background: var(--paper);

    color: var(--ink-soft);

    font-family: 'IBM Plex Mono', monospace;

    font-size: .61rem;

    letter-spacing: .08em;

    text-transform: uppercase;
}


/* ============================================================
   PRICE
   ============================================================ */

.registration-price {
    display: flex;

    align-items: flex-start;

    color: var(--ink);

    line-height: 1;
}


.registration-price .currency {
    margin-top: 7px;

    margin-right: 3px;

    font-family: 'IBM Plex Mono', monospace;

    font-size: 2rem !important;

    color: var(--gold);
}


.registration-price .amount {
    font-family: 'Fraunces', 'Source Serif 4', serif;

    font-size: clamp(3rem, 4vw, 4.2rem) !important;

    font-weight: 500;

    letter-spacing: -.04em;
}


.registration-period {
    margin-top: 7px;

    font-family: 'IBM Plex Mono', monospace;

    font-size: .61rem;

    letter-spacing: .08em;

    text-transform: uppercase;

    color: var(--ink-soft);
}


/* ============================================================
   DIVIDER
   ============================================================ */

.registration-divider {
    width: 100%;

    height: 1px;

    margin: 25px 0 10px;

    background: var(--line-strong);
}


/* ============================================================
   FEATURES
   ============================================================ */

.registration-features {
    list-style: none;

    margin: 0;
    padding: 0;

    flex: 1;
}


.registration-features li {
    display: grid;

    grid-template-columns: 19px 1fr;

    gap: 8px;

    padding: 10px 0;

    border-bottom: 1px solid var(--line);

    color: var(--ink-soft);

    font-family: 'Source Serif 4', Georgia, serif;

    font-size: .86rem;

    line-height: 1.45;
}


.registration-features li:last-child {
    border-bottom: 0;
}


.registration-features i {
    margin-top: 3px;

    color: var(--teal-deep);

    font-size: .62rem;
}


/* ============================================================
   REGISTER BUTTON
   ============================================================ */

.registration-btn {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 10px;

    width: 100%;

    margin-top: 28px;

    padding: 12px 14px;

    border: 1px solid var(--ink);

    border-radius: var(--radius);

    background: transparent;

    color: var(--ink);

    font-family: 'IBM Plex Mono', monospace;

    font-size: 1rem;

    font-weight: 500;

    letter-spacing: .06em;

    text-transform: uppercase;

    text-decoration: none;

    transition:
        background .2s ease,
        color .2s ease,
        border-color .2s ease;
}


.registration-btn span {
    font-size: 1rem;

    transition: transform .2s ease;
}


.registration-btn:hover {
    background: var(--ink);

    border-color: var(--ink);

    color: #fff;
}


.registration-btn:hover span {
    transform: translateX(4px);
}


/* ============================================================
   FEATURED PLAN
   ============================================================ */

.registration-plan-featured {
    background:
        linear-gradient(
            180deg,
            var(--teal-tint) 0%,
            var(--paper-raised) 45%
        );

    border-top: 3px solid var(--teal);
}


.registration-plan-featured:hover {
    background:
        linear-gradient(
            180deg,
            var(--teal-tint) 0%,
            #fff 55%
        );
}


/* Featured category */

.registration-plan-featured .registration-category {
    background: var(--teal);

    border-color: var(--teal);

    color: #fff;
}


/* Featured button */

.registration-plan-featured .registration-btn {
    background: var(--ink);

    border-color: var(--ink);

    color: #fff;
}


.registration-plan-featured .registration-btn:hover {
    background: var(--teal-deep);

    border-color: var(--teal-deep);
}


/* ============================================================
   MOST POPULAR
   ============================================================ */

.registration-popular {
    position: absolute;

    top: 0;
    right: 0;

    padding: 6px 10px;

    background: var(--teal);

    color: #fff;

    font-family: 'IBM Plex Mono', monospace;

    font-size: .55rem;

    letter-spacing: .07em;

    text-transform: uppercase;
}


/* ============================================================
   TABLET
   ============================================================ */

@media (max-width: 1050px) {

    .registration-plans {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .registration-plan {
        min-height: 500px;
    }

}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 700px) {

    .registration-section {
        padding: 60px 0 20px;
    }


    .registration-header {
        flex-direction: column;

        align-items: flex-start;

        gap: 18px;

        margin-bottom: 32px;

        padding-bottom: 22px;
    }


    .registration-header h2 {
        font-size: 2.35rem;
    }


    .registration-header > p {
        font-size: .92rem;
    }


    .registration-plans {
        grid-template-columns: 1fr;
    }


    .registration-plan {
        min-height: auto;

        padding: 24px 20px;
    }


    .registration-price .amount {
        font-size: 3.6rem;
    }

}


/* ============================================================
   SMALL MOBILE
   ============================================================ */

@media (max-width: 480px) {

    .registration-section {
        padding: 50px 0 20px;
    }


    .registration-header h2 {
        font-size: 2.05rem;
    }


    .registration-plan {
        padding: 21px 17px;
    }


    .registration-plan-top {
        margin-bottom: 22px;
    }


    .registration-price .amount {
        font-size: 3.25rem;
    }


    .registration-features li {
        font-size: .84rem;
    }

}


/* ============================================================
   REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

    .registration-plan,
    .registration-btn,
    .registration-btn span {
        transition: none;
    }

}

/* ============================================================
   ACRT 2027 — REGISTRATION / PAYMENT PAGE
   Editorial / Journal Design
   ------------------------------------------------------------
   CSS ONLY
   Functional HTML, PHP, IDs, names and JS remain unchanged.
   ============================================================ */


/* ============================================================
   PAGE
   ============================================================ */

.mxreg-page {
    padding: 70px 0 100px;

    background:
        linear-gradient(
            180deg,
            rgba(237, 228, 247, .28) 0%,
            transparent 260px
        );
}

.mxreg-container {
    width: min(var(--max), calc(100% - 48px));

    margin: 0 auto;
}


/* ============================================================
   INTRO
   ============================================================ */

.mxreg-intro {
    margin-bottom: 42px;

    padding-bottom: 30px;

    border-bottom: 1px solid var(--line-strong);
}

.mxreg-intro::before {
    content: "REGISTRATION";

    display: block;

    margin-bottom: 12px;

    font-family: 'IBM Plex Mono', monospace;

    font-size: .64rem;

    letter-spacing: .12em;

    color: var(--gold);
}

.mxreg-intro h1 {
    margin: 0 0 12px;

    font-family:
        'Fraunces',
        'Source Serif 4',
        Georgia,
        serif;

    font-size: clamp(2.6rem, 6vw, 5rem);

    line-height: .95;

    font-weight: 500;

    font-style: italic;

    letter-spacing: -.035em;

    color: var(--ink);
}

.mxreg-intro > p {
    max-width: 55ch;

    margin: 0;

    color: var(--ink-soft);

    font-family:
        'Source Serif 4',
        Georgia,
        serif;

    font-size: 1rem;

    line-height: 1.65;
}


/* ============================================================
   SELECTED REGISTRATION PLAN
   ============================================================ */

.selected-plan {
    position: relative;

    display: grid;

    grid-template-columns: 52px 1fr auto;

    align-items: center;

    gap: 18px;

    margin-top: 30px;

    padding: 20px 22px;

    background: var(--teal-tint);

    border: 1px solid var(--line-strong);

    border-left: 3px solid var(--teal);
}


/* Icon */

.selected-plan-icon {
    width: 42px;
    height: 42px;

    display: flex;

    align-items: center;
    justify-content: center;

    background: var(--ink);

    color: #fff;

    font-size: .85rem;
}


/* Label */

.selected-plan-label {
    display: block;

    margin-bottom: 5px;

    font-family: 'IBM Plex Mono', monospace;

    font-size: .59rem;

    letter-spacing: .1em;

    text-transform: uppercase;

    color: var(--gold);
}


/* Main */

.selected-plan-main {
    display: flex;

    align-items: center;

    gap: 10px;
}

.selected-plan-main strong {
    font-family:
        'Fraunces',
        'Source Serif 4',
        serif;

    font-size: 1.5rem;

    font-weight: 500;

    color: var(--ink);
}


/* Price */

.selected-plan-price {
    text-align: right;

    padding-left: 25px;

    border-left: 1px solid var(--line-strong);
}

.selected-plan-price small {
    display: block;

    margin-bottom: 4px;

    font-family: 'IBM Plex Mono', monospace;

    font-size: .58rem;

    letter-spacing: .08em;

    text-transform: uppercase;

    color: var(--ink-soft);
}

.selected-plan-price strong {
    font-family:
        'Fraunces',
        'Source Serif 4',
        serif;

    font-size: 2rem;

    font-weight: 500;

    color: var(--ink);
}


/* ============================================================
   FORM
   ============================================================ */

#registrationForm {
    width: 100%;
}


/* ============================================================
   REGISTRATION CARDS
   ============================================================ */

.mxreg-card {
    margin-bottom: 28px;

    background: var(--paper-raised);

    border-top: 1px solid var(--line-strong);

    border-bottom: 1px solid var(--line-strong);

    box-shadow: none;
}


/* Compact cards */

.mxreg-compact-card {
    margin-bottom: 22px;
}


/* ============================================================
   CARD HEADER
   ============================================================ */

.mxreg-card-head {
    display: grid;

    grid-template-columns: 48px 1fr;

    align-items: center;

    gap: 16px;

    padding: 25px 28px;

    border-bottom: 1px solid var(--line);

    background:
        linear-gradient(
            135deg,
            rgba(237, 228, 247, .42),
            rgba(255, 255, 255, .55)
        );
}


/* Icon */

.mxreg-card-icon {
    width: 42px;
    height: 42px;

    display: flex;

    align-items: center;
    justify-content: center;

    background: var(--ink);

    color: #fff;

    font-size: .82rem;
}


/* Heading */

.mxreg-card-head h2 {
    margin: 0;

    font-family: 'Space Grotesk', sans-serif;

    font-size: .88rem;

    font-weight: 600;

    letter-spacing: .04em;

    color: var(--ink);
}


/* Description */

.mxreg-card-head p {
    margin: 5px 0 0;

    color: var(--ink-soft);

    font-family:
        'Source Serif 4',
        Georgia,
        serif;

    font-size: .86rem;

    line-height: 1.5;
}


/* ============================================================
   CARD BODY
   ============================================================ */

.mxreg-body {
    padding: 10px 0px;
}


/* ============================================================
   GRID
   ============================================================ */

.mxreg-grid-2 {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 0px 13px;
}


/* ============================================================
   FIELD
   ============================================================ */

.mxreg-field {
    position: relative;

    min-width: 0;
}

.mxreg-field label {
    display: block;

    margin-bottom: 8px;

    font-family: 'IBM Plex Mono', monospace;

    font-size: .62rem;

    font-weight: 500;

    letter-spacing: .08em;

    text-transform: uppercase;

    color: var(--ink-soft);
}

.mxreg-field label span {
    color: var(--eosin);

    font-weight: 600;
}


/* ============================================================
   INPUTS
   ============================================================ */

.mxreg-control,
.mxreg-field .abstract-input,
#couponCode {
    width: 100%;

    min-height: 48px;

    padding: 10px 13px;

    border: 1px solid var(--line-strong);

    border-radius: var(--radius);

    outline: none;

    background: #fff;

    color: var(--ink);

    font-family:
        'Source Serif 4',
        Georgia,
        serif;

    font-size: .94rem;

    transition:
        border-color .2s ease,
        box-shadow .2s ease,
        background .2s ease;
}


.mxreg-control::placeholder,
#couponCode::placeholder {
    color: #94899e;

    opacity: 1;
}


/* Focus */

.mxreg-control:focus,
.mxreg-field .abstract-input:focus,
#couponCode:focus {
    border-color: var(--teal);

    box-shadow:
        0 0 0 3px rgba(108, 63, 160, .10);

    background: #fff;
}


/* ============================================================
   SELECT
   ============================================================ */

.mxreg-field select {
    cursor: pointer;

    appearance: auto;
}


/* ============================================================
   ERROR
   ============================================================ */

.mxreg-error-text {
    display: block;

    min-height: 16px;

    margin-top: 6px;

    font-family: 'IBM Plex Mono', monospace;

    font-size: .59rem;

    line-height: 1.4;

    color: var(--eosin);
}


/* ============================================================
   ACCOMMODATION
   ============================================================ */

.mxreg-room-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 14px;

    margin-bottom: 26px;
}


/* Room option */

.mxreg-room {
    position: relative;

    display: grid;

    grid-template-columns: 25px 1fr;

    grid-template-rows: auto auto;

    align-items: center;

    column-gap: 10px;

    padding: 18px;

    border: 1px solid var(--line-strong);

    background: var(--paper);

    cursor: pointer;

    transition:
        border-color .2s ease,
        background .2s ease,
        transform .2s ease;
}

.mxreg-room:hover {
    border-color: var(--teal);

    background: var(--teal-tint);

    transform: translateY(-2px);
}


/* Hide native radio */

.mxreg-room input[type="radio"] {
    position: absolute;

    opacity: 0;

    pointer-events: none;
}


/* Radio */

.mxreg-room-radio {
    width: 20px;
    height: 20px;

    grid-row: 1 / span 2;

    border: 1px solid var(--line-strong);

    border-radius: 50%;

    background: #fff;

    position: relative;
}


/* Selected */

.mxreg-room.is-selected {
    border-color: var(--teal);

    background: var(--teal-tint);

    box-shadow:
        inset 0 0 0 1px var(--teal);
}

.mxreg-room.is-selected .mxreg-room-radio {
    border-color: var(--teal);

    background: var(--teal);
}

.mxreg-room.is-selected .mxreg-room-radio::after {
    content: "";

    position: absolute;

    width: 7px;
    height: 7px;

    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);

    border-radius: 50%;

    background: #fff;
}


/* Icon */

.mxreg-room > i {
    margin-bottom: 3px;

    color: var(--gold);

    font-size: .8rem;
}


/* Room title */

.mxreg-room strong {
    grid-column: 2;

    font-family: 'Space Grotesk', sans-serif;

    font-size: .88rem;

    font-weight: 600;

    color: var(--ink);
}


/* Price */

.mxreg-room small {
    grid-column: 2;

    margin-top: 3px;

    font-family: 'IBM Plex Mono', monospace;

    font-size: .59rem;

    color: var(--ink-soft);
}


/* ============================================================
   DATE AREA
   ============================================================ */

.mxreg-date-grid {
    margin-top: 5px;
}

.mxreg-note {
    margin: 18px 0 0;

    color: var(--ink-soft);

    font-family: 'IBM Plex Mono', monospace;

    font-size: .59rem;

    line-height: 1.5;
}


/* ============================================================
   PROMO CODE
   ============================================================ */

.mxreg-promo {
    display: grid;

    grid-template-columns: 1fr auto;

    gap: 10px;

    max-width: 650px;
}

.mxreg-promo input {
    min-width: 0;
}


#btnApplyCoupon {
    min-width: 105px;

    padding: 10px 17px;

    border: 1px solid var(--ink);

    border-radius: var(--radius);

    background: var(--ink);

    color: #fff;

    font-family: 'IBM Plex Mono', monospace;

    font-size: .62rem;

    letter-spacing: .06em;

    text-transform: uppercase;

    cursor: pointer;

    transition:
        background .2s ease,
        border-color .2s ease;
}

#btnApplyCoupon:hover {
    background: var(--teal-deep);

    border-color: var(--teal-deep);
}


/* Coupon message */

.mxreg-coupon-message {
    display: block;

    margin-top: 9px;

    font-family: 'IBM Plex Mono', monospace;

    font-size: .61rem;

    color: var(--teal-deep);
}


/* ============================================================
   PAYMENT CARD
   ============================================================ */

.mxreg-payment-card {
    border-top: 2px solid var(--teal);
}


/* ============================================================
   CART / ORDER SUMMARY
   ============================================================ */

.mxreg-cart {
    margin-bottom: 30px;

    border: 1px solid var(--line-strong);

    background: var(--paper);
}


/* Cart header */

.mxreg-cart-head {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    padding: 20px 22px;

    border-bottom: 1px solid var(--line);
}


.mxreg-cart-kicker {
    display: block;

    margin-bottom: 5px;

    font-family: 'IBM Plex Mono', monospace;

    font-size: .57rem;

    letter-spacing: .1em;

    color: var(--gold);
}


.mxreg-cart-head h3 {
    margin: 0;

    font-family: 'Space Grotesk', sans-serif;

    font-size: .95rem;

    font-weight: 600;

    color: var(--ink);
}


.mxreg-cart-head h3 i {
    margin-right: 7px;

    color: var(--teal-deep);
}


.mxreg-cart-total {
    font-family:
        'Fraunces',
        'Source Serif 4',
        serif;

    font-size: 1.65rem;

    color: var(--ink);
}


/* Cart rows */

.mxreg-cart-items {
    padding: 4px 22px;
}


.mxreg-cart-row {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    min-height: 48px;

    border-bottom: 1px solid var(--line);

    color: var(--ink-soft);

    font-family:
        'Source Serif 4',
        Georgia,
        serif;

    font-size: .9rem;
}


.mxreg-cart-row strong {
    color: var(--ink);

    font-family: 'IBM Plex Mono', monospace;

    font-size: .65rem;
}


/* Final */

.mxreg-cart-final {
    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 18px 22px;

    background: var(--teal-tint);

    color: var(--ink);

    font-family: 'Space Grotesk', sans-serif;

    font-size: .95rem;

    font-weight: 600;
}


.mxreg-cart-final strong {
    font-family:
        'Fraunces',
        'Source Serif 4',
        serif;

    font-size: 1.65rem;

    font-weight: 500;
}


/* ============================================================
   QUANTITY
   ============================================================ */

.mxreg-quantity-control {
    display: inline-flex;

    align-items: center;

    border: 1px solid var(--line-strong);

    background: #fff;
}


.mxreg-qty-btn {
    width: 32px;
    height: 30px;

    display: flex;

    align-items: center;
    justify-content: center;

    border: 0;

    background: transparent;

    color: var(--ink);

    font-size: 1rem;

    cursor: pointer;

    transition:
        background .15s ease,
        color .15s ease;
}


.mxreg-qty-btn:hover {
    background: var(--teal-tint);

    color: var(--teal-deep);
}


#cartQuantity {
    min-width: 35px;

    text-align: center;

    font-family: 'IBM Plex Mono', monospace;

    font-size: .68rem;
}


/* ============================================================
   STRIPE ELEMENTS
   ============================================================ */

.mxreg-stripe-element {
    width: 100%;

    min-height: 48px;

    padding: 14px 13px;

    border: 1px solid var(--line-strong);

    border-radius: var(--radius);

    background: #fff;

    transition:
        border-color .2s ease,
        box-shadow .2s ease;
}


/* Stripe focus is controlled by Stripe internally,
   but this keeps the visual container consistent. */

.mxreg-stripe-element:hover {
    border-color: var(--teal);
}


/* ============================================================
   PAYMENT GRID
   ============================================================ */

.mxreg-payment-fields {
    margin-top: 4px;
}


/* ============================================================
   API ALERT
   ============================================================ */

.mxreg-api-alert {
    position: relative;

    display: grid;

    grid-template-columns: 42px 1fr 30px;

    gap: 14px;

    align-items: start;

    margin: 20px 0;

    padding: 18px;

    border: 1px solid rgba(156, 47, 99, .25);

    border-left: 3px solid var(--eosin);

    background: rgba(156, 47, 99, .05);
}


.mxreg-api-alert-icon {
    width: 38px;
    height: 38px;

    display: flex;

    align-items: center;
    justify-content: center;

    background: rgba(156, 47, 99, .1);

    color: var(--eosin);
}


.mxreg-api-alert-content h4 {
    margin: 0 0 5px;

    font-family: 'Space Grotesk', sans-serif;

    font-size: .9rem;

    font-weight: 600;

    color: var(--ink);
}


.mxreg-api-alert-content p {
    margin: 0;

    color: var(--ink-soft);

    font-family:
        'Source Serif 4',
        Georgia,
        serif;

    font-size: .86rem;

    line-height: 1.5;
}


.mxreg-api-alert-close {
    border: 0;

    background: transparent;

    color: var(--ink-soft);

    cursor: pointer;

    font-size: .8rem;
}

.mxreg-api-alert-close:hover {
    color: var(--eosin);
}


/* ============================================================
   PAY BUTTON
   ============================================================ */

.mxreg-pay-button {
    width: 100%;

    min-height: 52px;

    margin-top: 10px;

    padding: 13px 20px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 9px;

    border: 1px solid var(--ink);

    border-radius: var(--radius);

    background: var(--ink);

    color: #fff;

    font-family: 'IBM Plex Mono', monospace;

    font-size: .68rem;

    font-weight: 500;

    letter-spacing: .07em;

    text-transform: uppercase;

    cursor: pointer;

    transition:
        background .2s ease,
        border-color .2s ease,
        transform .2s ease;
}


.mxreg-pay-button:hover {
    background: var(--teal-deep);

    border-color: var(--teal-deep);

    transform: translateY(-1px);
}


.mxreg-pay-button:disabled {
    opacity: .65;

    cursor: not-allowed;

    transform: none;
}


/* Secure text */

.mxreg-secure-text {
    margin: 12px 0 0;

    text-align: center;

    color: var(--ink-soft);

    font-family: 'IBM Plex Mono', monospace;

    font-size: .58rem;
}


.mxreg-secure-text i {
    color: var(--teal-deep);

    margin-right: 5px;
}


/* ============================================================
   SECURITY
   ============================================================ */

.mxreg-security {
    display: grid;

    grid-template-columns: 45px 1fr;

    align-items: center;

    gap: 15px;

    margin-top: 25px;

    padding: 20px 22px;

    border: 1px solid var(--line-strong);

    border-left: 3px solid var(--gold);

    background: var(--paper);
}


.mxreg-security-icon {
    width: 38px;
    height: 38px;

    display: flex;

    align-items: center;
    justify-content: center;

    background: var(--teal-tint);

    color: var(--teal-deep);

    font-size: .82rem;
}


.mxreg-security h3 {
    margin: 0 0 4px;

    font-family: 'Space Grotesk', sans-serif;

    font-size: .9rem;

    font-weight: 600;

    color: var(--ink);
}


.mxreg-security p {
    margin: 0;

    color: var(--ink-soft);

    font-family:
        'Source Serif 4',
        Georgia,
        serif;

    font-size: .82rem;
}


/* ============================================================
   SUCCESS POPUP
   ============================================================ */

#paymentSuccessPopup {
    position: fixed;

    inset: 0;

    z-index: 9999;

    display: flex;

    align-items: center;
    justify-content: center;

    padding: 20px;

    background: rgba(30, 19, 48, .72);

    backdrop-filter: blur(5px);
}


#paymentSuccessPopup .abstract-success-popup {
    width: min(480px, 100%);

    padding: 38px 34px;

    background: var(--paper-raised);

    border: 1px solid var(--line-strong);

    border-top: 3px solid var(--teal);

    box-shadow:
        0 25px 70px rgba(30, 19, 48, .25);

    text-align: center;
}


#paymentSuccessPopup .success-icon {
    width: 60px;
    height: 60px;

    display: flex;

    align-items: center;
    justify-content: center;

    margin: 0 auto 20px;

    border: 1px solid #D9C6EF;

    border-radius: 50%;

    background: var(--teal-tint);

    color: var(--teal-deep);

    font-size: 1.2rem;
}


#paymentSuccessPopup h3 {
    margin: 0 0 10px;

    font-family:
        'Fraunces',
        'Source Serif 4',
        serif;

    font-size: 1.7rem;

    font-style: italic;

    font-weight: 500;

    color: var(--ink);
}


#paymentSuccessPopup p {
    max-width: 38ch;

    margin: 0 auto 22px;

    color: var(--ink-soft);

    font-family:
        'Source Serif 4',
        Georgia,
        serif;

    font-size: .92rem;

    line-height: 1.6;
}


/* Registration number */

.payment-success-registration {
    display: flex;

    flex-direction: column;

    gap: 5px;

    margin: 20px 0;

    padding: 14px;

    border-top: 1px solid var(--line);

    border-bottom: 1px solid var(--line);

    background: var(--paper);
}


.payment-success-registration span {
    font-family: 'IBM Plex Mono', monospace;

    font-size: .58rem;

    letter-spacing: .08em;

    text-transform: uppercase;

    color: var(--gold);
}


.payment-success-registration strong {
    font-family: 'IBM Plex Mono', monospace;

    font-size: .82rem;

    color: var(--ink);
}


/* Done */

#closePaymentSuccessPopup {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-width: 120px;

    padding: 11px 20px;

    border: 1px solid var(--ink);

    border-radius: var(--radius);

    background: var(--ink);

    color: #fff;

    font-family: 'IBM Plex Mono', monospace;

    font-size: .65rem;

    letter-spacing: .06em;

    text-transform: uppercase;

    cursor: pointer;

    transition:
        background .2s ease,
        transform .2s ease;
}


#closePaymentSuccessPopup:hover {
    background: var(--teal-deep);

    border-color: var(--teal-deep);

    transform: translateY(-1px);
}


/* ============================================================
   TABLET
   ============================================================ */

@media (max-width: 900px) {

    .mxreg-page {
        padding: 55px 0 80px;
    }

    .mxreg-container {
        width: min(100% - 36px, var(--max));
    }

    .selected-plan {
        grid-template-columns: 45px 1fr;

        gap: 14px;
    }

    .selected-plan-price {
        grid-column: 2;

        padding-left: 0;

        padding-top: 12px;

        border-left: 0;

        border-top: 1px solid var(--line);

        text-align: left;
    }

    .mxreg-room-grid {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }

}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 700px) {

    .mxreg-page {
        padding: 45px 0 65px;
    }

    .mxreg-container {
        width: calc(100% - 28px);
    }


    /* Intro */

    .mxreg-intro {
        margin-bottom: 28px;

        padding-bottom: 22px;
    }

    .mxreg-intro h1 {
        font-size: 2.35rem;
    }

    .mxreg-intro > p {
        font-size: .91rem;
    }


    /* Selected plan */

    .selected-plan {
        grid-template-columns: 42px 1fr;

        padding: 17px;

        gap: 12px;
    }

    .selected-plan-icon {
        width: 38px;
        height: 38px;
    }

    .selected-plan-main strong {
        font-size: 1.25rem;
    }

    .selected-plan-price strong {
        font-size: 1.7rem;
    }


    /* Card */

    .mxreg-card {
        margin-bottom: 20px;
    }

    .mxreg-card-head {
        grid-template-columns: 42px 1fr;

        padding: 20px;

        gap: 13px;
    }

    .mxreg-card-icon {
        width: 38px;
        height: 38px;
    }

    .mxreg-body {
        padding: 22px 20px;
    }


    /* Form grid */

    .mxreg-grid-2 {
        grid-template-columns: 1fr;

        gap: 17px;
    }


    /* Accommodation */

    .mxreg-room-grid {
        grid-template-columns: 1fr;

        gap: 10px;
    }

    .mxreg-room {
        padding: 15px;
    }


    /* Promo */

    .mxreg-promo {
        grid-template-columns: 1fr;
    }

    #btnApplyCoupon {
        width: 100%;
    }


    /* Cart */

    .mxreg-cart-head {
        align-items: flex-start;

        flex-direction: column;

        padding: 18px;
    }

    .mxreg-cart-total {
        font-size: 1.45rem;
    }

    .mxreg-cart-items {
        padding: 4px 18px;
    }

    .mxreg-cart-final {
        padding: 17px 18px;
    }


    /* API alert */

    .mxreg-api-alert {
        grid-template-columns: 38px 1fr;

        padding: 15px;
    }

    .mxreg-api-alert-close {
        position: absolute;

        top: 10px;

        right: 10px;
    }


    /* Security */

    .mxreg-security {
        grid-template-columns: 40px 1fr;

        padding: 17px;
    }

}


/* ============================================================
   SMALL MOBILE
   ============================================================ */

@media (max-width: 480px) {

    .mxreg-container {
        width: calc(100% - 22px);
    }

    .mxreg-intro h1 {
        font-size: 2.05rem;
    }

    .selected-plan {
        padding: 15px;
    }

    .selected-plan-price strong {
        font-size: 1.55rem;
    }

    .mxreg-card-head {
        padding: 18px 16px;
    }

    .mxreg-body {
        padding: 20px 16px;
    }

    .mxreg-card-head h2 {
        font-size: .8rem;
    }

    .mxreg-card-head p {
        font-size: .8rem;
    }

    .mxreg-control,
    .mxreg-field .abstract-input,
    #couponCode {
        min-height: 46px;
    }

    .mxreg-cart-row {
        min-height: 45px;

        font-size: .84rem;
    }

    .mxreg-cart-final strong {
        font-size: 1.45rem;
    }

    #paymentSuccessPopup .abstract-success-popup {
        padding: 30px 20px;
    }

}


/* ============================================================
   REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

    .mxreg-room,
    .mxreg-pay-button,
    #btnApplyCoupon,
    #closePaymentSuccessPopup,
    .mxreg-control,
    .mxreg-stripe-element {
        transition: none;
    }

}

/* ============================================================
   ACRT 2027 — REVIEW PROCESS
   Editorial / Journal Design
   ------------------------------------------------------------
   CSS ONLY — Existing HTML & content preserved
   ============================================================ */


/* ============================================================
   MAIN SECTION
   ============================================================ */

.review-process-section {
    padding: 85px 0 100px;

    background:
        linear-gradient(
            180deg,
            rgba(237, 228, 247, .22),
            transparent 280px
        );
}

.review-process-section .container {
    max-width: var(--max);
}


/* ============================================================
   HEADER
   ============================================================ */

.review-process-header {
    margin-bottom: 42px;

    padding-bottom: 28px;

    border-bottom: 1px solid var(--line-strong);
}

.review-process-header::before {
    content: "ABSTRACT REVIEW";

    display: block;

    margin-bottom: 11px;

    font-family: 'IBM Plex Mono', monospace;

    font-size: .64rem;

    letter-spacing: .12em;

    text-transform: uppercase;

    color: var(--gold);
}

.review-process-header h2 {
    margin: 0;

    font-family:
        'Fraunces',
        'Source Serif 4',
        Georgia,
        serif;

    font-size: clamp(2.5rem, 5vw, 4.2rem);

    line-height: .98;

    font-weight: 500;

    font-style: italic;

    letter-spacing: -.03em;

    color: var(--ink);
}


/* ============================================================
   INTRODUCTION
   ============================================================ */

.review-intro-card {
    display: grid;

    grid-template-columns: 58px 1fr;

    gap: 22px;

    margin-bottom: 55px;

    padding: 28px 30px;

    border: 1px solid var(--line-strong);

    border-left: 3px solid var(--teal);

    background: var(--teal-tint);
}


/* Icon */

.review-intro-icon {
    width: 44px;
    height: 44px;

    display: flex;

    align-items: center;
    justify-content: center;

    background: var(--ink);

    color: #fff;

    font-size: .85rem;
}


/* Intro text */

.review-intro-content p {
    /* max-width: 78ch; */

    margin: 0 0 16px;

    color: var(--ink-soft);

    font-family:
        'Source Serif 4',
        Georgia,
        serif;

    font-size: .95rem;

    line-height: 1.72;
    text-align: justify;
}

.review-intro-content p:last-child {
    margin-bottom: 0;
}


/* ============================================================
   COMMON SECTION HEADING
   ============================================================ */

.review-section-heading {
    display: grid;

    grid-template-columns: 48px 1fr;

    align-items: center;

    gap: 16px;

    margin-bottom: 25px;

    padding-bottom: 18px;

    border-bottom: 1px solid var(--line-strong);
}


/* Icon */

.review-section-icon {
    width: 40px;
    height: 40px;

    display: flex;

    align-items: center;
    justify-content: center;

    background: var(--ink);

    color: #fff;

    font-size: .78rem;
}


/* Heading */

.review-section-heading h3 {
    margin: 0;

    max-width: 75ch;

    font-family:
        'Fraunces',
        'Source Serif 4',
        Georgia,
        serif;

    font-size: clamp(1.35rem, 2.5vw, 1.85rem);

    line-height: 1.15;

    font-weight: 500;

    color: var(--ink);
}


/* ============================================================
   PEER REVIEW WORKFLOW
   ============================================================ */

.review-workflow-section {
    margin-bottom: 65px;
}


/* Timeline */

.review-timeline {
    position: relative;

    margin-left: 20px;

    border-left: 1px solid var(--line-strong);
}


/* ============================================================
   REVIEW STEP
   ============================================================ */

.review-step {
       position: relative;
    display: flex;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 25px;
}

.review-step:last-child {
    padding-bottom: 0;
}


/* Number */

.review-step-number {
    position: absolute;

    left: -22px;

    top: 0;

    width: 42px;
    height: 42px;

    display: flex;

    align-items: center;
    justify-content: center;

    border: 1px solid var(--line-strong);

    background: var(--paper-raised);

    color: var(--gold);

    font-family:
        'Fraunces',
        'Source Serif 4',
        serif;

    font-size: .95rem;

    font-style: italic;

    z-index: 2;
}


/* Content */

.review-step-content {
    display: grid;

    grid-template-columns: 42px 1fr;

    gap: 15px;

    padding: 20px 22px;

    border: 1px solid var(--line);

    background: var(--paper-raised);

    transition:
        border-color .2s ease,
        background .2s ease,
        transform .2s ease;
}

.review-step-content:hover {
    border-color: var(--line-strong);

    background: #fff;

    transform: translateX(3px);
}


/* Step icon */

.review-step-icon {
    width: 34px;
    height: 34px;

    display: flex;

    align-items: center;
    justify-content: center;

    background: var(--teal-tint);

    color: var(--teal-deep);

    font-size: .7rem;
}


/* Step paragraph */

.review-step-content p {
    margin: 0;

    color: var(--ink-soft);

    font-family:
        'Source Serif 4',
        Georgia,
        serif;

    font-size: .92rem;

    line-height: 1.68;
}


/* ============================================================
   SCORING CRITERIA
   ============================================================ */

.review-criteria-section {
    margin-top: 10px;
}


/* Grid */

.review-criteria-grid {
    display: grid;

    grid-template-columns:
        repeat(5, minmax(0, 1fr));

    border-top: 1px solid var(--line-strong);

    border-left: 1px solid var(--line-strong);
}


/* Criteria card */

.review-criteria-card {
    position: relative;

    min-height: 245px;

    padding: 23px 20px;

    border-right: 1px solid var(--line-strong);

    border-bottom: 1px solid var(--line-strong);

    background: var(--paper-raised);

    transition:
        background .2s ease,
        transform .2s ease;
}

.review-criteria-card:hover {
    background: var(--teal-tint);

    transform: translateY(-3px);

    z-index: 2;

    box-shadow:
        0 12px 28px rgba(30, 19, 48, .07);
}


/* Number */

.review-criteria-number {
    margin-bottom: 30px;

    font-family:
        'Fraunces',
        'Source Serif 4',
        serif;

    font-size: 1.15rem;

    font-style: italic;

    color: var(--gold);
}


/* Icon */

.review-criteria-icon {
    width: 42px;
    height: 42px;

    display: flex;

    align-items: center;
    justify-content: center;

    margin-bottom: 25px;

    background: var(--ink);

    color: #fff;

    font-size: .78rem;
}


/* Text */

.review-criteria-card p {
    margin: 0;

    color: var(--ink);

    font-family:
        'Source Serif 4',
        Georgia,
        serif;

    font-size: .91rem;

    line-height: 1.55;
}


/* ============================================================
   TABLET
   ============================================================ */

@media (max-width: 1100px) {

    .review-criteria-grid {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }

}


@media (max-width: 900px) {

    .review-process-section {
        padding: 65px 0 80px;
    }

    .review-intro-card {
        padding: 24px;
    }

    .review-criteria-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 700px) {

    .review-process-section {
        padding: 52px 0 65px;
    }


    /* Header */

    .review-process-header {
        margin-bottom: 30px;

        padding-bottom: 22px;
    }

    .review-process-header h2 {
        font-size: 2.35rem;
    }


    /* Intro */

    .review-intro-card {
        grid-template-columns: 1fr;

        gap: 15px;

        margin-bottom: 42px;

        padding: 21px 18px;
    }

    .review-intro-icon {
        width: 40px;
        height: 40px;
    }

    .review-intro-content p {
        font-size: .9rem;
    }


    /* Section headings */

    .review-section-heading {
        grid-template-columns: 42px 1fr;

        gap: 13px;

        margin-bottom: 20px;
    }

    .review-section-icon {
        width: 37px;
        height: 37px;
    }

    .review-section-heading h3 {
        font-size: 1.35rem;
    }


    /* Timeline */

    .review-timeline {
        margin-left: 16px;
    }

    .review-step {
        grid-template-columns: 1fr;

        padding:
            0
            0
            24px
            22px;
    }

    .review-step-number {
        left: -21px;

        width: 38px;
        height: 38px;

        font-size: .85rem;
    }

    .review-step-content {
        grid-template-columns: 38px 1fr;

        gap: 12px;

        padding: 17px;
    }

    .review-step-icon {
        width: 32px;
        height: 32px;
    }

    .review-step-content p {
        font-size: .87rem;
    }


    /* Criteria */

    .review-criteria-grid {
        grid-template-columns: 1fr;
    }

    .review-criteria-card {
        min-height: auto;

        padding: 20px;
    }

    .review-criteria-number {
        margin-bottom: 18px;
    }

    .review-criteria-icon {
        margin-bottom: 18px;
    }

}


/* ============================================================
   SMALL MOBILE
   ============================================================ */

@media (max-width: 480px) {

    .review-process-section {
        padding: 45px 0 55px;
    }

    .review-process-section .container {
        padding-left: 16px;
        padding-right: 16px;
    }

    .review-process-header h2 {
        font-size: 2.05rem;
    }

    .review-intro-card {
        padding: 18px 16px;
    }

    .review-intro-content p {
        font-size: .86rem;

        line-height: 1.65;
    }

    .review-section-heading h3 {
        font-size: 1.22rem;
    }

    .review-step-content {
        padding: 15px;
    }

    .review-step-content p {
        font-size: .84rem;
    }

    .review-criteria-card {
        padding: 18px;
    }

    .review-criteria-card p {
        font-size: .87rem;
    }

}


/* ============================================================
   REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

    .review-step-content,
    .review-criteria-card {
        transition: none;
    }

}

/* ============================================================
   ACRT 2027 — SPEAKER PHOTO CARDS
   Editorial / Journal Style
   ============================================================ */


/* ------------------------------------------------------------
   Speaker top area
   ------------------------------------------------------------ */

.contact-sheet .frame-top {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 58px;
    justify-content: center;
}


/* ------------------------------------------------------------
   Speaker photo
   ------------------------------------------------------------ */

.contact-sheet .speaker-photo {
    width: 200px;
    height: 200px;

    flex: 0 0 200px;

    display: block;

    border-radius: 50%;

    object-fit: cover;
    object-position: center;

    background: var(--teal-tint);

    border: 1px solid var(--line-strong);

    box-shadow:
        0 0 0 4px var(--paper-raised),
        0 0 0 5px var(--line);
}


/* ------------------------------------------------------------
   Status area
   ------------------------------------------------------------ */

.contact-sheet .speaker-status {
    display: flex;
    align-items: center;
}


/* ------------------------------------------------------------
   Confirmed badge
   ------------------------------------------------------------ */

.contact-sheet .tag-confirmed {
    background: var(--teal-tint);

    color: var(--teal-deep);

    border: 1px solid #D9C6EF;

    white-space: nowrap;
}


/* ------------------------------------------------------------
   Speaker name
   ------------------------------------------------------------ */

.contact-sheet .frame-name {
    margin-top: 8px;

    font-family:
        'Space Grotesk',
        'Helvetica Neue',
        Arial,
        sans-serif;

    font-size: 1.12rem;

    line-height: 1.25;

    font-weight: 600;

    color: var(--ink);
}


/* ------------------------------------------------------------
   Affiliation
   ------------------------------------------------------------ */

.contact-sheet .frame-role {
    font-family:
        'IBM Plex Mono',
        ui-monospace,
        monospace;

    font-size: 0.9rem;

    line-height: 1.55;

    color: var(--ink-soft);

    margin-top: 1px;
}


/* ------------------------------------------------------------
   Biography
   ------------------------------------------------------------ */

.contact-sheet .frame-bio {
    font-family:
        'Source Serif 4',
        Georgia,
        serif;

    font-size: .92rem;

    line-height: 1.58;

    color: var(--ink-soft);

    margin-top: 4px;

    margin-bottom: 0;
    /* text-align: justify; */
}


/* ------------------------------------------------------------
   Card hover
   ------------------------------------------------------------ */

.contact-sheet .frame {
    transition:
        background .2s ease,
        transform .2s ease;
}

.contact-sheet .frame:hover {
    background: #fff;

    transform: translateY(-2px);

    position: relative;

    z-index: 2;
}


/* ------------------------------------------------------------
   Photo hover
   ------------------------------------------------------------ */

.contact-sheet .frame:hover .speaker-photo {
    border-color: var(--teal);

    box-shadow:
        0 0 0 4px var(--paper-raised),
        0 0 0 5px var(--teal);
}


/* ============================================================
   TABLET
   ============================================================ */

@media (max-width: 900px) {

    .contact-sheet .speaker-photo {
        width: 200px;
        height: 200px;

        flex-basis: 200px;
    }

}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 560px) {

    .contact-sheet .frame {
        padding: 22px 20px;
    }

    .contact-sheet .frame-top {
        gap: 13px;
    }

    .contact-sheet .speaker-photo {
        width: 200px;
        height: 200px;

        flex-basis: 200px;
    }

    .contact-sheet .frame-name {
        font-size: 1.08rem;
    }

    .contact-sheet .frame-role {
        font-size: .7rem;
    }

    .contact-sheet .frame-bio {
        font-size: .9rem;
    }

}


/* ============================================================
   SMALL MOBILE
   ============================================================ */

@media (max-width: 380px) {

    .contact-sheet .frame {
        padding: 20px 17px;
    }

    .contact-sheet .speaker-photo {
        width: 200px;
        height: 200px;

        flex-basis: 200px;
    }

    .contact-sheet .tag {
        font-size: .58rem;

        padding: 4px 7px;
    }

}
a{
    text-decoration: none !important;
}

/* ============================================================
   JOIN US — FOUR IMAGE ROW
   ============================================================ */

.join-images {
    display: grid;
    grid-template-columns: repeat(4, 1fr);

    gap: 12px;

    margin-top: 30px;

    width: 100%;
}

.join-image {
    position: relative;

    aspect-ratio: 16 / 9;

    overflow: hidden;

    border: 1px solid var(--line-strong);

    background: var(--paper-raised);
}

.join-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform .4s ease,
        filter .4s ease;
}


/* Subtle hover */

.join-image:hover img {
    transform: scale(1.04);
}


/* ============================================================
   TABLET
   ============================================================ */

@media (max-width: 800px) {

    .join-images {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        padding: 10px;
    }

}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 500px) {

    .join-images {
        grid-template-columns: 1fr 1fr;

        gap: 8px;

        margin-top: 24px;
        padding: 10px;
    }

    .join-image {
        aspect-ratio: 4 / 3;
    }

}

p{
    font-size: 0.95rem !important;
    /* text-align: justify; */
}
span{
    font-size: 0.95rem !important;
    text-align: justify;
}

/* ============================================================
   ACRT — COMMITTEE WITH PHOTOS
   Editorial / Journal Layout
   ============================================================ */


/* ------------------------------------------------------------
   Committee row
   ------------------------------------------------------------ */

.committee-row {
    display: grid;

    grid-template-columns:
        minmax(340px, 0.9fr)
        minmax(0, 1.25fr);

    gap: 42px;

    align-items: center;

    padding: 24px 0;

    border-bottom: 1px solid var(--line);
}


/* First row */

.committee-row:first-child {
    border-top: 1px solid var(--line-strong);
}


/* ------------------------------------------------------------
   Left profile area
   ------------------------------------------------------------ */

.committee-profile {
    display: grid;

    grid-template-columns: 155px minmax(0, 1fr);

    gap: 18px;

    align-items: center;

    min-width: 0;
}


/* ------------------------------------------------------------
   Photo
   ------------------------------------------------------------ */

.committee-photo-wrap {
    position: relative;

    width: 155px;
    height: 165px;

    overflow: hidden;

    background: var(--teal-tint);

    border: 1px solid var(--line-strong);
}


/* Small editorial accent */

.committee-photo-wrap::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 28px;
    height: 3px;

    background: var(--gold);

    z-index: 2;
}


.committee-photo {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
    object-position: center top;

    transition: transform .35s ease;
}


.committee-row:hover .committee-photo {
    transform: scale(1.035);
}


/* ------------------------------------------------------------
   Member information
   ------------------------------------------------------------ */

.committee-info {
    min-width: 0;
}


.committee-name {
    margin-bottom: 7px;

    font-family:
        'Space Grotesk',
        'Helvetica Neue',
        Arial,
        sans-serif;

    font-size: 1rem;

    line-height: 1.3;

    font-weight: 600;

    color: var(--ink);
}


.committee-affil {
    max-width: 35ch;

    font-family:
        'IBM Plex Mono',
        ui-monospace,
        monospace;

    font-size: 15px;

    line-height: 1.55;

    color: var(--ink-soft);
}


/* ------------------------------------------------------------
   Biography
   ------------------------------------------------------------ */

.committee-note {
    margin: 0;

    max-width: 65ch;

    font-family:
        'Source Serif 4',
        Georgia,
        serif;

    font-size: .91rem;

    line-height: 1.58;

    color: var(--ink-soft);
}


/* ------------------------------------------------------------
   Subtle row hover
   ------------------------------------------------------------ */

.committee-row {
    transition:
        background .2s ease,
        padding-left .2s ease,
        padding-right .2s ease;
}


.committee-row:hover {
    background: rgba(255, 255, 255, .5);

    padding-left: 10px;
    padding-right: 10px;
}


/* ============================================================
   TABLET
   ============================================================ */

@media (max-width: 950px) {

    .committee-row {
        grid-template-columns:
            minmax(280px, .9fr)
            minmax(0, 1.1fr);

        gap: 28px;

        padding: 22px 0;
    }


    .committee-profile {
        grid-template-columns: 72px minmax(0, 1fr);

        gap: 15px;
    }


    .committee-photo-wrap {
        width: 72px;
        height: 86px;
    }


    .committee-name {
        font-size: .95rem;
    }


    .committee-note {
        font-size: .87rem;
    }

}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 700px) {

    .committee-row {
        grid-template-columns: 1fr;

        gap: 17px;

        padding: 22px 0;
    }


    .committee-profile {
        grid-template-columns: 76px minmax(0, 1fr);

        gap: 15px;
    }


    .committee-photo-wrap {
        width: 76px;
        height: 90px;
    }


    .committee-affil {
        max-width: none;
    }


    .committee-note {
        max-width: none;
    }


    .committee-row:hover {
        padding-left: 0;
        padding-right: 0;
    }

}


/* ============================================================
   SMALL MOBILE
   ============================================================ */

@media (max-width: 420px) {

    .committee-profile {
        grid-template-columns: 68px minmax(0, 1fr);

        gap: 13px;
    }


    .committee-photo-wrap {
        width: 68px;
        height: 82px;
    }


    .committee-name {
        font-size: .9rem;
    }


    .committee-affil {
        font-size: .65rem;
    }


    .committee-note {
        font-size: .84rem;

        line-height: 1.6;
    }

}


/* ============================================================
   REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

    .committee-row,
    .committee-photo {
        transition: none;
    }

}




   
/* ============================================================
   RESPONSIVE TABLE INSIDE CARD
   ============================================================ */

/* Card must allow its children to shrink */
.card {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
}


/* Table stays inside the card */
.card table {
    width: 100% !important;
    max-width: 100% !important;

    table-layout: fixed;

    border-collapse: collapse;

    margin-left: 0;
    margin-right: 0;
}


/* Table cells */
.card table th,
.card table td {
    max-width: 100%;

    overflow-wrap: anywhere;
    word-break: break-word;

    white-space: normal;

    box-sizing: border-box;
}


/* First column — labels */
.card table th:first-child,
.card table td:first-child {
    width: 32%;
}


/* Second column — values */
.card table th:nth-child(2),
.card table td:nth-child(2) {
    width: 68%;
}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 600px) {

    .card table {
        width: 100% !important;

        font-size: .78rem;
    }

    .card table th,
    .card table td {
        padding: 10px 9px !important;

        line-height: 1.45;

        overflow-wrap: anywhere;
        word-break: break-word;

        white-space: normal !important;
    }


    .card table th:first-child,
    .card table td:first-child {
        width: 34%;
    }


    .card table th:nth-child(2),
    .card table td:nth-child(2) {
        width: 66%;
    }

}


/* ============================================================
   VERY SMALL PHONES
   ============================================================ */

@media (max-width: 400px) {

    .card table {
        font-size: .70rem;
    }

    .card table th,
    .card table td {
        padding: 9px 7px !important;
    }


    .card table th:first-child,
    .card table td:first-child {
        width: 34%;
    }


    .card table th:nth-child(2),
    .card table td:nth-child(2) {
        width: 66%;
    }

}

.wrap-1 {
    max-width: 1500px;
    margin: 0 auto;
    padding: 0 28px;
}


/* Project Manager */
.project-manager {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-top: 24px;
    padding: 16px;
    border: 1px solid rgba(80, 35, 35, 0.12);
    background: #faf9fc;
}

.manager-photo {
    width: 200px;
    height: 200px;
    /* flex: 0 0 90px; */
    overflow: hidden;
    border-radius: 4px;
}

.manager-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.manager-info {
    min-width: 0;
}

.manager-label {
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #6c3fa0;
    margin-bottom: 6px;
}

.manager-info h3 {
    margin: 0 0 6px;
    font-size: 18px;
    color: var(--ink);
    font-weight: 600;
}

.manager-info a {
    color: #315fc4;
    text-decoration: none;
    font-size: 14px;
    word-break: break-word;
}

.manager-info a:hover {
    text-decoration: underline;
}

/* Mobile */
@media (max-width: 600px) {
    .project-manager {
        align-items: flex-start;
    }

    .manager-photo {
        width: 75px;
        height: 75px;
        flex-basis: 75px;
    }

    .manager-info h3 {
        font-size: 16px;
    }

    .manager-info a {
        font-size: 13px;
    }
}