@font-face {
  font-family: 'Jost'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('jost-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Jost'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('jost-latin-500-normal.woff2') format('woff2');
}

/* Joiner — joiner.world
   Brand tokens carried over from /Brands/Joiner.md */

:root {
  --petrol:       #0E3A3E;
  --petrol-deep:  #0A2E31;   /* the sphere, a shade under the page */
  --land:         #1D5A5F;
  --paper:        #F1EEE8;
  --copper:       #C9744D;   /* the on-dark accent — this whole site is dark */
  --mute:         #96A6A4;   /* 4.89:1 on Petrol */
  --hairline:     rgba(241, 238, 232, .10);
  --font:         'Jost', 'Futura', 'Century Gothic', system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; }

body {
  background: var(--petrol);
  color: var(--paper);
  font-family: var(--font);
  line-height: 1.6;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ---------------------------------------------------------------- stage */
#stage { position: fixed; inset: 0; }
#globe { display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; }
#globe.dragging { cursor: grabbing; }

/* ---------------------------------------------------------------- chrome */
.chrome {
  position: fixed; inset: 0;
  pointer-events: none;              /* only specific children take clicks */
  display: flex; flex-direction: column;
  padding: 34px 40px;
}
.chrome > * { pointer-events: auto; }

header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
header svg { width: 176px; height: auto; display: block; }

.byline {
  font-size: 10.5px; letter-spacing: .30em; text-transform: uppercase;
  color: var(--mute); padding-top: 6px; white-space: nowrap;
}

footer {
  margin-top: auto;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 20px;
}
.hint {
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--mute);
  transition: opacity .45s ease;
}
.contact {
  font-size: 12.5px; letter-spacing: .12em; color: var(--mute);
  text-decoration: none; border-bottom: 1px solid transparent; transition: color .2s, border-color .2s;
}
.contact:hover { color: var(--paper); border-bottom-color: var(--copper); }

/* ------------------------------------------------------------ breadcrumb */
.crumb {
  position: fixed; top: 96px; left: 40px;
  display: flex; align-items: center; gap: 12px;
  opacity: 0; transform: translateY(-6px); pointer-events: none;
  transition: opacity .45s ease, transform .45s ease;
}
.crumb.on { opacity: 1; transform: none; pointer-events: auto; }
.crumb button {
  font-family: var(--font); font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--mute); background: none; border: 0; cursor: pointer; padding: 6px 0;
  transition: color .2s;
}
.crumb button:hover { color: var(--paper); }
.crumb .sep { color: rgba(241,238,232,.28); font-size: 11px; }
.crumb .here { font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--paper); }

/* ---------------------------------------------------------------- panel */
.panel {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(460px, 100%);
  background: var(--petrol-deep);
  border-left: 1px solid var(--hairline);
  padding: 40px 44px;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform .5s cubic-bezier(.4, 0, .2, 1);
  display: flex; flex-direction: column;
}
.panel.on { transform: none; }

.panel .close {
  align-self: flex-end;
  background: none; border: 0; cursor: pointer; padding: 4px;
  color: var(--mute); font-family: var(--font); font-size: 11px;
  letter-spacing: .22em; text-transform: uppercase; transition: color .2s;
}
.panel .close:hover { color: var(--paper); }

.panel .eyebrow {
  font-size: 10.5px; letter-spacing: .30em; text-transform: uppercase;
  color: var(--mute); margin-top: 26px;
}
.panel h1 { font-size: 34px; font-weight: 400; letter-spacing: -.01em; line-height: 1.15; margin-top: 12px; }
/* flex-shrink:0 matters — the panel is a flex column, and without it a
   2.5px child collapses to nothing as soon as the content overflows. */
.panel .rule {
  width: 46px; height: 2.5px; background: var(--copper);
  margin: 22px 0 26px; flex: 0 0 auto;
}
.panel p { font-size: 15.5px; color: #C4D0CE; margin-bottom: 16px; }
.panel p strong { color: var(--paper); font-weight: 500; }

.panel dl { margin: 8px 0 26px; border-top: 1px solid var(--hairline); }
.panel dt {
  font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--mute);
  padding-top: 16px;
}
.panel dd { font-size: 15.5px; padding-bottom: 16px; border-bottom: 1px solid var(--hairline); }

.panel .cta { margin-top: auto; padding-top: 30px; }
.panel .cta a {
  display: inline-block; font-size: 14.5px; letter-spacing: .04em; color: var(--paper);
  text-decoration: none; border-bottom: 1px solid var(--copper); padding-bottom: 3px;
}
.panel .cta small {
  display: block; font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--mute); margin-top: 14px;
}

/* --------------------------------------------------------------- mobile */
@media (max-width: 720px) {
  .chrome { padding: 22px 22px; }
  header svg { width: 138px; }
  .byline { display: none; }
  .crumb { top: 74px; left: 22px; }
  .panel {
    width: 100%; top: auto; height: 74vh;
    border-left: 0; border-top: 1px solid var(--hairline);
    border-radius: 3px 3px 0 0;
    padding: 26px 26px 34px;
    transform: translateY(100%);
  }
  .panel.on { transform: none; }
  .panel h1 { font-size: 28px; }
  footer { flex-direction: column; align-items: flex-start; gap: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: .01ms !important; }
}