/* =========================================================
   INNER PAGE — SCIENTIFIC COMMITTEE

   Dedicated inner-page system for the Scientific Committee.

   Uses the same:
   - ivory / stone / charcoal / terracotta palette
   - Didot display typography
   - editorial grids
   - curved conference identity
========================================================= */


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

.committee-page {
    background: var(--ivory);
  }
  
  
  /* =========================================================
     02 — INNER PAGE HERO
  ========================================================= */
  
  .committee-hero {
    position: relative;
  
    overflow: hidden;
  
    padding:
      160px
      0
      100px;
  
    background:
      var(--ivory);
  
    border-bottom:
      1px solid var(--warm-gray);
  }
  
  
  /* =========================================================
     02.1 — HERO GRID
  ========================================================= */
  
  .committee-hero__grid {
    position: relative;
  
    z-index: 2;
  
    display: grid;
  
    grid-template-columns:
      minmax(0, 1.35fr)
      minmax(300px, .65fr);
  
    gap:
      clamp(70px, 9vw, 150px);
  
    align-items: end;
  }
  
  
  /* =========================================================
     02.2 — BREADCRUMB
  ========================================================= */
  
  .inner-breadcrumb {
    display: flex;
  
    align-items: center;
  
    flex-wrap: wrap;
  
    gap: 9px;
  
    margin-bottom: 48px;
  
    color: var(--muted);
  
    font-size: .67rem;
  
    letter-spacing: .03em;
  }
  
  
  .inner-breadcrumb a {
    transition:
      color 220ms ease;
  }
  
  
  .inner-breadcrumb a:hover {
    color:
      var(--terracotta);
  }
  
  
  .inner-breadcrumb > span:first-of-type {
    color:
      var(--terracotta);
  }
  
  
  /* =========================================================
     02.3 — HERO TITLE
  ========================================================= */
  
  .committee-hero h1 {
    max-width: 900px;
  
    margin:
      0
      0
      34px;
  
    font-size:
      clamp(4.8rem, 8vw, 8.5rem);
  
    line-height:
      .88;
  
    letter-spacing:
      -.055em;
  }
  
  
  /* =========================================================
     02.4 — HERO LEAD
  ========================================================= */
  
  .committee-hero__lead {
    max-width: 680px;
  
    margin: 0;
  
    color:
      var(--muted);
  
    font-size: 1rem;
  
    line-height: 1.75;
  }
  
  
  /* =========================================================
     02.5 — RIGHT SIDE
  ========================================================= */
  
  .committee-hero__aside {
    position: relative;
  
    padding-left: 42px;
  
    border-left:
      1px solid var(--warm-gray);
  }
  
  
  /* =========================================================
     02.6 — 19 MEMBERS NUMBER
  ========================================================= */
  
  .committee-hero__number {
    display: flex;
  
    align-items: flex-end;
  
    gap: 16px;
  
    margin-bottom: 44px;
  }
  
  
  .committee-hero__number strong {
    color:
      var(--terracotta);
  
    font-family:
      var(--font-display);
  
    font-size:
      clamp(7rem, 11vw, 11rem);
  
    font-weight: 400;
  
    line-height:
      .68;
  
    letter-spacing:
      -.06em;
  }
  
  
  .committee-hero__number span {
    padding-bottom: 5px;
  
    font-size: .65rem;
  
    font-weight: 700;
  
    letter-spacing: .16em;
  }
  
  
  /* =========================================================
     02.7 — CONFERENCE META
  ========================================================= */
  
  .committee-hero__meta {
    border-top:
      1px solid var(--warm-gray);
  }
  
  
  .committee-hero__meta > div {
    padding:
      17px
      0;
  
    border-bottom:
      1px solid var(--warm-gray);
  }
  
  
  .committee-hero__meta span {
    display: block;
  
    margin-bottom: 4px;
  
    color:
      var(--terracotta);
  
    font-size: .6rem;
  
    font-weight: 700;
  
    letter-spacing: .12em;
  }
  
  
  .committee-hero__meta strong {
    font-family:
      var(--font-display);
  
    font-size: 1rem;
  
    font-weight: 400;
  
    line-height: 1.4;
  }
  
  
  /* =========================================================
     02.8 — HERO CURVE
  ========================================================= */
  
  .committee-hero__curve {
    position: absolute;
  
    z-index: 1;
  
    inset:
      78px
      0
      auto;
  
    width: 100%;
    height: 100%;
  
    pointer-events: none;
  }
  
  
  .committee-hero__curve path {
    fill: none;
  
    stroke:
      var(--terracotta);
  
    stroke-width: 2;
  
    vector-effect:
      non-scaling-stroke;
  
    stroke-linecap:
      round;
  
    opacity: .35;
  }
  
  
  /* =========================================================
     03 — INTRODUCTION
  ========================================================= */
  
  .committee-intro {
    padding:
      clamp(85px, 9vw, 135px)
      0;
  
    background:
      var(--stone);
  
    border-bottom:
      1px solid var(--warm-gray);
  }
  
  
  .committee-intro__grid {
    display: grid;
  
    grid-template-columns:
      minmax(0, 1fr)
      minmax(0, .8fr);
  
    gap:
      clamp(70px, 10vw, 160px);
  
    align-items: start;
  }
  
  
  .committee-intro h2 {
    max-width: 720px;
  
    margin-bottom: 0;
  
    font-size:
      clamp(3.2rem, 5.2vw, 5.5rem);
  }
  
  
  .committee-intro__copy {
    padding-top: 38px;
  
    border-top:
      1px solid var(--charcoal);
  }
  
  
  .committee-intro__copy p {
    color:
      var(--muted);
  
    line-height: 1.75;
  }
  
  
  .committee-intro__copy p:last-child {
    margin-bottom: 0;
  }
  
  
  /* =========================================================
     04 — MEMBERS SECTION
  ========================================================= */
  
  .committee-members {
    padding:
      clamp(90px, 10vw, 145px)
      0;
  
    background:
      var(--ivory);
  }
  
  
  /* =========================================================
     04.1 — MEMBERS HEADER
  ========================================================= */
  
  .committee-members__header {
    display: grid;
  
    grid-template-columns:
      1.3fr
      .7fr;
  
    gap: 80px;
  
    align-items: end;
  
    margin-bottom: 60px;
  }
  
  
  .committee-members__header h2 {
    margin: 0;
  
    font-size:
      clamp(3rem, 5vw, 5rem);
  }
  
  
  .committee-members__header > p {
    max-width: 400px;
  
    margin: 0;
  
    justify-self: end;
  
    color:
      var(--muted);
  
    font-size: .85rem;
  
    line-height: 1.7;
  }
  
  
  /* =========================================================
     04.2 — MEMBERS GRID
  ========================================================= */
  
  .committee-list {
    display: grid;
  
    grid-template-columns:
      repeat(3, minmax(0, 1fr));
  
    border-top:
      1px solid var(--warm-gray);
  
    border-left:
      1px solid var(--warm-gray);
  }
  
  
  /* =========================================================
     04.3 — INDIVIDUAL MEMBER
  ========================================================= */
  
  .committee-member {
    position: relative;
  
    min-height: 190px;
  
    display: flex;
  
    flex-direction: column;
  
    justify-content: space-between;
  
    padding:
      26px
      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;
  }
  
  
  /* Curved terracotta hover shape */
  .committee-member::before {
    content: "";
  
    position: absolute;
  
    width: 130%;
    height: 115%;
  
    left: -15%;
    bottom: -120%;
  
    background:
      var(--terracotta);
  
    border-radius:
      50%
      50%
      0
      0
      /
      80%
      80%
      0
      0;
  
    transform:
      rotate(-4deg);
  
    transition:
      bottom 420ms cubic-bezier(.22,.72,.28,1);
  
    pointer-events: none;
  }
  
  
  /* =========================================================
     04.4 — NUMBER
  ========================================================= */
  
  .committee-member__number {
    position: relative;
  
    z-index: 2;
  
    color:
      var(--terracotta);
  
    font-family:
      var(--font-display);
  
    font-size: 2.2rem;
  
    line-height: 1;
  
    transition:
      color 260ms ease;
  }
  
  
  /* =========================================================
     04.5 — MEMBER INFORMATION
  ========================================================= */
  
  .committee-member__content {
    position: relative;
  
    z-index: 2;
  }
  
  
  .committee-member h3 {
    max-width: 330px;
  
    margin:
      0
      0
      8px;
  
    font-size:
      clamp(1.55rem, 2vw, 2rem);
  
    line-height: 1.05;
  }
  
  
  .committee-member__content > span {
    color:
      var(--muted);
  
    font-size: .66rem;
  
    transition:
      color 260ms ease;
  }
  
  
  /* =========================================================
     04.6 — MEMBER HOVER
  ========================================================= */
  
  .committee-member:hover {
    color:
      var(--ivory);
  }
  
  
  .committee-member:hover::before {
    bottom: -14%;
  }
  
  
  .committee-member:hover
  .committee-member__number {
    color:
      var(--ivory);
  }
  
  
  .committee-member:hover
  .committee-member__content > span {
    color:
      rgba(246,242,235,.75);
  }
  
  
  /* =========================================================
     05 — NEXT COMMITTEE
  ========================================================= */
  
  .committee-next {
    position: relative;
  
    overflow: hidden;
  
    padding:
      clamp(85px, 8vw, 120px)
      0;
  
    color:
      var(--ivory);
  
    background:
      var(--charcoal);
  }
  
  
  /* =========================================================
     05.1 — NEXT GRID
  ========================================================= */
  
  .committee-next__grid {
    position: relative;
  
    z-index: 2;
  
    display: grid;
  
    grid-template-columns:
      minmax(0, 1.2fr)
      minmax(320px, .8fr);
  
    gap:
      clamp(70px, 9vw, 150px);
  
    align-items: end;
  }
  
  
  .committee-next h2 {
    max-width: 760px;
  
    margin-bottom: 0;
  
    font-size:
      clamp(3rem, 5vw, 5.5rem);
  }
  
  
  /* =========================================================
     05.2 — NEXT ACTION
  ========================================================= */
  
  .committee-next__action {
    max-width: 480px;
  }
  
  
  .committee-next__action p {
    margin-bottom: 30px;
  
    color:
      rgba(246,242,235,.72);
  
    line-height: 1.7;
  }
  
  
  /* =========================================================
     05.3 — NEXT CURVE
  ========================================================= */
  
  .committee-next__curve {
    position: absolute;
  
    width: 800px;
    height: 290px;
  
    right: -250px;
    bottom: -190px;
  
    border:
      3px solid var(--terracotta);
  
    border-color:
      var(--terracotta)
      transparent
      transparent
      transparent;
  
    border-radius:
      50%;
  
    transform:
      rotate(-12deg);
  
    opacity: .85;
  
    pointer-events: none;
  }
  
  
  /* =========================================================
     06 — TABLET
  ========================================================= */
  
  @media (max-width: 1000px) {
  
    .committee-hero__grid {
      grid-template-columns:
        1fr
        .5fr;
  
      gap: 55px;
    }
  
  
    .committee-hero h1 {
      font-size:
        clamp(4.5rem, 8vw, 6.5rem);
    }
  
  
    .committee-list {
      grid-template-columns:
        repeat(2, minmax(0,1fr));
    }
  
  
    .committee-next__grid {
      grid-template-columns:
        1fr
        .75fr;
  
      gap: 60px;
    }
  
  }
  
  
  /* =========================================================
     07 — MOBILE
  ========================================================= */
  
  @media (max-width: 760px) {
  
    .committee-hero {
      padding:
        120px
        0
        70px;
    }
  
  
    .committee-hero__grid {
      grid-template-columns:
        1fr;
  
      gap: 55px;
    }
  
  
    .inner-breadcrumb {
      margin-bottom: 38px;
    }
  
  
    .committee-hero h1 {
      font-size:
        clamp(4rem, 18vw, 6rem);
    }
  
  
    .committee-hero__aside {
      padding:
        32px
        0
        0;
  
      border-left: 0;
  
      border-top:
        1px solid var(--warm-gray);
    }
  
  
    .committee-hero__number strong {
      font-size:
        8rem;
    }
  
  
    .committee-intro__grid {
      grid-template-columns:
        1fr;
  
      gap: 45px;
    }
  
  
    .committee-intro__copy {
      padding-top: 28px;
    }
  
  
    .committee-members__header {
      grid-template-columns:
        1fr;
  
      gap: 28px;
  
      margin-bottom: 42px;
    }
  
  
    .committee-members__header > p {
      justify-self: start;
    }
  
  
    .committee-list {
      grid-template-columns:
        1fr;
    }
  
  
    .committee-member {
      min-height: 165px;
    }
  
  
    .committee-next__grid {
      grid-template-columns:
        1fr;
  
      gap: 40px;
    }
  
  
    .committee-next__action {
      max-width: none;
    }
  
  }