/* =========================================================
   ABSTRACT SUBMISSION PAGE
   DANCE SCIENCE 2026
========================================================= */


/* =========================================================
   01 — PAGE
========================================================= */

.submission-page {
    background: var(--ivory);
  }
  
  
  /* =========================================================
     02 — HERO
  ========================================================= */
  
  .submission-hero {
    position: relative;
  
    overflow: hidden;
  
    padding:
      155px
      0
      105px;
  
    background:
      var(--ivory);
  
    border-bottom:
      1px solid var(--warm-gray);
  }
  
  
  .submission-hero__grid {
    position: relative;
  
    z-index: 2;
  
    display: grid;
  
    grid-template-columns:
      minmax(0, 1.3fr)
      minmax(320px, .7fr);
  
    gap:
      clamp(70px, 9vw, 150px);
  
    align-items: end;
  }
  
  
  /* =========================================================
     02.1 — HERO TITLE
  ========================================================= */
  
  .submission-hero h1 {
    max-width: 900px;
  
    margin:
      0
      0
      32px;
  
    font-size:
      clamp(5rem, 8vw, 8.5rem);
  
    line-height: .88;
  
    letter-spacing:
      -.055em;
  }
  
  
  .submission-hero__lead {
    max-width: 700px;
  
    margin-bottom: 36px;
  
    color:
      var(--muted);
  
    font-size: 1rem;
  
    line-height: 1.75;
  }
  
  
  /* =========================================================
     02.2 — HERO ASIDE
  ========================================================= */
  
  .submission-hero__aside {
    padding-left: 42px;
  
    border-left:
      1px solid var(--warm-gray);
  }
  
  
  /* =========================================================
     02.3 — DEADLINE
  ========================================================= */
  
  .submission-deadline {
    margin-bottom: 42px;
  }
  
  
  .submission-deadline > span {
    display: block;
  
    max-width: 250px;
  
    margin-bottom: 19px;
  
    color:
      var(--terracotta);
  
    font-size: .62rem;
  
    font-weight: 700;
  
    letter-spacing: .14em;
  
    line-height: 1.5;
  }
  
  
  .submission-deadline strong {
    display: block;
  
    font-family:
      var(--font-display);
  
    font-size:
      clamp(3.3rem, 5vw, 5rem);
  
    font-weight: 400;
  
    line-height: .88;
  }
  
  
  /* =========================================================
     02.4 — HERO QUICK FACTS
  ========================================================= */
  
  .submission-hero__quick {
    border-top:
      1px solid var(--warm-gray);
  }
  
  
  .submission-hero__quick > div {
    padding:
      16px
      0;
  
    border-bottom:
      1px solid var(--warm-gray);
  }
  
  
  .submission-hero__quick span {
    display: block;
  
    margin-bottom: 4px;
  
    color:
      var(--muted);
  
    font-size: .59rem;
  
    font-weight: 700;
  
    letter-spacing: .1em;
  }
  
  
  .submission-hero__quick strong {
    font-family:
      var(--font-display);
  
    font-size: 1.15rem;
  
    font-weight: 400;
  }
  
  
  /* =========================================================
     02.5 — HERO CURVE
  ========================================================= */
  
  .submission-hero__curve {
    position: absolute;
  
    z-index: 1;
  
    inset:
      78px
      0
      auto;
  
    width: 100%;
    height: 100%;
  
    pointer-events: none;
  }
  
  
  .submission-hero__curve path {
    fill: none;
  
    stroke:
      var(--terracotta);
  
    stroke-width: 2;
  
    vector-effect:
      non-scaling-stroke;
  
    stroke-linecap:
      round;
  
    opacity: .32;
  }
  
  
  /* =========================================================
     03 — SHARED SUBMISSION HEADING
  ========================================================= */
  
  .submission-section-heading {
    display: grid;
  
    grid-template-columns:
      minmax(0, 1.25fr)
      minmax(280px, .75fr);
  
    gap:
      clamp(60px, 9vw, 130px);
  
    align-items: end;
  
    margin-bottom: 55px;
  }
  
  
  .submission-section-heading h2 {
    max-width: 760px;
  
    margin: 0;
  
    font-size:
      clamp(3.2rem, 5vw, 5.4rem);
  }
  
  
  .submission-section-heading > p {
    max-width: 470px;
  
    margin: 0;
  
    color:
      var(--muted);
  
    line-height: 1.7;
  }
  
  
  .submission-section-heading--light > p {
    color:
      rgba(246,242,235,.66);
  }
  
  
  /* =========================================================
     04 — FILE SPECIFICATIONS
  ========================================================= */
  
  .submission-specs {
    padding:
      clamp(90px, 9vw, 135px)
      0;
  
    background:
      var(--stone);
  }
  
  
  .submission-spec-grid {
    display: grid;
  
    grid-template-columns:
      repeat(4, minmax(0,1fr));
  
    border-top:
      1px solid var(--warm-gray);
  
    border-left:
      1px solid var(--warm-gray);
  }
  
  
  .submission-spec {
    position: relative;
  
    min-height: 300px;
  
    padding:
      27px
      28px
      30px;
  
    overflow: hidden;
  
    border-right:
      1px solid var(--warm-gray);
  
    border-bottom:
      1px solid var(--warm-gray);
  
    transition:
      color 280ms ease,
      background 280ms ease;
  }
  
  
  .submission-spec__number {
    display: block;
  
    margin-bottom: 38px;
  
    color:
      var(--terracotta);
  
    font-family:
      var(--font-display);
  
    font-size: 1.8rem;
  }
  
  
  .submission-spec__label {
    display: block;
  
    margin-bottom: 20px;
  
    color:
      var(--muted);
  
    font-size: .61rem;
  
    font-weight: 700;
  
    letter-spacing: .13em;
  }
  
  
  .submission-spec > strong {
    display: block;
  
    margin-bottom: 16px;
  
    font-family:
      var(--font-display);
  
    font-size:
      clamp(3.4rem, 5vw, 5.3rem);
  
    font-weight: 400;
  
    line-height: .9;
  }
  
  
  .submission-spec p {
    margin: 0;
  
    color:
      var(--muted);
  
    font-size: .78rem;
  
    line-height: 1.5;
  }
  
  
  /* Hover */
  
  .submission-spec:hover {
    color:
      var(--ivory);
  
    background:
      var(--terracotta);
  }
  
  
  .submission-spec:hover
  .submission-spec__number,
  .submission-spec:hover
  .submission-spec__label,
  .submission-spec:hover p {
    color:
      var(--ivory);
  }
  
  
  /* =========================================================
     05 — ABSTRACT STRUCTURE
  ========================================================= */
  
  .submission-structure {
    position: relative;
  
    overflow: hidden;
  
    padding:
      clamp(95px, 9vw, 140px)
      0;
  
    color:
      var(--ivory);
  
    background:
      var(--charcoal);
  }
  
  
  .submission-structure__flow {
    display: grid;
  
    grid-template-columns:
      repeat(5,minmax(0,1fr));
  
    border-top:
      1px solid rgba(255,255,255,.22);
  
    border-left:
      1px solid rgba(255,255,255,.22);
  }
  
  
  .submission-structure__flow article {
    min-height: 220px;
  
    padding:
      27px
      24px;
  
    border-right:
      1px solid rgba(255,255,255,.22);
  
    border-bottom:
      1px solid rgba(255,255,255,.22);
  }
  
  
  .submission-structure__flow span {
    display: block;
  
    margin-bottom: 55px;
  
    color:
      var(--terracotta);
  
    font-family:
      var(--font-display);
  
    font-size: 2rem;
  }
  
  
  .submission-structure__flow h3 {
    margin: 0;
  
    font-size:
      clamp(1.65rem,2.2vw,2.2rem);
  }
  
  
  /* =========================================================
     06 — SUBMISSION RULES
  ========================================================= */
  
  .submission-rules {
    padding:
      clamp(95px, 10vw, 150px)
      0;
  }
  
  
  .submission-rules__grid {
    display: grid;
  
    grid-template-columns:
      minmax(300px,.65fr)
      minmax(0,1.35fr);
  
    gap:
      clamp(80px,10vw,160px);
  
    align-items: start;
  }
  
  
  /* Sticky title */
  
  .submission-rules__heading {
    position: sticky;
  
    top: 110px;
  }
  
  
  .submission-rules__heading h2 {
    margin-bottom: 30px;
  
    font-size:
      clamp(3.3rem,5vw,5.4rem);
  }
  
  
  .submission-rules__heading > p:last-child {
    max-width: 390px;
  
    color:
      var(--muted);
  
    line-height: 1.7;
  }
  
  
  /* =========================================================
     06.1 — RULE LIST
  ========================================================= */
  
  .submission-rule-list {
    border-top:
      1px solid var(--charcoal);
  }
  
  
  .submission-rule {
    display: grid;
  
    grid-template-columns:
      65px
      minmax(0,1fr);
  
    gap: 25px;
  
    padding:
      30px
      0;
  
    border-bottom:
      1px solid var(--warm-gray);
  }
  
  
  .submission-rule > span {
    color:
      var(--terracotta);
  
    font-family:
      var(--font-display);
  
    font-size: 1.6rem;
  }
  
  
  .submission-rule h3 {
    margin-bottom: 10px;
  
    font-size:
      clamp(1.5rem,2vw,2rem);
  }
  
  
  .submission-rule p {
    max-width: 700px;
  
    margin: 0;
  
    color:
      var(--muted);
  
    font-size: .88rem;
  
    line-height: 1.75;
  }
  
  
  /* =========================================================
     07 — PRESENTATION TYPES
  ========================================================= */
  
  .submission-presentations {
    padding:
      clamp(95px,9vw,140px)
      0;
  
    background:
      var(--stone);
  }
  
  
  .presentation-grid {
    display: grid;
  
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  
    border-top:
      1px solid var(--warm-gray);
  
    border-left:
      1px solid var(--warm-gray);
  }
  
  
  .presentation-card {
    min-height: 510px;
  
    padding:
      clamp(32px,4vw,55px);
  
    border-right:
      1px solid var(--warm-gray);
  
    border-bottom:
      1px solid var(--warm-gray);
  }
  
  
  .presentation-card__top {
    display: flex;
  
    justify-content: space-between;
  
    gap: 30px;
  
    margin-bottom: 65px;
  }
  
  
  .presentation-card__index {
    color:
      var(--terracotta);
  
    font-family:
      var(--font-display);
  
    font-size: 1.8rem;
  }
  
  
  .presentation-card__main {
    display: flex;
  
    align-items: flex-end;
  
    gap: 22px;
  
    margin-bottom: 45px;
  }
  
  
  .presentation-card__main > strong {
    font-family:
      var(--font-display);
  
    font-size:
      clamp(5.5rem,9vw,9rem);
  
    font-weight: 400;
  
    line-height: .72;
  
    letter-spacing: -.05em;
  }
  
  
  .presentation-card__main > span {
    padding-bottom: 4px;
  
    color:
      var(--muted);
  
    font-size: .75rem;
  
    line-height: 1.45;
  }
  
  
  .presentation-card__breakdown {
    display: grid;
  
    grid-template-columns:
      repeat(2,1fr);
  
    margin-bottom: 35px;
  
    border-top:
      1px solid var(--warm-gray);
  
    border-bottom:
      1px solid var(--warm-gray);
  }
  
  
  .presentation-card__breakdown div {
    padding:
      20px
      0;
  }
  
  
  .presentation-card__breakdown div + div {
    padding-left: 25px;
  
    border-left:
      1px solid var(--warm-gray);
  }
  
  
  .presentation-card__breakdown strong {
    display: block;
  
    font-family:
      var(--font-display);
  
    font-size: 2rem;
  
    font-weight: 400;
  }
  
  
  .presentation-card__breakdown span {
    color:
      var(--muted);
  
    font-size: .68rem;
  }
  
  
  .presentation-card > p {
    max-width: 510px;
  
    margin: 0;
  
    color:
      var(--muted);
  
    line-height: 1.7;
  }
  
  
  .presentation-note {
    max-width: 820px;
  
    margin:
      35px
      0
      0;
  
    padding-left: 20px;
  
    color:
      var(--muted);
  
    border-left:
      2px solid var(--terracotta);
  
    font-size: .8rem;
  
    line-height: 1.65;
  }
  
  
  /* =========================================================
     08 — ACCEPTANCE
  ========================================================= */
  
  .submission-acceptance {
    position: relative;
  
    overflow: hidden;
  
    padding:
      clamp(90px,9vw,135px)
      0;
  
    color:
      var(--ivory);
  
    background:
      var(--charcoal);
  }
  
  
  .submission-acceptance__grid {
    position: relative;
  
    z-index: 2;
  
    display: grid;
  
    grid-template-columns:
      minmax(0,1fr)
      minmax(300px,.8fr);
  
    gap:
      clamp(80px,10vw,160px);
  
    align-items: start;
  }
  
  
  .submission-acceptance h2 {
    margin: 0;
  
    font-size:
      clamp(3.5rem,5.5vw,5.7rem);
  }
  
  
  .submission-acceptance__content p {
    color:
      rgba(246,242,235,.72);
  
    line-height: 1.75;
  }
  
  
  .submission-contact {
    margin-top: 38px;
  
    padding:
      24px
      0;
  
    border-top:
      1px solid rgba(255,255,255,.25);
  
    border-bottom:
      1px solid rgba(255,255,255,.25);
  }
  
  
  .submission-contact span {
    display: block;
  
    margin-bottom: 9px;
  
    color:
      var(--terracotta);
  
    font-size: .6rem;
  
    font-weight: 700;
  
    letter-spacing: .13em;
  }
  
  
  .submission-contact strong {
    font-family:
      var(--font-display);
  
    font-size:
      1.35rem;
  
    font-weight: 400;
  
    line-height: 1.4;
  }
  
  
  .submission-acceptance__curve {
    position: absolute;
  
    width: 760px;
    height: 280px;
  
    right: -270px;
    bottom: -175px;
  
    border:
      3px solid var(--terracotta);
  
    border-color:
      var(--terracotta)
      transparent
      transparent
      transparent;
  
    border-radius:
      50%;
  
    transform:
      rotate(-12deg);
  
    opacity: .65;
  }
  
  
  /* =========================================================
     09 — ONLINE SUBMISSION
  ========================================================= */
  
  .online-submission {
    position: relative;
  
    overflow: hidden;
  
    padding:
      clamp(100px,10vw,150px)
      0;
  
    background:
      var(--ivory);
  }
  
  
  .online-submission__grid {
    position: relative;
  
    z-index: 2;
  
    display: grid;
  
    grid-template-columns:
      minmax(0,1.15fr)
      minmax(320px,.85fr);
  
    gap:
      clamp(80px,10vw,150px);
  
    align-items: center;
  }
  
  
  .online-submission h2 {
    margin: 0;
  
    font-size:
      clamp(4rem,6.5vw,7rem);
  
    line-height: .9;
  }
  
  
  .online-submission__content {
    padding-top: 32px;
  
    border-top:
      1px solid var(--charcoal);
  }
  
  
  .online-submission__content > p {
    margin-bottom: 32px;
  
    color:
      var(--muted);
  
    line-height: 1.75;
  }
  
  
  .online-submission__button {
    min-width: 280px;
  }
  
  
  .online-submission__button[aria-disabled="true"] {
    opacity: .55;
  
    cursor: default;
  
    pointer-events: none;
  }
  
  
  .online-submission__content small {
    display: block;
  
    max-width: 420px;
  
    margin-top: 15px;
  
    color:
      var(--muted);
  
    font-size: .65rem;
  }
  
  
  .online-submission__line {
    position: absolute;
  
    z-index: 1;
  
    inset:
      0
      0
      auto;
  
    width: 100%;
    height: 100%;
  
    pointer-events: none;
  }
  
  
  .online-submission__line path {
    fill: none;
  
    stroke:
      var(--terracotta);
  
    stroke-width: 2;
  
    vector-effect:
      non-scaling-stroke;
  
    opacity: .22;
  }
  
  
  /* =========================================================
     10 — TABLET
  ========================================================= */
  
  @media (max-width: 1000px) {
  
    .submission-spec-grid {
      grid-template-columns:
        repeat(2,1fr);
    }
  
  
    .submission-structure__flow {
      grid-template-columns:
        repeat(3,1fr);
    }
  
  
    .submission-rules__grid {
      grid-template-columns:
        .55fr
        1fr;
  
      gap: 60px;
    }
  
  }
  
  
  /* =========================================================
     11 — MOBILE
  ========================================================= */
  
  @media (max-width: 760px) {
  
    .submission-hero {
      padding:
        120px
        0
        70px;
    }
  
  
    .submission-hero__grid,
    .submission-section-heading,
    .submission-rules__grid,
    .submission-acceptance__grid,
    .online-submission__grid {
      grid-template-columns:
        1fr;
    }
  
  
    .submission-hero h1 {
      font-size:
        clamp(4rem,18vw,6rem);
    }
  
  
    .submission-hero__aside {
      padding:
        35px
        0
        0;
  
      border-left: 0;
  
      border-top:
        1px solid var(--warm-gray);
    }
  
  
    .submission-spec-grid {
      grid-template-columns:
        1fr;
    }
  
  
    .submission-spec {
      min-height: 230px;
    }
  
  
    .submission-structure__flow {
      grid-template-columns:
        1fr;
    }
  
  
    .submission-structure__flow article {
      min-height: 150px;
    }
  
  
    .submission-structure__flow span {
      margin-bottom: 30px;
    }
  
  
    .submission-rules__heading {
      position: static;
  
      margin-bottom: 20px;
    }
  
  
    .submission-rule {
      grid-template-columns:
        45px
        1fr;
    }
  
  
    .presentation-grid {
      grid-template-columns:
        1fr;
    }
  
  
    .presentation-card {
      min-height: auto;
    }
  
  
    .submission-acceptance__grid,
    .online-submission__grid {
      gap: 50px;
    }
  
  
    .online-submission__button {
      width: 100%;
  
      min-width: 0;
    }
  
  }
  
  
  /* =========================================================
     12 — SMALL MOBILE
  ========================================================= */
  
  @media (max-width: 480px) {
  
    .presentation-card__main {
      align-items: flex-start;
  
      flex-direction: column;
    }
  
  
    .presentation-card__main > strong {
      font-size: 5.3rem;
    }
  
  
    .presentation-card__breakdown {
      grid-template-columns:
        1fr;
    }
  
  
    .presentation-card__breakdown div + div {
      padding:
        20px
        0;
  
      border-left: 0;
  
      border-top:
        1px solid var(--warm-gray);
    }
  
  }