@layer components {
@media (max-width:1023px) {

  .hub-stage {
    container-type: normal;
    overflow: visible;
    height: auto;
    --hub-k: 1;
  }

  .hub-canvas {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    height: auto;
    transform: none;
  }

  .hub-tag { font-size: 12px; letter-spacing: 0.08em; }

  .hub-open .hub-canvas {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }

  .hub-open-mass {
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: auto;
    height: auto;
  }

  .hub-open-isle {
    position: relative;
    order: 1;
    left: auto;
    top: auto;
    width: 100%;
    height: auto;
  }

  .hub-open-isle-lip::after { height: 100%; }

  .hub-open-isle-note { font-size: 1rem; }

  .hub-open-mem {
    position: relative;
    order: 2;
    left: auto;
    right: auto;
    top: auto;
    height: auto;
    margin-left: 26px;
    margin-right: -40px;

    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
  }

  .hub-open-mem--a { top: auto; }
  .hub-open-mem--b { top: auto; order: 3; }

  .hub-open-mem-note { white-space: normal; font-size: 0.875rem; }

  .hub-open-rate {
    position: relative;
    order: 5;
    left: auto;
    top: auto;
    width: 100%;
  }

  .hub-seal-stage .hub-canvas {
    display: flex;
    flex-direction: column;
  }

  .hub-seal-head {
    position: relative;
    order: -1;
    left: auto;
    top: auto;
    width: 100%;
  }

  .hub-seal-body {
    position: relative;
    left: auto;
    top: auto;
    width: calc(100% + 24px);
  }

  .hub-seal-in { font-size: 12px; left: var(--sx); top: var(--sy); }

  .hub-seal-none {
    left: 6%;
    top: 4%;
  }

  .hub-seal-none-k { font-size: 12px; letter-spacing: 0.1em; }

  .hub-seal-inlay {
    left: 18%;
    width: 74%;
    height: auto;
  }

  .hub-seal-inlay-k { font-size: 12px; letter-spacing: 0.1em; }
  .hub-seal-inlay-row { gap: 6px 12px; }

  .hub-wound-stage .hub-canvas {
    display: flex;
    flex-direction: column;
  }

  .hub-wound-svg {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    height: auto;
  }

  .hub-wound-vals {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
  }
}
@media (max-width:1023px) {

  .hub-wound-end {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    text-align: left;
  }

  .hub-wound-end-k { font-size: 12px; letter-spacing: 0.11em; }
  .hub-wound-end-n { font-size: 12px; }

}

}

@layer components {
@media (max-width: 1023px) {

  .hub-open .hub-canvas { padding: 18px 20px 20px; }

  .hub-open-isle {
    padding: 16px 16px 15px;
    margin-bottom: 14px;
  }

  .hub-open-isle-note { margin-top: 9px; }

  .hub-open-mem { min-height: 44px; padding: 9px 16px 9px 18px; }
  .hub-open-mem--b { margin-top: 8px; }

  .hub-open-rate { margin-top: 14px; }
  .hub-open-rate-a { font-size: 1.5rem; }

  .hub-seal-body { height: 440px; }
  .hub-seal-none-v { font-size: 1.5rem; }
  .hub-seal-inlay { top: 58%; padding: 12px 12px 13px; gap: 10px; }

  .hub-wound-vals { margin-top: 14px; gap: 6px 16px; }
  .hub-wound-end { margin-top: 12px; }

}

@media (max-width: 380px) {
  .hub-seal-body { height: 420px; }
  .hub-open .hub-canvas { padding: 16px 16px 18px; }

}
}

@layer components {
@media (max-width: 1023px) {

  .main-content.hub-page > .hub-open {
    padding-top: calc(var(--navbar-h) + var(--hero-lede));
  }

  .hub-page .hub-open-head,
  .hub-page .hub-seal-head,
  .hub-page .hub-twin-head,
  .hub-page .hub-wound-head {
    margin-bottom: var(--stack-md);
  }

  .hub-page .hub-twin-head { gap: 0; }

  .hub-page .hub-open-mem { margin-right: 0; }

  .hub-page .hub-wound-rail {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
  }

  .hub-page .hub-wound-rail .hub-wound-svg {
    flex: 0 0 auto;
    width: 500px;
    max-width: none;
    height: auto;
  }

  .hub-page .hub-wound-vals { margin-top: 10px; gap: 4px 14px; }
  .hub-page .hub-wound-end { margin-top: 10px; }
  .hub-page .hub-wound-sec .hub-foot { gap: 14px; }

  .hub-page .hub-foot-note {
    font-size: var(--mt-body);
    line-height: var(--mt-lh-lede);
  }

}

@media (max-width: 380px) {
  .hub-page .hub-wound-rail .hub-wound-svg { width: 500px; }
}

@media (min-width: 600px) and (max-width: 1023px) {
  .hub-page .hub-wound-rail .hub-wound-svg { width: 900px; }
}

@media (max-width: 1023px) {
  .hub-page .hub-seal-body { height: 380px; }

  .hub-page .hub-seal-inlay {
    top: auto;
    bottom: 16px;
  }

  .hub-page .hub-wound-rail { position: relative; }

  .hub-page .hub-wound-rail .hub-wound-end {
    position: absolute;
    left: 62px;
    top: 7%;
    width: 252px;
    gap: 1px;
    text-align: left;
    padding: 8px 12px 10px;
    background: var(--bg-primary);
    border-radius: 3px;
  }

  .hub-page .hub-wound-rail .hub-wound-end-k {
    font-size: 12px;
    line-height: 1.2;
    color: #C9D0DA;
  }

  .hub-page .hub-wound-rail .hub-wound-end-v {
    font-size: 13px;
    line-height: 1.25;
    color: #F2F4F7;
  }

  .hub-page .hub-wound-rail .hub-wound-end-n {
    font-size: 12px;
    line-height: 1.2;
    color: #AEB6C2;
  }

}

@media (max-width: 380px) {
  .hub-page .hub-wound-rail .hub-wound-end { left: 52px; width: 244px; }
}

@media (min-width: 600px) and (max-width: 1023px) {
  .hub-page .hub-wound-rail .hub-wound-end { left: 168px; width: 462px; }
  .hub-page .hub-wound-rail .hub-wound-end-k { font-size: 13px; }
  .hub-page .hub-wound-rail .hub-wound-end-v { font-size: 16px; }
  .hub-page .hub-wound-rail .hub-wound-end-n { font-size: 13px; }
}

}

@layer components {
@media (max-width: 1023px) {

  .hub-port {
    display: grid;
    margin: 0;
    padding: var(--space-5) var(--space-4);
    border: 1px solid var(--border-light);
    border-radius: 12px;
    background: var(--bg-secondary);
  }
  .hub-port-brand {
    display: grid;
    gap: 4px;
    padding: var(--space-4);
    border: 1px solid var(--border-strong);
    border-radius: 10px;
    background: var(--bg-tertiary);
  }
  .hub-port-brand--new { border-color: var(--accent-color); }
  .hub-port-name {
    font-size: 1.375rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--text-primary);
  }
  .hub-port-state {
    font-family: var(--hub-mono);
    font-size: var(--mt-kicker);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--accent-ink);
  }
  .hub-port-gets { font-size: var(--mt-label); color: var(--text-secondary); }

  .hub-port-link {
    position: relative;
    display: flex;
    align-items: center;
    height: 56px;
    margin: 0;
    padding-left: 44px;
  }
  .hub-port-link::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 8px;
    left: 24px;
    width: 2px;
    background: var(--accent-color);
  }
  .hub-port-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 19px;
    border-top: 8px solid var(--accent-color);
    border-right: 6px solid transparent;
    border-left: 6px solid transparent;
  }
  .hub-port-lk {
    font-family: var(--hub-mono);
    font-size: var(--mt-kicker);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
  }
  .hub-port-wall {
    margin: var(--space-4) 0 0;
    padding-top: var(--space-3);
    border-top: 1px dashed var(--border-strong);
    font-family: var(--hub-mono);
    font-size: var(--mt-kicker);
    letter-spacing: 0.1em;
    text-align: center;
    text-transform: uppercase;
    color: var(--text-muted);
  }
}

@media (max-width: 599px) {
  .main-content.hub-page .hub-wound-rail .hub-wound-svg { width: 760px; }
  .main-content.hub-page .hub-wound-rail .hub-wound-end { left: 96px; width: 240px; }
}

@media (max-width: 380px) {
  .main-content.hub-page .hub-wound-rail .hub-wound-end { left: 64px; width: 244px; }
}
}