:root {
  --accent: #1687ff;
  --accent-2: #64d2ff;
  --background: #f5f8fc;
  --surface: #ffffff;
  --ink: #061225;
  --muted: #5f6f84;
  --ring: #cbe4ff;
  color-scheme: light;
}

* { box-sizing: border-box; }

html {
  min-height: 100%;
  background: var(--background);
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body {
  min-height: 100vh;
  margin: 0;
  background:
    radial-gradient(circle at 14% 18%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 26rem),
    radial-gradient(circle at 78% 72%, color-mix(in srgb, var(--accent-2) 12%, transparent), transparent 24rem),
    linear-gradient(145deg, color-mix(in srgb, var(--background) 90%, #000 10%), var(--background));
}

a { color: inherit; text-decoration: none; }
button { font: inherit; }

.shell {
  display: grid;
  min-height: 100vh;
  padding: 22px;
  place-items: center;
}

.card-stage {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  min-height: calc(100vh - 44px);
}

.namecard {
  position: relative;
  display: grid;
  overflow: hidden;
  width: min(92vw, 1180px, calc((100vh - 72px) * 1.72));
  aspect-ratio: 1.72;
  border: 1px solid color-mix(in srgb, var(--ring) 72%, transparent);
  border-radius: 18px;
  padding: 44px 50px;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--surface) 97%, transparent), color-mix(in srgb, var(--surface) 90%, var(--accent) 10%)),
    var(--surface);
  box-shadow:
    0 34px 110px color-mix(in srgb, #000 24%, transparent),
    inset 0 1px 0 color-mix(in srgb, #fff 46%, transparent);
}

.paper-line {
  position: absolute;
  inset: 18px;
  border: 1px solid color-mix(in srgb, var(--ring) 36%, transparent);
  border-radius: 12px;
  pointer-events: none;
}

.card-orbit {
  position: absolute;
  right: -120px;
  bottom: -150px;
  width: 360px;
  aspect-ratio: 1;
  border: 1px solid color-mix(in srgb, var(--accent) 38%, transparent);
  border-radius: 50%;
}

.card-orbit::before,
.card-orbit::after {
  position: absolute;
  content: "";
  border-radius: inherit;
  border: 1px solid color-mix(in srgb, var(--accent-2) 32%, transparent);
}

.card-orbit::before { inset: 58px; }
.card-orbit::after {
  inset: 116px;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
}

.card-brand {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  align-self: start;
  gap: 14px;
}

.mark {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--surface) 62%, #fff);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--ring) 38%, transparent);
}

.wordmark {
  color: var(--ink);
  font-size: 25px;
  font-weight: 800;
  letter-spacing: 0;
}

.accent-ai { color: var(--accent); }
.suffix-ai {
  margin-left: 3px;
  color: color-mix(in srgb, var(--ink) 72%, var(--muted));
}

.identity {
  position: relative;
  z-index: 1;
  align-self: center;
  max-width: 58%;
}

.eyebrow {
  margin: 0 0 18px;
  color: var(--accent);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

h1 {
  max-width: 10ch;
  margin: 0;
  color: var(--ink);
  font-size: 64px;
  font-weight: 800;
  line-height: 0.94;
  letter-spacing: 0;
}

.role {
  margin: 18px 0 0;
  color: color-mix(in srgb, var(--ink) 60%, var(--muted));
  font-size: 21px;
  font-weight: 800;
  line-height: 1.25;
}

.contact-list {
  position: absolute;
  z-index: 1;
  right: 50px;
  bottom: 48px;
  display: grid;
  gap: 14px;
  width: min(40%, 430px);
}

.contact-row {
  display: grid;
  grid-template-columns: 76px 1fr;
  gap: 14px;
  align-items: baseline;
  min-width: 0;
  padding: 0 0 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--ring) 70%, transparent);
}

.label {
  color: var(--accent);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

strong {
  display: block;
  overflow-wrap: anywhere;
  color: var(--ink);
  font-size: 18px;
  font-weight: 800;
  line-height: 1.25;
}

.address-lines {
  display: grid;
  gap: 6px;
}

.address-lines strong {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  font-size: 14px;
  line-height: 1.34;
}

.address-lines b {
  display: inline-block;
  color: var(--accent);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.summary {
  position: relative;
  z-index: 1;
  width: min(100%, 560px);
  margin: 14px 0 0;
  color: color-mix(in srgb, var(--ink) 72%, var(--muted));
  font-size: 15px;
  font-weight: 600;
  line-height: 1.48;
}

.utility-dock {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 10;
  opacity: 0.34;
  transition: opacity 240ms ease, transform 240ms ease;
}

.controls-visible .utility-dock,
.utility-dock:focus-within,
.utility-dock:hover {
  opacity: 1;
}

.shell:not(.controls-visible) .utility-dock {
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
}

.dock-trigger,
.primary,
.secondary,
.theme-tab {
  border: 1px solid color-mix(in srgb, var(--ring) 64%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 58%, transparent);
  color: var(--ink);
  box-shadow: 0 16px 42px color-mix(in srgb, #000 16%, transparent);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  cursor: pointer;
  font-weight: 800;
}

.dock-trigger {
  min-height: 42px;
  padding: 0 16px;
}

.dock-panel {
  position: absolute;
  right: 0;
  bottom: 54px;
  display: none;
  width: min(340px, calc(100vw - 36px));
  border: 1px solid color-mix(in srgb, var(--ring) 54%, transparent);
  border-radius: 18px;
  padding: 10px;
  background: color-mix(in srgb, var(--surface) 56%, transparent);
  box-shadow: 0 20px 70px color-mix(in srgb, #000 20%, transparent);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

.dock-panel[data-open="true"] { display: block; }

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

.theme-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 0 12px;
  color: color-mix(in srgb, var(--ink) 82%, var(--muted));
  font-size: 13px;
}

.theme-tab span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--swatch);
}

.theme-tab[data-active="true"] {
  border-color: color-mix(in srgb, var(--accent) 72%, var(--ring));
  color: var(--ink);
}

.actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 10px;
}

.primary,
.secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 12px;
  font-size: 13px;
}

.primary {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 84%, transparent);
  color: #fff;
}

body[data-cis="metrology"] .namecard {
  border-radius: 8px;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
}

body[data-cis="metrology"] .wordmark,
body[data-cis="metrology"] h1,
body[data-cis="metrology"] .role,
body[data-cis="metrology"] strong {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
}

body[data-cis="aperture"] .namecard {
  background:
    linear-gradient(128deg, color-mix(in srgb, var(--surface) 96%, transparent), color-mix(in srgb, var(--accent) 16%, var(--surface))),
    repeating-linear-gradient(90deg, transparent 0 44px, color-mix(in srgb, var(--ring) 16%, transparent) 44px 45px);
}

body[data-cis="folio"] h1 {
  max-width: 12ch;
  font-family: Newsreader, Georgia, serif;
  font-size: 62px;
  line-height: 0.98;
}

body[data-cis="foundry"] .namecard {
  border-radius: 6px;
  box-shadow:
    12px 12px 0 color-mix(in srgb, var(--accent) 78%, transparent),
    0 34px 110px color-mix(in srgb, #000 20%, transparent);
}

body[data-cis="spectrum"] .namecard {
  border-radius: 24px;
}

body[data-cis="metrology"],
body[data-cis="aperture"],
body[data-cis="spectrum"] {
  color-scheme: dark;
}

@media (min-width: 1120px) {
  h1 { font-size: 76px; }
  body[data-cis="folio"] h1 { font-size: 72px; }
}

@media (max-width: 980px) and (orientation: landscape) {
  .shell { padding: 14px; }
  .card-stage { min-height: calc(100vh - 28px); }
  .namecard {
    width: min(94vw, calc((100vh - 42px) * 1.72));
    padding: 28px 34px;
  }
  .paper-line { inset: 12px; }
  .mark { width: 44px; height: 44px; }
  .wordmark { font-size: 20px; }
  h1 { font-size: 44px; }
  body[data-cis="folio"] h1 { font-size: 44px; }
  .role { font-size: 16px; margin-top: 10px; }
  .eyebrow { margin-bottom: 10px; font-size: 10px; }
  .identity { max-width: 48%; }
  .contact-list { right: 34px; bottom: 30px; gap: 9px; }
  .contact-row { grid-template-columns: 62px 1fr; padding-bottom: 8px; }
  .label { font-size: 9px; }
  strong { font-size: 13px; }
  .address-lines { gap: 3px; }
  .address-lines strong { grid-template-columns: 43px minmax(0, 1fr); }
  .address-lines strong { font-size: 10px; line-height: 1.22; }
  .address-lines b { font-size: 8px; }
  .summary { display: none; }
}

@media (orientation: portrait) {
  .shell { padding: 18px; }
  .card-stage { min-height: calc(100vh - 36px); }
  .namecard {
    align-content: start;
    width: min(92vw, 460px, calc((100vh - 74px) * 0.62));
    aspect-ratio: 0.62;
    padding: 34px 30px;
  }
  .paper-line { inset: 14px; }
  .card-orbit {
    right: -140px;
    bottom: -90px;
    width: 310px;
  }
  .card-brand {
    display: grid;
    justify-items: center;
    align-self: start;
    gap: 12px;
  }
  .mark { width: 70px; height: 70px; }
  .wordmark { font-size: 24px; }
  .identity {
    align-self: start;
    max-width: none;
    margin-top: 42px;
  }
  .eyebrow {
    margin-bottom: 14px;
    font-size: 11px;
  }
  h1 {
    max-width: 9ch;
    font-size: 48px;
  }
  body[data-cis="folio"] h1 { font-size: 47px; }
  .role {
    margin-top: 14px;
    font-size: 18px;
  }
  .contact-list {
    position: relative;
    right: auto;
    bottom: auto;
    width: 100%;
    margin-top: 30px;
    gap: 12px;
  }
  .contact-row {
    grid-template-columns: 70px 1fr;
    padding-bottom: 12px;
  }
  strong { font-size: 16px; }
  .summary { display: none; }
  .address-lines { gap: 5px; }
  .address-lines strong { font-size: 13px; }
  .address-lines strong { grid-template-columns: 56px minmax(0, 1fr); }
}

@media (max-width: 430px) and (orientation: portrait) {
  .shell { padding: 12px; }
  .card-stage { min-height: calc(100vh - 24px); }
  .namecard {
    width: min(94vw, calc((100vh - 60px) * 0.62));
    padding: 28px 24px;
    border-radius: 16px;
  }
  .mark { width: 58px; height: 58px; }
  .wordmark { font-size: 21px; }
  .identity { margin-top: 32px; }
  h1 { font-size: 40px; }
  body[data-cis="folio"] h1 { font-size: 39px; }
  .role { font-size: 16px; }
  .contact-list { margin-top: 26px; gap: 9px; }
  .contact-row { grid-template-columns: 62px 1fr; }
  .label { font-size: 10px; }
  strong { font-size: 14px; }
  .address-lines strong { font-size: 12px; }
  .address-lines strong { grid-template-columns: 52px minmax(0, 1fr); }
  .address-lines b { font-size: 9px; }
}