/*
  JOSEPH HEBERT SHARED BRAND SYSTEM
  Canonical visual template for joseph-hebert.com and connected sites.
  Reference look: Kamstrup / Collector Portal.
*/

:root{
  --jh-font:"Barlow Condensed","Arial Narrow",Arial,sans-serif;

  --jh-bg:#06111b;
  --jh-bg-deep:#050d15;
  --jh-nav:#081727;
  --jh-topbar:#07131f;

  --jh-surface:#0b2030;
  --jh-surface-2:#10283a;
  --jh-surface-3:#0a1b29;
  --jh-surface-hover:#11364b;
  --jh-surface-active:#17455e;

  --jh-line:#24465b;
  --jh-line-soft:#1f4055;
  --jh-line-strong:#3a7898;

  --jh-text:#edf8ff;
  --jh-text-strong:#f2faff;
  --jh-muted:#a6bfce;
  --jh-muted-2:#8ca8ba;
  --jh-subtle:#617f92;

  --jh-accent:#27c2ff;
  --jh-accent-2:#67d1ff;
  --jh-accent-soft:#143c53;

  --jh-good:#76e5b0;
  --jh-warn:#ffc86b;
  --jh-bad:#ff818d;

  --jh-radius-sm:7px;
  --jh-radius:12px;
  --jh-radius-lg:16px;
  --jh-shadow:0 12px 32px rgba(2,11,20,.38);
}

/* ---------- Typography standard ---------- */
html,
body,
body *,
button,
input,
select,
textarea,
option,
label,
dialog,
summary,
svg text{
  font-family:var(--jh-font)!important;
  font-synthesis:none!important;
}

body{
  color:var(--jh-text)!important;
  background:var(--jh-bg)!important;
  font-weight:500;
}

h1,h2,h3,h4,h5,h6,
.hero-name,
.portal-title,
.portal-copy h3,
.hub-copy h3,
.app-copy h2{
  color:var(--jh-text-strong)!important;
  font-weight:600!important;
  text-transform:uppercase!important;
  font-synthesis:none!important;
}

p{
  font-weight:500;
}

button,
.button,
.portal-home-link,
.portal-state,
.app-status,
.section-label,
.portal-section-label,
.portal-kicker,
.eyebrow,
.dialog-kicker,
.hub-enter{
  text-transform:uppercase!important;
  font-weight:500!important;
  letter-spacing:.08em!important;
}

/* ---------- Shared backgrounds ---------- */
.scene,
.portal-bg{
  background:
    radial-gradient(ellipse 60% 520px at 76% 0%,rgba(22,66,92,.72) 0%,transparent 72%),
    linear-gradient(180deg,var(--jh-topbar),var(--jh-bg) 44%,var(--jh-bg-deep) 100%)!important;
}

.grid,
.portal-bg::before{
  opacity:.20!important;
  background-image:
    linear-gradient(rgba(103,209,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(103,209,255,.035) 1px,transparent 1px)!important;
  background-size:64px 64px!important;
}

.glow-a{background:#1a6087!important;opacity:.14!important}
.glow-b{background:#0a7894!important;opacity:.10!important}
.cursor-glow{
  background:radial-gradient(520px circle at var(--mx) var(--my),rgba(39,194,255,.075),transparent 64%)!important;
}
.topography{color:rgba(103,209,255,.08)!important}

/* ---------- Shared chrome ---------- */
.topbar,
.portal-topbar{
  border-bottom:1px solid var(--jh-line-soft);
}

.mark,
.portal-mark{
  border:1px solid var(--jh-line-strong)!important;
  border-radius:var(--jh-radius)!important;
  background:linear-gradient(150deg,var(--jh-surface-2),var(--jh-surface-3))!important;
  color:var(--jh-text-strong)!important;
  box-shadow:inset 0 1px rgba(255,255,255,.035)!important;
}

.top-meta,
.portal-breadcrumb{
  color:var(--jh-muted)!important;
}

.status-dot{
  background:var(--jh-good)!important;
  box-shadow:0 0 0 5px rgba(118,229,176,.08),0 0 18px rgba(118,229,176,.30)!important;
}

/* ---------- Main landing page ---------- */
.eyebrow{
  color:var(--jh-accent-2)!important;
  font-size:12px!important;
  letter-spacing:.14em!important;
}
.eyebrow span{color:var(--jh-subtle)!important}

.hero-name-first{
  color:var(--jh-text-strong)!important;
  font-weight:600!important;
}

.hero-name-last{
  color:var(--jh-text-strong)!important;
  -webkit-text-stroke:0!important;
  text-shadow:none!important;
  font-weight:600!important;
}

.lede{
  color:var(--jh-muted)!important;
  text-transform:none!important;
  letter-spacing:.035em!important;
  font-size:clamp(17px,1.55vw,20px)!important;
  line-height:1.55!important;
}

.button{
  border-radius:var(--jh-radius-sm)!important;
  min-height:48px!important;
  font-size:14px!important;
}

.button-primary{
  color:var(--jh-text-strong)!important;
  background:var(--jh-surface-active)!important;
  border:1px solid #65c7ef!important;
  box-shadow:none!important;
}
.button-primary:hover{
  color:#fff!important;
  background:#1b5068!important;
  border-color:#78d5ff!important;
  box-shadow:none!important;
}

.button-secondary{
  color:var(--jh-text)!important;
  background:var(--jh-surface)!important;
  border:1px solid var(--jh-line-strong)!important;
}
.button-secondary:hover{
  color:#fff!important;
  background:var(--jh-surface-hover)!important;
  border-color:#56c5f6!important;
}

.signal-shell{
  border-radius:var(--jh-radius-lg)!important;
  border-color:var(--jh-line)!important;
  background:
    linear-gradient(rgba(103,209,255,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(103,209,255,.025) 1px,transparent 1px),
    linear-gradient(150deg,var(--jh-surface-2),var(--jh-surface-3))!important;
  background-size:34px 34px,34px 34px,auto!important;
  box-shadow:var(--jh-shadow),inset 0 1px rgba(255,255,255,.04)!important;
}
.signal-shell::after{
  border-radius:12px!important;
  border-color:rgba(103,209,255,.08)!important;
}
.signal-header{color:var(--jh-muted-2)!important}
.live{color:var(--jh-good)!important}
.live i{background:var(--jh-good)!important}
.ring{border-color:rgba(103,209,255,.16)!important}
.ring-4{border-color:rgba(103,209,255,.09)!important}
.ring::after{
  background:var(--jh-accent-2)!important;
  box-shadow:0 0 12px rgba(103,209,255,.44)!important;
}
.monogram{
  border-color:#3888aa!important;
  background:linear-gradient(145deg,#174963,#0c2739)!important;
  box-shadow:inset 0 1px rgba(255,255,255,.05),0 10px 28px rgba(0,0,0,.28)!important;
}
.monogram span{color:var(--jh-text-strong)!important}
.monogram small{color:var(--jh-muted)!important}
.orbit-node{
  border-color:#aee8ff!important;
  background:var(--jh-bg)!important;
  box-shadow:0 0 12px rgba(103,209,255,.34)!important;
}
.signal-footer{border-top-color:var(--jh-line)!important}
.signal-footer small{color:var(--jh-muted-2)!important}
.signal-footer strong{color:var(--jh-text)!important}

.floating-label{
  border-radius:var(--jh-radius-sm)!important;
  border-color:var(--jh-line)!important;
  background:rgba(8,23,39,.94)!important;
  box-shadow:0 8px 24px rgba(0,0,0,.24)!important;
}
.floating-label span{color:var(--jh-accent-2)!important}
.floating-label strong{color:var(--jh-text)!important}

/* ---------- Main launchpad ---------- */
.systems{
  border-top-color:var(--jh-line-soft)!important;
}
.section-label{
  color:var(--jh-accent-2)!important;
}
.systems h2,
.systems h2 span{
  color:var(--jh-text-strong)!important;
}
.systems-note{
  color:var(--jh-muted)!important;
  text-transform:none!important;
  letter-spacing:.035em!important;
}

.hub-card{
  border-radius:var(--jh-radius-lg)!important;
  border-color:var(--jh-line)!important;
  background:
    radial-gradient(circle at 100% 0%,rgba(39,194,255,.055),transparent 44%),
    linear-gradient(150deg,var(--jh-surface-2),var(--jh-surface-3))!important;
  box-shadow:inset 0 1px rgba(255,255,255,.035),0 9px 24px rgba(2,11,20,.22)!important;
}
.hub-card:hover{
  background:
    radial-gradient(circle at 100% 0%,rgba(39,194,255,.095),transparent 48%),
    var(--jh-surface-hover)!important;
  border-color:#56c5f6!important;
  box-shadow:0 15px 32px rgba(2,11,20,.34)!important;
}
.hub-number{color:var(--jh-subtle)!important}
.hub-icon{
  border-radius:var(--jh-radius)!important;
  border-color:#31586d!important;
  background:#0b2536!important;
}
.hub-icon svg{stroke:#9de4ff!important}
.hub-copy>span{
  color:var(--jh-accent-2)!important;
}
.hub-copy h3{
  color:var(--jh-text-strong)!important;
}
.hub-copy p{
  color:var(--jh-muted)!important;
  text-transform:none!important;
  letter-spacing:.035em!important;
  font-size:14px!important;
}
.hub-enter{
  border-top-color:var(--jh-line)!important;
  color:var(--jh-muted)!important;
}
.hub-enter b{color:var(--jh-accent-2)!important}

/* ---------- Sub-portals ---------- */
.portal-bg{
  background:
    radial-gradient(ellipse 62% 520px at 78% 0%,#16425c 0%,transparent 72%),
    var(--jh-bg)!important;
}

.portal-topbar{
  background:rgba(7,19,31,.76);
  backdrop-filter:blur(12px);
}

.portal-home-link{
  color:var(--jh-accent-2)!important;
}
.portal-home-link:hover{color:#a6eaff!important}

.portal-hero{
  border-bottom-color:var(--jh-line-soft)!important;
}

.portal-kicker,
.portal-section-label{
  color:var(--jh-accent-2)!important;
}

.portal-title,
.portal-title-outline{
  color:var(--jh-text-strong)!important;
  -webkit-text-stroke:0!important;
  text-shadow:none!important;
}

.portal-intro{
  color:var(--jh-muted)!important;
  text-transform:none!important;
  letter-spacing:.035em!important;
  line-height:1.6!important;
}

.portal-summary div{
  border-top-color:var(--jh-line)!important;
}
.portal-summary small{
  color:var(--jh-muted-2)!important;
}
.portal-summary strong{
  color:var(--jh-text)!important;
}
.portal-section-count{color:var(--jh-subtle)!important}

.app-card{
  border-radius:var(--jh-radius-lg)!important;
  border-color:var(--jh-line)!important;
  background:
    radial-gradient(circle at 100% 0%,rgba(39,194,255,.055),transparent 46%),
    linear-gradient(150deg,var(--jh-surface-2),var(--jh-surface-3))!important;
  box-shadow:inset 0 1px rgba(255,255,255,.035),0 8px 22px rgba(2,11,20,.22)!important;
}
.app-card::before{
  background:linear-gradient(180deg,rgba(103,209,255,.03),transparent 46%)!important;
}
.app-card:hover{
  border-color:#56c5f6!important;
  background:
    radial-gradient(circle at 100% 0%,rgba(39,194,255,.095),transparent 48%),
    var(--jh-surface-hover)!important;
  box-shadow:0 14px 30px rgba(2,11,20,.34)!important;
}

.app-icon{
  border-radius:var(--jh-radius)!important;
  border-color:#31586d!important;
  background:#0b2536!important;
}
.app-icon svg{stroke:#9de4ff!important}

.app-status{
  border-radius:var(--jh-radius-sm)!important;
  color:#c5e2ef!important;
  border-color:#305367!important;
  background:#16374a!important;
}

.app-copy h2{
  color:var(--jh-text-strong)!important;
}
.app-copy p{
  color:var(--jh-muted)!important;
  text-transform:none!important;
  letter-spacing:.035em!important;
  font-size:13px!important;
}
.app-arrow{color:var(--jh-accent-2)!important}

.portal-footer{
  border-top-color:var(--jh-line-soft)!important;
  color:var(--jh-muted-2)!important;
}

/* ---------- Dialogs / overlays ---------- */
.about-dialog,
.portal-toast{
  color:var(--jh-text)!important;
  background:linear-gradient(150deg,var(--jh-surface-2),var(--jh-surface-3))!important;
  border-color:var(--jh-line)!important;
  border-radius:var(--jh-radius-lg)!important;
}
.about-dialog h2,
.about-dialog h2 span{
  color:var(--jh-text-strong)!important;
}
.about-dialog p{
  color:var(--jh-muted)!important;
  text-transform:none!important;
  letter-spacing:.035em!important;
}
.dialog-kicker{color:var(--jh-accent-2)!important}
.dialog-tags span{
  color:#c5e2ef!important;
  border-color:#305367!important;
  background:#16374a!important;
  border-radius:var(--jh-radius-sm)!important;
}
.dialog-close{
  border-radius:var(--jh-radius-sm)!important;
  border-color:var(--jh-line)!important;
  background:var(--jh-surface)!important;
}

/* ---------- Footer ---------- */
.rail{
  color:var(--jh-muted-2)!important;
  border-top-color:var(--jh-line-soft)!important;
}
.rail i{background:var(--jh-line)!important}
.rail-line{background:linear-gradient(90deg,var(--jh-line),transparent)!important}
.copyright{color:var(--jh-subtle)!important}

/* ---------- Generic reusable components for future sites ---------- */
.jh-page{
  min-height:100svh;
  color:var(--jh-text);
  background:var(--jh-bg);
  font-family:var(--jh-font);
}
.jh-panel,
.jh-card{
  color:var(--jh-text);
  border:1px solid var(--jh-line);
  border-radius:var(--jh-radius);
  background:linear-gradient(150deg,var(--jh-surface-2),var(--jh-surface-3));
  box-shadow:inset 0 1px rgba(255,255,255,.035);
}
.jh-card:hover{
  border-color:#56c5f6;
  background:var(--jh-surface-hover);
}
.jh-heading{
  margin:0;
  color:var(--jh-text-strong);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.02em;
}
.jh-label{
  color:var(--jh-accent-2);
  font-size:12px;
  font-weight:500;
  letter-spacing:.10em;
  text-transform:uppercase;
}
.jh-copy{
  color:var(--jh-muted);
  font-weight:500;
  line-height:1.55;
  letter-spacing:.025em;
}
.jh-button{
  min-height:42px;
  padding:0 14px;
  border:1px solid var(--jh-line-strong);
  border-radius:var(--jh-radius-sm);
  color:var(--jh-text);
  background:var(--jh-surface);
  font-weight:500;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.jh-button:hover{
  border-color:#56c5f6;
  background:var(--jh-surface-hover);
}
.jh-button-primary{
  background:var(--jh-surface-active);
  border-color:#65c7ef;
  color:#fff;
}
.jh-badge{
  display:inline-flex;
  align-items:center;
  min-height:26px;
  padding:4px 9px;
  border:1px solid #305367;
  border-radius:var(--jh-radius-sm);
  background:#16374a;
  color:#c5e2ef;
  font-size:12px;
  font-weight:500;
  letter-spacing:.07em;
  text-transform:uppercase;
}
.jh-status-good{color:var(--jh-good)}
.jh-status-warn{color:var(--jh-warn)}
.jh-status-bad{color:var(--jh-bad)}

::selection{
  background:rgba(39,194,255,.34)!important;
  color:#fff!important;
}


/* ---------- Small-text readability standard ----------
   Barlow Condensed is the shared typeface, but screen UI text must remain
   comfortably readable. No important interface text should rely on tiny,
   heavily tracked condensed type. */
.top-meta,
.eyebrow,
.signal-header,
.monogram small,
.signal-footer small,
.signal-footer strong,
.floating-label span,
.floating-label strong,
.section-label,
.portal-kicker,
.portal-meta,
.rail,
.dialog-kicker,
.dialog-tags span,
.toast,
.portal-state,
.signature-caption span,
.signature-caption small,
.hub-number,
.hub-copy > span,
.hub-enter,
.portal-breadcrumb,
.portal-home-link,
.portal-summary small,
.portal-summary strong,
.portal-section-label,
.portal-section-count,
.app-status,
.portal-footer,
.portal-toast{
  font-size:12px!important;
  font-weight:500!important;
  letter-spacing:.045em!important;
  line-height:1.3!important;
}

.top-meta,
.eyebrow,
.section-label,
.portal-kicker,
.dialog-kicker,
.hub-copy > span,
.portal-breadcrumb,
.portal-home-link,
.portal-section-label,
.app-status{
  font-weight:600!important;
}

.portal-summary strong{
  font-size:13px!important;
  font-weight:600!important;
  letter-spacing:.025em!important;
}

.signature-caption span,
.signal-footer strong{
  font-size:13px!important;
  font-weight:600!important;
  letter-spacing:.025em!important;
}

.hub-enter,
.portal-footer,
.rail{
  font-size:12px!important;
  letter-spacing:.04em!important;
}

.rail{
  flex-wrap:wrap!important;
  white-space:normal!important;
  row-gap:8px!important;
}

@media(max-width:680px){
  .portal-breadcrumb{display:none!important}
  .portal-home-link,
  .app-status,
  .portal-section-count,
  .portal-footer,
  .portal-toast,
  .hub-number,
  .hub-copy > span,
  .hub-enter,
  .section-label,
  .eyebrow{
    font-size:12px!important;
  }
}