/* Public page only: banner, programme, register, membership, office, footer. */
/* ---------- event banner ---------- */
.banner{position:relative;overflow:hidden;border-bottom:1px solid var(--border)}
.banner::before{content:"";position:absolute;inset:0;background:var(--grad-soft);pointer-events:none}
.banner-in{position:relative;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(26px,4vw,56px);align-items:center;padding:clamp(30px,4vw,58px) 0}
.banner-kicker{display:flex;align-items:center;gap:11px;color:var(--muted);font-size:var(--t1);font-weight:600}
.banner-kicker img{width:34px;height:34px;border-radius:50%;flex:none;background:#000}
.banner h1{margin:16px 0 0;font-size:clamp(2rem,1.4rem + 3vw,3.6rem)}
.banner-sub{margin-top:12px;color:var(--muted);font-size:var(--t4);font-weight:600}
.banner-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin:26px 0 0;padding:0;list-style:none}
.banner-fact{display:flex;gap:11px;align-items:flex-start;padding:13px 15px;border-radius:var(--radius);
  background:var(--surface);border:1px solid var(--border)}
.banner-fact svg{width:18px;height:18px;flex:none;margin-top:3px;color:var(--primary)}
.banner-fact b{display:block;color:var(--ink-strong);font-size:var(--t2);font-weight:700;line-height:1.3}
.banner-fact i{display:block;color:var(--muted);font-size:var(--t1);font-style:normal;line-height:1.35}
.banner-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.banner-fees{margin-top:18px;display:flex;flex-wrap:wrap;gap:8px}
.poster-frame{margin:0;position:relative}
.poster-frame button{display:block;width:100%;padding:0;border:1px solid var(--border-strong);border-radius:var(--radius-lg);
  overflow:hidden;background:var(--surface);box-shadow:var(--shadow-lg);cursor:zoom-in}
.poster-frame img{width:100%;display:block}
.poster-frame figcaption{margin-top:10px;text-align:center;color:var(--faint);font-size:var(--t1)}
.poster-tag{position:absolute;top:14px;left:14px;z-index:2;padding:6px 12px;border-radius:var(--pill);
  background:var(--grad);color:var(--on-primary);font-size:var(--t1);font-weight:700;box-shadow:var(--shadow-md)}

/* ---------- programme ---------- */
.prog{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:34px}
.prog-day{border-radius:var(--radius-lg);background:var(--surface);border:1px solid var(--border);overflow:hidden}
.prog-head{padding:16px 20px;border-bottom:1px solid var(--border);background:var(--grad-soft)}
.prog-head b{display:block;font-size:var(--t4);font-weight:800;color:var(--ink-strong);letter-spacing:-.02em}
.prog-head span{display:block;color:var(--muted);font-size:var(--t1);margin-top:2px}
.slot{display:grid;gap:4px;padding:15px 20px;border-bottom:1px solid var(--border)}
.slot:last-child{border-bottom:0}
.slot time{color:var(--primary);font-size:var(--t1);font-weight:700;font-variant-numeric:tabular-nums}
.slot b{color:var(--ink-strong);font-size:var(--t2);font-weight:600;line-height:1.35}
.slot span{color:var(--muted);font-size:var(--t1)}
.prog-extra{display:grid;grid-template-columns:repeat(auto-fit,minmax(262px,1fr));gap:16px;margin-top:16px}
.notice{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:start;padding:18px 20px;
  border-radius:var(--radius-lg);background:var(--surface);border:1px solid var(--border)}
.notice .office-icon{margin:0}
.notice b{display:block;color:var(--ink-strong);font-size:var(--t3);font-weight:700}
.notice p{color:var(--muted);font-size:var(--t2);margin-top:4px}
  transition:transform .18s ease,border-color .18s ease}
.brands{display:flex;flex-wrap:wrap;gap:9px;margin-top:18px}
#posterDialog{width:min(100% - 24px,760px)}
#posterDialog .sheet{padding:14px}
#posterDialog img{width:100%;border-radius:var(--radius)}

/* ---------- hero ---------- */
    .hero {
      padding: clamp(36px, 5vw, 70px) 0 clamp(38px, 5vw, 62px)
    }

    .hero-in {
      display: grid;
      grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
      gap: clamp(30px, 4.5vw, 64px);
      align-items: center
    }

    .hero h1 {
      margin: 22px 0 0
    }

    .hero .lede {
      margin-top: 20px
    }

    .hero-cta {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin-top: 30px
    }

    .hero-note {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      margin-top: 24px;
      color: var(--muted);
      font-size: var(--t2);
      max-width: 54ch
    }

    .hero-note svg {
      margin-top: 4px;
      flex: none;
      color: var(--verified)
    }

    .hero-note b {
      color: var(--ink-strong);
      font-weight: 700
    }

    .stage {
      position: relative;
      display: grid;
      place-items: center;
      padding: 40px 14px
    }

    .stage-glow {
      position: absolute;
      inset: 6% 4% 10%;
      background: var(--grad);
      filter: blur(64px);
      opacity: .22;
      border-radius: 50%
    }

    .float {
      position: absolute;
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 11px 14px;
      border-radius: var(--radius);
      background: var(--sheet-bg);
      border: 1px solid var(--border-strong);
      box-shadow: var(--shadow-md);
      font-size: var(--t1);
      max-width: 242px
    }

    .float b {
      display: block;
      color: var(--ink-strong);
      font-weight: 700;
      line-height: 1.3
    }

    .float em {
      display: block;
      color: var(--muted);
      font-style: normal;
      line-height: 1.3
    }

    .float-a {
      top: -34px;
      right: -26px
    }

    .float-b {
      bottom: -32px;
      left: -26px
    }

    /* ---------- figures ---------- */
    .figures {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 14px;
      margin-top: clamp(34px, 5vw, 56px)
    }

    .figure {
      padding: 20px 22px;
      border-radius: var(--radius-lg);
      background: var(--surface);
      border: 1px solid var(--border);
      backdrop-filter: blur(8px)
    }

    .figure dt {
      font-size: var(--t1);
      color: var(--muted)
    }

    .figure dd {
      margin: 6px 0 0;
      font-size: clamp(1.55rem, 1.2rem + 1.3vw, 2.2rem);
      font-weight: 800;
      letter-spacing: -.035em;
      color: var(--ink-strong)
    }

    .figure dd em {
      font-style: normal;
      background: var(--grad);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent
    }

    /* ---------- heads and panels ---------- */
    .head {
      max-width: 64ch
    }

    .head h2 {
      margin: 16px 0 0
    }

    .head .lede {
      margin-top: 14px
    }

    .panel {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      backdrop-filter: blur(10px)
    }

    .panel-pad {
      padding: clamp(20px, 3vw, 34px)
    }

    /* ---------- verify ---------- */
    .verify-grid {
      display: grid;
      grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr);
      gap: clamp(24px, 4vw, 50px);
      align-items: start
    }

    .verify-form {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 12px;
      align-items: end
    }

    .verify-out {
      margin-top: 18px
    }

    .result {
      border-radius: var(--radius);
      padding: 18px 20px;
      border: 1px solid var(--border);
      background: var(--surface-2)
    }

    .result.ok {
      border-color: var(--verified-line);
      background: var(--verified-bg)
    }

    .result.no {
      border-color: var(--refuse-line);
      background: var(--refuse-bg)
    }

    .result h4 {
      margin: 12px 0 4px;
      overflow-wrap: anywhere
    }

    .result p {
      color: var(--muted);
      font-size: var(--t2)
    }

    .samples {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 16px
    }

    .samples button {
      background: var(--surface-2);
      border: 1px solid var(--border);
      color: var(--muted);
      border-radius: var(--pill);
      padding: 7px 14px;
      font-size: var(--t1);
      font-variant-numeric: tabular-nums;
      min-height: 36px
    }

    .samples button:hover {
      color: var(--ink-strong);
      border-color: var(--border-strong)
    }

    /* ---------- directory ---------- */
    .toolbar {
      display: grid;
      grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr) auto;
      gap: 12px;
      align-items: end;
      padding: 16px;
      border-radius: var(--radius-lg);
      background: var(--surface);
      border: 1px solid var(--border);
      margin-top: 30px
    }

    .count-line {
      margin: 18px 0;
      font-size: var(--t2);
      color: var(--muted)
    }

    .count-line b {
      color: var(--ink-strong)
    }

    .cards {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(318px, 1fr));
      gap: 16px
    }

    .card {
      display: block;
      width: 100%;
      text-align: left;
      padding: 20px;
      border-radius: var(--radius-lg);
      background: var(--surface);
      border: 1px solid var(--border);
      transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease
    }

    .card:hover {
      transform: translateY(-3px);
      border-color: var(--border-strong);
      box-shadow: var(--shadow-md)
    }

    .card-top {
      display: grid;
      grid-template-columns: 52px minmax(0, 1fr) auto;
      gap: 14px;
      align-items: start
    }

    .card-top .avatar {
      font-size: 1.05rem;
      border-radius: 12px
    }

    .card-name {
      display: block;
      font-size: 1.02rem;
      font-weight: 700;
      color: var(--ink-strong);
      letter-spacing: -.02em;
      line-height: 1.3;
      overflow-wrap: anywhere
    }

    .card-studio {
      display: block;
      color: var(--muted);
      font-size: var(--t2);
      margin-top: 3px;
      overflow-wrap: anywhere
    }

    .card-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 7px;
      margin-top: 15px
    }

    .card-foot {
      display: flex;
      flex-wrap: wrap;
      gap: 8px 14px;
      align-items: center;
      justify-content: space-between;
      margin-top: 16px;
      padding-top: 14px;
      border-top: 1px solid var(--border);
      font-size: var(--t1);
      color: var(--faint)
    }

    .card-no {
      font-variant-numeric: tabular-nums
    }

    .card-open {
      color: var(--primary);
      font-weight: 600
    }

    .empty {
      grid-column: 1/-1;
      padding: 48px 24px;
      text-align: center;
      border: 1px dashed var(--border-strong);
      border-radius: var(--radius-lg);
      color: var(--muted)
    }

    .empty b {
      display: block;
      color: var(--ink-strong);
      font-size: var(--t4);
      margin-bottom: 6px
    }

    /* ---------- process ---------- */
    .steps {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 16px;
      margin-top: 38px;
      position: relative
    }

    .steps::before {
      content: "";
      position: absolute;
      left: 40px;
      right: 40px;
      top: 42px;
      height: 1px;
      background: var(--grad);
      opacity: .55
    }

    .step {
      position: relative;
      padding: 22px;
      border-radius: var(--radius-lg);
      background: var(--surface);
      border: 1px solid var(--border)
    }

    .step-badge {
      width: 38px;
      height: 38px;
      border-radius: 12px;
      display: grid;
      place-items: center;
      font-weight: 800;
      font-size: .95rem;
      background: var(--grad);
      color: var(--on-primary);
      margin-bottom: 14px;
      box-shadow: var(--shadow-md)
    }

    .step h4 {
      margin-bottom: 8px
    }

    .step p {
      color: var(--muted);
      font-size: var(--t2)
    }

    /* ---------- membership ---------- */
    .apply-grid {
      display: grid;
      grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
      gap: clamp(24px, 4vw, 52px);
      align-items: start;
      margin-top: 38px
    }

    .benefits {
      display: grid;
      gap: 13px;
      margin: 0;
      padding: 0;
      list-style: none
    }

    .benefits li {
      display: grid;
      grid-template-columns: 22px minmax(0, 1fr);
      gap: 12px;
      color: var(--muted);
      font-size: var(--t3)
    }

    .benefits svg {
      margin-top: 5px;
      color: var(--verified)
    }

    .benefits b {
      color: var(--ink-strong);
      font-weight: 600
    }

    .stepper {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 24px
    }

    .stepper i {
      flex: 1;
      height: 5px;
      border-radius: var(--pill);
      background: var(--surface-3)
    }

    .stepper i.on {
      background: var(--grad)
    }

    .stepper small {
      color: var(--muted);
      font-size: var(--t1);
      white-space: nowrap;
      font-weight: 600
    }

    .form-step {
      display: grid;
      gap: 16px
    }

    .two {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 16px
    }

    .form-foot {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin-top: 24px
    }

    .form-foot .grow {
      margin-left: auto
    }

    .receipt {
      text-align: center;
      padding: 10px 0
    }

    .receipt .seal {
      justify-content: center;
      margin-bottom: 16px
    }

    .receipt h3 {
      margin-bottom: 10px
    }

    .receipt p {
      color: var(--muted);
      max-width: 46ch;
      margin-inline: auto;
      font-size: var(--t2)
    }

    .receipt .kv {
      max-width: 330px;
      margin: 22px auto 0;
      text-align: left;
      font-size: var(--t2)
    }

    /* ---------- events ---------- */
    .event-facts {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 22px
    }

    .posters {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
      gap: 18px;
      margin-top: 34px
    }

    .poster {
      border-radius: var(--radius-lg);
      overflow: hidden;
      background: var(--surface);
      border: 1px solid var(--border);
      transition: transform .18s ease, border-color .18s ease
    }

    .poster:hover {
      transform: translateY(-3px);
      border-color: var(--border-strong)
    }

    .poster img {
      width: 100%;
      aspect-ratio: 3/4;
      object-fit: cover;
      object-position: top
    }

    .poster figcaption {
      padding: 16px 18px 18px
    }

    .poster b {
      display: block;
      font-weight: 700;
      color: var(--ink-strong);
      font-size: var(--t3);
      letter-spacing: -.02em
    }

    .poster span {
      display: block;
      color: var(--muted);
      font-size: var(--t1);
      margin-top: 5px
    }

    .fees {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
      gap: 14px;
      margin-top: 26px
    }

    .fee {
      padding: 20px;
      border-radius: var(--radius-lg);
      background: var(--surface);
      border: 1px solid var(--border)
    }

    .fee b {
      display: block;
      font-size: 1.6rem;
      font-weight: 800;
      letter-spacing: -.03em;
      color: var(--ink-strong)
    }

    .fee span {
      display: block;
      color: var(--muted);
      font-size: var(--t1);
      margin-top: 6px
    }

    .fee.is-lead {
      background: var(--grad-soft);
      border-color: var(--border-strong)
    }

    /* ---------- office ---------- */
    .office-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(238px, 1fr));
      gap: 16px;
      margin-top: 34px
    }

    .office-card {
      padding: 24px;
      border-radius: var(--radius-lg);
      background: var(--surface);
      border: 1px solid var(--border)
    }

    .office-card h4 {
      margin-bottom: 10px
    }

    .office-card p {
      color: var(--muted);
      font-size: var(--t2);
      overflow-wrap: anywhere
    }

    .office-card a {
      display: inline-flex;
      align-items: center;
      min-height: 38px
    }

    .office-icon {
      width: 40px;
      height: 40px;
      border-radius: 12px;
      display: grid;
      place-items: center;
      margin-bottom: 14px;
      background: var(--grad-soft);
      border: 1px solid var(--border);
      color: var(--primary)
    }

    .office-icon svg {
      width: 19px;
      height: 19px
    }

    /* ---------- footer ---------- */
    .foot {
      border-top: 1px solid var(--border);
      background: var(--foot-bg);
      padding: clamp(40px, 5vw, 62px) 0 26px;
      margin-top: 16px
    }

    .foot-grid {
      display: grid;
      grid-template-columns: minmax(0, 1.5fr) repeat(2, minmax(0, 1fr));
      gap: 30px
    }

    .foot h5 {
      margin: 0 0 12px;
      font-size: var(--t2);
      font-weight: 700;
      color: var(--ink-strong)
    }

    .foot p {
      color: var(--muted);
      font-size: var(--t2)
    }

    .foot ul {
      list-style: none;
      margin: 0;
      padding: 0;
      display: grid;
      gap: 4px;
      justify-items: start
    }

    .foot ul a {
      display: inline-flex;
      align-items: center;
      min-height: 40px;
      color: var(--muted);
      font-size: var(--t2)
    }

    .foot-base {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      justify-content: space-between;
      align-items: center;
      border-top: 1px solid var(--border);
      margin-top: 32px;
      padding-top: 22px;
      color: var(--faint);
      font-size: var(--t1)
    }

    .foot-base a {
      color: var(--faint);
      font-size: var(--t1)
    }

    .wa {
      position: fixed;
      right: 18px;
      bottom: calc(18px + env(safe-area-inset-bottom, 0px));
      z-index: 45;
      width: 54px;
      height: 54px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      background: #25D366;
      color: #04231A;
      box-shadow: var(--shadow-lg);
      transition: transform .16s ease
    }

    .wa:hover {
      transform: translateY(-2px);
      text-decoration: none
    }

    .wa svg {
      width: 27px;
      height: 27px
    }

    /* ---------- responsive ---------- */
    @media (max-width:1080px) {
  .banner-in{grid-template-columns:minmax(0,1fr)}
  .poster-frame{max-width:470px;margin-inline:auto}
  .prog{grid-template-columns:minmax(0,1fr)}

      .hero-in {
        grid-template-columns: minmax(0, 1fr)
      }

      .stage {
        order: -1;
        margin-bottom: 6px;
        padding: 42px 20px
      }

      .verify-grid,
      .apply-grid {
        grid-template-columns: minmax(0, 1fr)
      }

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

      .steps::before {
        display: none
      }

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

    @media (max-width:900px) {
      .nav-links {
        position: fixed;
        top: calc(var(--nav-h) + env(safe-area-inset-top, 0px));
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
        padding: 16px 16px 22px;
        background: var(--nav-bg);
        border-bottom: 1px solid var(--border);
        transform: translateY(-12px);
        opacity: 0;
        pointer-events: none;
        transition: opacity .16s ease, transform .16s ease;
        max-height: calc(100dvh - var(--nav-h));
        overflow: auto;
        backdrop-filter: blur(14px)
      }

      .nav-links.open {
        opacity: 1;
        transform: none;
        pointer-events: auto
      }

      .nav-links a {
        padding: 13px 12px;
        font-size: var(--t3)
      }

      .nav-links .btn {
        display: inline-flex;
        margin-top: 10px
      }

      .nav-actions .btn-primary {
        display: none
      }

      .burger {
        display: flex
      }

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

      .toolbar .field:first-child {
        grid-column: 1/-1
      }

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

      .queue-row {
        grid-template-columns: 48px minmax(0, 1fr);
        row-gap: 12px
      }

      .queue-docs,
      .queue-actions {
        grid-column: 1/-1
      }

      .queue-actions {
        justify-content: flex-start
      }
    }

    @media (max-width:620px) {
  .banner-cta .btn{width:100%}
  .banner-facts{grid-template-columns:minmax(0,1fr)}

      :root {
        --nav-h: 64px
      }

      .figures,
      .steps,
      .two {
        grid-template-columns: minmax(0, 1fr)
      }

      .toolbar {
        grid-template-columns: minmax(0, 1fr)
      }

      .cards {
        grid-template-columns: minmax(0, 1fr)
      }

      .verify-form {
        grid-template-columns: minmax(0, 1fr)
      }

      .float {
        display: none
      }

      .idcard {
        padding: 17px
      }

      .idcard-body {
        grid-template-columns: 62px minmax(0, 1fr);
        gap: 13px
      }

      .foot-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 26px
      }

      .hero-cta .btn,
      .form-foot .btn,
      .receipt .btn {
        width: 100%
      }

      .form-foot .grow {
        margin-left: 0
      }

      .card-top {
        grid-template-columns: 46px minmax(0, 1fr)
      }

      .card-top .pill {
        grid-column: 2;
        justify-self: start
      }

      .sheet {
        padding: 20px
      }

      .wa {
        width: 50px;
        height: 50px;
        right: 14px
      }

      .logo img {
        width: 38px;
        height: 38px
      }

      .logo b {
        font-size: .84rem;
        white-space: normal;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        max-width: none
      }

      .nav .logo b{white-space:normal;max-width:none;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

      .theme-btn .name {
        display: none
      }

      .theme-menu {
        width: min(86vw, 276px)
      }
    }

    @media (prefers-reduced-motion:reduce) {
      html {
        scroll-behavior: auto
      }

      *,
      *::before,
      *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important
      }
    }
  
/* ---------- fees and reference card ---------- */
.pay-upi{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:14px 0 16px;padding:14px 16px;
  border-radius:var(--radius);border:1px dashed var(--border-strong);background:var(--surface-2)}
.pay-upi span{width:100%;font-size:var(--t1);color:var(--faint);letter-spacing:.02em}
.pay-upi b{flex:1;min-width:0;color:var(--ink-strong);font-weight:700;font-size:var(--t3);
  overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.pay-list{display:grid;grid-template-columns:auto minmax(0,1fr);gap:9px 16px;font-size:var(--t2)}
.pay-list dt{color:var(--faint)}
.pay-list dd{margin:0;color:var(--ink);font-weight:600;overflow-wrap:anywhere}
.pay-note{margin-top:14px;padding-top:14px;border-top:1px solid var(--border);color:var(--muted);font-size:var(--t1)}
@media (max-width:420px){
  .pay-upi .btn{width:100%}
  .pay-list{grid-template-columns:minmax(0,1fr);gap:2px 0}
  .pay-list dd{margin-bottom:10px}
}

/* ---------- the fees card needs the room ---------- */
.office-card-pay{grid-column:span 2}
.office-card-pay .pay-list{grid-template-columns:auto minmax(0,1fr)}
@media (max-width:1080px){.office-card-pay{grid-column:1/-1}}

/* ---------- district counts read as one line ---------- */
.map-cell > span{display:flex;align-items:baseline;gap:7px;margin-top:6px;color:var(--muted);font-size:var(--t1)}
.map-cell > span [data-count]{font-size:1.55rem;font-weight:800;line-height:1;color:var(--ink-strong);
  letter-spacing:-.035em;font-variant-numeric:tabular-nums}

/* ---------- speakers and mentors: the poster turns over ---------- */
.speakers{display:grid;grid-template-columns:repeat(auto-fill,minmax(212px,1fr));gap:16px;margin-top:34px}
.speaker{perspective:1200px}
.flip{display:block;width:100%;padding:0;border:0;background:none;cursor:pointer;border-radius:var(--radius-lg)}
.flip-in{position:relative;display:block;aspect-ratio:3/4;transform-style:preserve-3d;border-radius:var(--radius-lg);
  transition:transform .8s cubic-bezier(.2,.9,.25,1),box-shadow .4s var(--ease)}
.flip-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--border);background:var(--surface)}
.flip-front img{width:100%;height:100%;object-fit:cover;object-position:top;display:block}
.flip-name{position:absolute;inset-inline:0;bottom:0;display:block;text-align:start;padding:40px 15px 14px;
  background:linear-gradient(to top,rgba(10,7,5,.92),rgba(10,7,5,.55) 46%,transparent);color:#fff}
.flip-name b{display:block;font-weight:700;font-size:var(--t3);letter-spacing:-.02em;line-height:1.25}
.flip-name em{display:block;font-style:normal;font-size:var(--t1);opacity:.82;margin-top:3px}
.flip-back{transform:rotateY(180deg);display:flex;flex-direction:column;gap:9px;padding:20px;text-align:start;
  background:var(--grad);color:var(--on-primary);border-color:transparent}
.flip-day{font-size:var(--t1);font-weight:700;letter-spacing:.04em;opacity:.82}
.flip-back b{font-size:var(--t4);font-weight:800;letter-spacing:-.025em;line-height:1.2}
.flip-role{font-size:var(--t1);opacity:.88}
.flip-topic{font-size:var(--t1);line-height:1.55;opacity:.95;overflow:hidden}
.flip-cta{margin-top:auto;display:inline-flex;align-items:center;gap:7px;font-size:var(--t1);font-weight:700;
  padding-top:10px;border-top:1px solid rgba(255,255,255,.28)}
.flip-cta svg{width:15px;height:15px;transition:transform .3s var(--ease)}
.flip:hover .flip-cta svg{transform:translateX(4px)}
.speaker-body{padding:14px 16px 16px}
.speaker-body b{display:block;font-weight:700;color:var(--ink-strong);font-size:var(--t3);letter-spacing:-.02em;line-height:1.3}
.speaker-body span{display:block;color:var(--muted);font-size:var(--t1);margin-top:3px}
.speaker-body em{display:block;color:var(--primary);font-style:normal;font-size:var(--t1);font-weight:600;margin-top:7px}

@media (hover:hover) and (pointer:fine){
  .speaker-body{display:none}
  .speaker:hover .flip-in,.flip:focus-visible .flip-in{transform:rotateY(180deg);box-shadow:var(--shadow-lg)}
}
@media (hover:none),(pointer:coarse){
  .flip-in{aspect-ratio:3/4}
  .flip-back,.flip-name{display:none}
  .speaker{border-radius:var(--radius-lg);background:var(--surface);border:1px solid var(--border);overflow:hidden;
    transition:transform .3s var(--ease),border-color .3s var(--ease)}
  .speaker:active{transform:scale(.985)}
  .flip-face{border:0}
}
@media (prefers-reduced-motion:reduce){
  .flip-in{transition:none}
}
@media (max-width:620px){
  .speakers{grid-template-columns:repeat(2,minmax(0,1fr))}
  .speaker-body{padding:12px 13px 14px}
}

/* ---------- the mobile drawer sits on a solid sheet ---------- */
@media (max-width:900px){
  .nav-links{background:var(--sheet-bg);box-shadow:var(--shadow-lg);backdrop-filter:none}
  .nav-scrim{position:fixed;inset:0;z-index:40;background:rgba(6,8,14,.5);backdrop-filter:blur(3px)}
  body.menu-open{overflow:hidden}
}

/* ---------- two districts to a row on a phone ---------- */
@media (max-width:620px){
  .map-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .map-cell{padding:14px 14px 13px}
  .map-cell b{font-size:var(--t2)}
  .map-cell > span{flex-wrap:wrap;gap:4px}
  .map-cell > span [data-count]{font-size:1.3rem}
  .rail-hint .nm-short{display:inline}
  .rail-hint .nm-long{display:none}
}
@media (max-width:900px){
  .nav-links a.btn-primary{color:var(--on-primary)}
  .nav-links a.btn-ghost{color:var(--ink)}
}

/* ---------- the header row stays on one line ---------- */
@media (min-width:901px){
  .nav-links a{white-space:nowrap;padding:9px 10px}
  .nav .logo b{max-width:min(28vw,290px)}
}