:root {
  color-scheme: light dark;
  --bg: #f7f8fc;
  --surface: #ffffff;
  --surface-soft: #eef1f8;
  --text: #121826;
  --muted: #5f6878;
  --border: rgba(18, 24, 38, .11);
  --nav-bg: rgba(255,255,255,.82);
  --accent: #6d4aff;
  --accent-2: #00a8a8;
  --accent-3: #d946ef;
  --hero-a: #111831;
  --hero-b: #17204a;
  --hero-text: #f7f8ff;
  --hero-muted: #cbd2e6;
  --shadow: 0 24px 70px rgba(36, 40, 73, .12);
  --radius: 24px;
  --shell: 1180px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #090c14;
    --surface: #111622;
    --surface-soft: #171d2b;
    --text: #f3f5fb;
    --muted: #aeb6c7;
    --border: rgba(255,255,255,.10);
    --nav-bg: rgba(9,12,20,.84);
    --shadow: 0 24px 70px rgba(0,0,0,.35);
  }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
}
a { color: inherit; }
img { max-width: 100%; }
.shell { width: min(calc(100% - 40px), var(--shell)); margin-inline: auto; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.skip-link { position:absolute; left:-9999px; top:12px; z-index:999; padding:10px 16px; background:#fff; color:#111; border-radius:8px; }
.skip-link:focus { left:12px; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(18px);
  background: var(--nav-bg);
  border-bottom: 1px solid var(--border);
}
.nav-wrap { min-height: 74px; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.brand { display:inline-flex; align-items:center; gap:11px; text-decoration:none; }
.brand-mark {
  display:grid; place-items:center; width:38px; height:38px; border-radius:12px;
  font-weight:900; color:#fff; background:linear-gradient(135deg,var(--accent),var(--accent-3));
  box-shadow:0 8px 26px rgba(109,74,255,.25);
}
.brand strong { display:block; line-height:1; font-size:1.08rem; }
.brand small { display:block; color:var(--muted); font-size:.72rem; margin-top:4px; letter-spacing:.08em; text-transform:uppercase; }
.site-nav { display:flex; align-items:center; gap:25px; }
.site-nav a { text-decoration:none; font-size:.93rem; font-weight:650; color:var(--muted); }
.site-nav a:hover { color:var(--text); }
.site-nav .nav-cta { color:#fff; padding:10px 16px; border-radius:999px; background:var(--accent); }
.menu-toggle { display:none; border:0; background:transparent; padding:8px; }
.menu-toggle span:not(.sr-only) { display:block; width:24px; height:2px; margin:5px; background:var(--text); }

.hero {
  position:relative; overflow:hidden; color:var(--hero-text);
  background:
    radial-gradient(circle at 20% 0%, rgba(109,74,255,.25), transparent 35%),
    linear-gradient(135deg,var(--hero-a),var(--hero-b));
}
.hero-grid { min-height:680px; padding:92px 0; display:grid; grid-template-columns:1.05fr .95fr; align-items:center; gap:80px; }
.hero-copy { position:relative; z-index:2; }
.eyebrow { display:inline-block; font-size:.75rem; line-height:1; font-weight:850; letter-spacing:.16em; text-transform:uppercase; color:var(--accent-2); margin-bottom:20px; }
.hero .eyebrow { color:#75e4df; }
.hero h1 { margin:0; font-size:clamp(4rem,8vw,7rem); line-height:.88; letter-spacing:-.065em; max-width:760px; }
.hero h1 span { color:#9d8cff; }
.hero-lead { color:var(--hero-muted); font-size:1.16rem; max-width:670px; margin:28px 0 0; }
.hero-actions { display:flex; gap:12px; flex-wrap:wrap; margin-top:34px; }
.button { display:inline-flex; align-items:center; justify-content:center; min-height:50px; padding:0 22px; border-radius:12px; font-weight:800; text-decoration:none; transition:transform .2s ease, box-shadow .2s ease; }
.button:hover { transform:translateY(-2px); }
.button-primary { color:#fff; background:linear-gradient(135deg,var(--accent),#8b5cf6); box-shadow:0 14px 30px rgba(109,74,255,.3); }
.button-secondary { border:1px solid rgba(255,255,255,.22); background:rgba(255,255,255,.08); color:#fff; }
.button-secondary.light { background:#fff; color:#111831; border:0; }
.quick-points { display:flex; flex-wrap:wrap; gap:18px 24px; margin-top:32px; color:#b9c2d9; font-size:.86rem; }

.terminal-card {
  position:relative; z-index:2; border:1px solid rgba(255,255,255,.16); border-radius:22px;
  overflow:hidden; background:rgba(6,10,24,.68); box-shadow:0 35px 100px rgba(0,0,0,.34);
  transform:rotate(1.2deg);
}
.terminal-top { height:52px; display:flex; align-items:center; gap:7px; padding:0 17px; background:rgba(255,255,255,.055); border-bottom:1px solid rgba(255,255,255,.08); }
.terminal-top span { width:10px; height:10px; border-radius:50%; background:rgba(255,255,255,.23); }
.terminal-top strong { margin-left:auto; margin-right:auto; transform:translateX(-17px); color:#abb5cf; font-size:.82rem; }
.terminal-body { min-height:330px; padding:28px; font-family:"SFMono-Regular",Consolas,"Liberation Mono",monospace; font-size:.84rem; color:#dbe2f5; }
.terminal-body p { margin:0 0 17px; }
.terminal-body time { color:#66718e; }
.terminal-body b { color:#9d8cff; }
.terminal-input { display:flex; gap:8px; align-items:center; margin-top:52px; color:#75e4df; }
.cursor { display:inline-block; width:8px; height:17px; background:#75e4df; animation:blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity:0; } }

.section { padding:95px 0; }
.section-heading { max-width:720px; margin-bottom:42px; }
.section-heading.centered { text-align:center; margin-inline:auto; }
.section-heading h2, .split-section h2, .preserve-card h2 { font-size:clamp(2.25rem,5vw,4.2rem); letter-spacing:-.055em; line-height:1; margin:0 0 20px; }
.section-heading p { color:var(--muted); font-size:1.05rem; margin:0; }
.card-grid { display:grid; gap:20px; }
.card-grid.three { grid-template-columns:repeat(3,1fr); }
.feature-card { padding:30px; border:1px solid var(--border); border-radius:var(--radius); background:var(--surface); box-shadow:var(--shadow); }
.card-icon { width:54px; height:54px; display:grid; place-items:center; font-size:1.55rem; background:var(--surface-soft); border-radius:16px; margin-bottom:26px; }
.card-kicker { display:block; color:var(--accent); font-size:.68rem; font-weight:850; letter-spacing:.14em; margin-bottom:8px; }
.feature-card h3 { margin:0 0 10px; font-size:1.55rem; letter-spacing:-.03em; }
.feature-card p { color:var(--muted); margin:0 0 23px; }
.feature-card a, .text-link { color:var(--accent); text-decoration:none; font-weight:800; }

.split-section { background:var(--surface-soft); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.split-grid { display:grid; grid-template-columns:.8fr 1.2fr; gap:90px; align-items:start; }
.large-copy { color:var(--muted); font-size:1.15rem; margin:0 0 25px; max-width:540px; }
.benefit-list article { display:grid; grid-template-columns:70px 1fr; gap:20px; padding:26px 0; border-bottom:1px solid var(--border); }
.benefit-list article:first-child { padding-top:0; }
.benefit-list article > span { font-weight:900; color:var(--accent); font-size:.78rem; letter-spacing:.1em; }
.benefit-list h3 { margin:0 0 5px; font-size:1.12rem; }
.benefit-list p { margin:0; color:var(--muted); }

.preserve-card {
  display:grid; grid-template-columns:1.25fr .75fr; gap:55px; align-items:center;
  padding:60px; border-radius:32px; color:#fff;
  background:
    radial-gradient(circle at 90% 20%,rgba(217,70,239,.24),transparent 28%),
    linear-gradient(135deg,#17122c,#21154a 60%,#101a34);
  box-shadow:0 30px 80px rgba(29,21,64,.2);
}
.preserve-copy p { color:#cfd4e5; max-width:650px; margin:0 0 28px; }
.archive-mark { display:grid; place-items:center; aspect-ratio:1; border:1px solid rgba(255,255,255,.16); border-radius:50%; background:rgba(255,255,255,.05); }
.archive-mark span { font-weight:950; font-size:4.5rem; letter-spacing:-.08em; line-height:1; }
.archive-mark small { margin-top:-50%; color:#aeb7d2; letter-spacing:.16em; }

.steps { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; max-width:930px; margin:45px auto; }
.steps > div { text-align:center; padding:30px 24px; border:1px solid var(--border); border-radius:20px; background:var(--surface); }
.steps span { display:grid; place-items:center; width:36px; height:36px; border-radius:50%; background:var(--surface-soft); color:var(--accent); font-weight:900; margin:0 auto 17px; }
.steps h3 { margin:0 0 6px; }
.steps p { color:var(--muted); margin:0; font-size:.92rem; }
.center-action { text-align:center; }
.center-action .button { margin-bottom:12px; }
.center-action p { margin:0; color:var(--muted); font-size:.88rem; }

.site-footer { padding:70px 0 30px; background:#070a11; color:#e9edf7; }
.footer-grid { display:grid; grid-template-columns:.8fr 1.2fr; gap:90px; }
.footer-brand small { color:#8892a9; }
.footer-grid > div:first-child > p { color:#8892a9; max-width:310px; }
.footer-links { display:grid; grid-template-columns:repeat(3,1fr); gap:30px; }
.footer-links strong { display:block; font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; margin-bottom:14px; color:#fff; }
.footer-links a { display:block; color:#9099ad; text-decoration:none; margin:8px 0; font-size:.92rem; }
.footer-links a:hover { color:#fff; }
.footer-bottom { display:flex; justify-content:space-between; gap:25px; padding-top:28px; margin-top:45px; border-top:1px solid rgba(255,255,255,.1); color:#737d93; font-size:.78rem; }

@media (max-width: 900px) {
  .site-nav {
    display:none; position:absolute; top:74px; left:20px; right:20px; padding:18px;
    background:var(--surface); border:1px solid var(--border); border-radius:18px; box-shadow:var(--shadow);
    flex-direction:column; align-items:stretch;
  }
  .site-nav.open { display:flex; }
  .site-nav a { padding:9px; }
  .site-nav .nav-cta { text-align:center; color:#fff; }
  .menu-toggle { display:block; }
  .hero-grid { grid-template-columns:1fr; gap:55px; min-height:auto; padding:80px 0; }
  .hero h1 { font-size:clamp(4rem,17vw,6.5rem); }
  .terminal-card { transform:none; }
  .card-grid.three, .steps { grid-template-columns:1fr; }
  .split-grid, .preserve-card, .footer-grid { grid-template-columns:1fr; gap:45px; }
  .archive-mark { max-width:300px; width:100%; margin:auto; }
}
@media (max-width: 600px) {
  .shell { width:min(calc(100% - 28px), var(--shell)); }
  .section { padding:72px 0; }
  .hero-grid { padding:65px 0; }
  .hero h1 { font-size:clamp(3.7rem,20vw,5rem); }
  .hero-actions .button { width:100%; }
  .terminal-body { padding:20px; font-size:.72rem; min-height:280px; }
  .preserve-card { padding:34px 24px; border-radius:24px; }
  .footer-links { grid-template-columns:1fr 1fr; }
  .footer-bottom { flex-direction:column; }
}

/* Official Morphie branding – v3 */
.brand-logo-link {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
}
.morphie-logo {
  display: block;
  width: 146px;
  height: auto;
  object-fit: contain;
}
.footer-logo {
  width: 170px;
}
.site-header .morphie-logo {
  filter: drop-shadow(0 5px 14px rgba(0,0,0,.18));
}

/* A dark header keeps the official white/yellow logo consistent in light and dark mode. */
.site-header {
  background: rgba(7,10,17,.96);
  border-bottom-color: rgba(255,255,255,.09);
}
.nav-wrap {
  min-height: 72px;
}
.site-header .site-nav {
  gap: 28px;
}
.site-header .site-nav a {
  color: #d6dbea;
}
.site-header .site-nav a:hover {
  color: #ffffff;
}

/* Violet CTA so the Morphie yellow remains a brand accent rather than competing with the logo. */
.site-header .site-nav .nav-cta {
  color: #ffffff;
  background: linear-gradient(135deg, #6d4aff, #8b5cf6);
  box-shadow: 0 10px 28px rgba(109,74,255,.28);
  padding-inline: 20px;
}
.site-header .site-nav .nav-cta:hover {
  color: #ffffff;
  box-shadow: 0 12px 34px rgba(109,74,255,.38);
}

.site-header .menu-toggle span:not(.sr-only) {
  background: #ffffff;
}

/* Keep yellow as a subtle Morphie accent. */
.site-nav a:not(.nav-cta) {
  position: relative;
}
.site-nav a:not(.nav-cta)::after {
  content: "";
  position: absolute;
  left: 9px;
  right: 9px;
  bottom: 3px;
  height: 2px;
  border-radius: 999px;
  background: #ffd400;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .18s ease;
}
.site-nav a:not(.nav-cta):hover::after {
  transform: scaleX(1);
}

@media (max-width: 900px) {
  .site-header .site-nav {
    background: #0d111b;
    border-color: rgba(255,255,255,.10);
    gap: 6px;
  }
  .site-nav a:not(.nav-cta)::after {
    display: none;
  }
}
@media (max-width: 600px) {
  .morphie-logo {
    width: 132px;
  }
  .nav-wrap {
    min-height: 68px;
  }
}


/* Inner pages */
.page-hero {
  color: var(--hero-text);
  background:
    radial-gradient(circle at 18% 0%, rgba(109,74,255,.24), transparent 34%),
    linear-gradient(135deg,var(--hero-a),var(--hero-b));
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.page-hero-inner {
  padding: 92px 0 78px;
  max-width: 900px;
}
.page-hero h1 {
  margin: 0 0 20px;
  font-size: clamp(3.3rem, 8vw, 6rem);
  line-height: .94;
  letter-spacing: -.06em;
}
.page-hero p {
  max-width: 760px;
  color: var(--hero-muted);
  font-size: 1.12rem;
  margin: 0;
}
.preserve-page-hero {
  background:
    radial-gradient(circle at 80% 10%, rgba(217,70,239,.22), transparent 26%),
    radial-gradient(circle at 16% 0%, rgba(109,74,255,.28), transparent 34%),
    linear-gradient(135deg,#15122d,#171c46);
}
.link-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.link-grid a {
  display: block;
  padding: 22px 24px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  text-decoration: none;
  font-weight: 800;
  box-shadow: var(--shadow);
}
.link-grid a:hover { transform: translateY(-2px); }
.profile-card {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 26px;
  align-items: center;
  padding: 34px;
  border-radius: 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  max-width: 760px;
}
.profile-badge {
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  border-radius: 22px;
  background: linear-gradient(135deg, #6d4aff, #8b5cf6);
  color: #fff;
  font-size: 2rem;
  font-weight: 950;
}
.profile-card h2 { margin: 0 0 5px; font-size: 2rem; }
.profile-card p { margin: 0; color: var(--muted); }
.team-help { margin-top: 55px; }
.status-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 18px;
}
.status-card {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  padding: 26px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface);
}
.status-dot {
  width: 13px;
  height: 13px;
  margin-top: 6px;
  border-radius: 50%;
  background: #31c76a;
  box-shadow: 0 0 0 6px rgba(49,199,106,.10);
}
.status-card small { color: var(--muted); font-weight: 850; letter-spacing: .12em; }
.status-card h3 { margin: 4px 0 5px; font-size: 1.35rem; }
.status-card p { margin: 0; color: var(--muted); }
.status-action { margin-top: 32px; }

@media (max-width: 900px) {
  .link-grid, .status-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .page-hero-inner { padding: 72px 0 60px; }
  .link-grid, .status-grid { grid-template-columns: 1fr; }
  .profile-card { grid-template-columns: 1fr; }
}


/* Legal pages */
.legal-hero .page-hero-inner { max-width: 820px; }
.legal-wrap { max-width: 900px; }
.legal-section {
  display: grid;
  grid-template-columns: 62px 1fr;
  gap: 22px;
  padding: 30px 0;
  border-bottom: 1px solid var(--border);
}
.legal-section:first-child { padding-top: 0; }
.legal-number {
  font-size: .75rem;
  font-weight: 900;
  letter-spacing: .12em;
  color: var(--accent);
  padding-top: 7px;
}
.legal-section h2 {
  margin: 0 0 10px;
  font-size: 1.45rem;
  letter-spacing: -.03em;
}
.legal-section p {
  margin: 0;
  color: var(--muted);
}
.legal-section a {
  color: var(--accent);
  font-weight: 700;
}
.footer-legal {
  display: flex;
  align-items: center;
  gap: 10px;
}
.footer-legal a {
  color: #9ba4b8;
  text-decoration: none;
}
.footer-legal a:hover { color: #fff; }

@media (max-width: 700px) {
  .legal-section { grid-template-columns: 1fr; gap: 8px; }
  .footer-bottom { align-items: flex-start; }
}


/* Content-complete page components */
.compact-section { padding-top: 78px; }
.inner-actions { margin-top: 28px; }
.page-points { color: #cbd2e6; }
.card-grid.two { grid-template-columns: repeat(2,1fr); }
.card-grid.four { grid-template-columns: repeat(4,1fr); }
.room-status { font-size: .72rem; font-weight: 850; color: #35c96f; margin-bottom: 16px; }
.command-panel, .prose-card {
  background: var(--surface); border:1px solid var(--border); border-radius:24px; padding:30px; box-shadow:var(--shadow);
}
.command-panel code, .command-list code, .command-grid code, .host-grid code {
  display:block; font-family:"SFMono-Regular",Consolas,monospace; overflow-wrap:anywhere;
}
.command-panel code { padding:14px 16px; margin:7px 0 20px; background:var(--surface-soft); border-radius:10px; color:var(--accent); font-weight:800; }
.command-label { display:block; font-size:.68rem; letter-spacing:.14em; font-weight:900; color:var(--muted); }
.command-panel p { color:var(--muted); margin-bottom:0; }
.tag-row { display:flex; gap:7px; flex-wrap:wrap; margin:0 0 22px; }
.tag-row span { font-size:.7rem; font-weight:800; padding:5px 9px; border-radius:999px; background:var(--surface-soft); color:var(--muted); }
.mini-card { padding:24px; border:1px solid var(--border); border-radius:18px; background:var(--surface); }
.mini-card strong { display:block; margin-bottom:7px; }
.mini-card p { color:var(--muted); margin:0; }
.notice-box { padding:22px 24px; border:1px solid var(--border); border-radius:16px; background:var(--surface); max-width:920px; margin-inline:auto; }
.notice-box p { margin:5px 0 0; color:var(--muted); }
.notice-box.spaced { margin-top:28px; max-width:none; }
.cta-panel { padding:48px; border-radius:28px; background:var(--surface); border:1px solid var(--border); box-shadow:var(--shadow); }
.cta-panel h2 { font-size:clamp(2rem,4vw,3.4rem); margin:0 0 12px; letter-spacing:-.045em; }
.cta-panel > p { color:var(--muted); max-width:720px; }
.dark-outline { border:1px solid var(--border); color:var(--text); background:var(--surface-soft); }
.section-cta { margin-top:30px; }
.connection-box { display:grid; grid-template-columns:1.5fr repeat(3,1fr); gap:0; border:1px solid var(--border); border-radius:22px; background:var(--surface); overflow:hidden; box-shadow:var(--shadow); }
.connection-box > div { padding:24px; border-right:1px solid var(--border); }
.connection-box > div:last-child { border-right:0; }
.connection-box h3 { margin:0; font-size:1.65rem; }
.connection-box small { display:block; color:var(--muted); font-weight:800; margin-bottom:5px; }
.connection-box strong { font-size:1.1rem; }
.command-list { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.command-list article { padding:23px; border:1px solid var(--border); border-radius:17px; background:var(--surface); }
.command-list h3 { margin:0 0 10px; font-size:1rem; }
.command-list code { padding:11px 13px; border-radius:8px; background:var(--surface-soft); color:var(--accent); font-weight:800; }
.command-list p { color:var(--muted); font-size:.9rem; margin-bottom:0; }
.command-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.command-grid > div { padding:20px; border:1px solid var(--border); border-radius:15px; background:var(--surface); }
.command-grid strong { display:block; margin-bottom:8px; }
.command-grid code { color:var(--accent); }
.story-layout { display:grid; grid-template-columns:1.4fr .6fr; gap:70px; align-items:start; }
.story-main h2 { font-size:clamp(2.2rem,5vw,4rem); line-height:1; letter-spacing:-.05em; margin:0 0 25px; }
.story-main p, .prose-card p { color:var(--muted); }
.story-aside { padding:28px; border:1px solid var(--border); border-radius:22px; background:var(--surface); display:grid; gap:6px; box-shadow:var(--shadow); }
.story-aside strong { font-size:.7rem; letter-spacing:.12em; color:var(--accent); margin-top:12px; }
.story-aside strong:first-child { margin-top:0; }
.story-aside span { font-weight:800; }
.timeline { border-left:2px solid var(--border); margin-left:18px; }
.timeline article { display:grid; grid-template-columns:90px 1fr; gap:24px; position:relative; padding:0 0 35px 34px; }
.timeline article::before { content:""; position:absolute; width:12px; height:12px; border-radius:50%; background:var(--accent); left:-7px; top:6px; box-shadow:0 0 0 5px var(--bg); }
.timeline article > span { font-weight:900; color:var(--accent); }
.timeline h3 { margin:0 0 4px; }
.timeline p { margin:0; color:var(--muted); }
.host-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.host-grid > div { padding:24px; border:1px solid var(--border); border-radius:18px; background:var(--surface); }
.host-grid strong { display:block; margin-bottom:10px; }
.host-grid code { color:var(--muted); margin:4px 0; }
.server-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.server-grid article { display:grid; grid-template-columns:auto 1fr auto; gap:17px; align-items:start; padding:24px; border:1px solid var(--border); border-radius:18px; background:var(--surface); }
.server-dot { width:12px; height:12px; border-radius:50%; background:#31c76a; margin-top:8px; box-shadow:0 0 0 5px rgba(49,199,106,.1); }
.server-grid small { color:var(--muted); font-weight:850; letter-spacing:.1em; }
.server-grid h3 { margin:3px 0; }
.server-grid p { color:var(--muted); margin:5px 0 0; font-size:.86rem; }
.server-grid a { color:var(--accent); font-weight:800; text-decoration:none; }
.status-disclaimer { color:var(--muted); font-size:.82rem; margin-top:18px; }
.team-profile { display:grid; grid-template-columns:330px 1fr; gap:50px; padding:38px; border:1px solid var(--border); border-radius:30px; background:var(--surface); box-shadow:var(--shadow); }
.team-photo { display:block; width:100%; aspect-ratio:1; object-fit:cover; border-radius:22px; }
.team-profile-copy h2 { font-size:2.8rem; margin:4px 0 0; letter-spacing:-.04em; }
.team-role { color:var(--accent); font-weight:850; margin-top:0; }
.profile-facts { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin:24px 0; }
.profile-facts div { padding:14px; background:var(--surface-soft); border-radius:12px; }
.profile-facts small { display:block; color:var(--muted); font-weight:850; letter-spacing:.1em; }
.profile-facts strong { display:block; margin-top:3px; }
.team-do { box-shadow:none; }
.team-do h3 { margin-top:0; }
.partner-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.partner-grid a { display:block; padding:23px; border:1px solid var(--border); border-radius:16px; background:var(--surface); color:var(--text); text-decoration:none; box-shadow:var(--shadow); }
.partner-grid strong { display:block; margin-bottom:5px; }
.partner-grid span { display:block; color:var(--muted); font-size:.9rem; }
.partner-grid a:hover { transform:translateY(-2px); }
.partner-note { color:var(--muted); font-size:.84rem; margin-top:20px; }

@media (max-width:900px) {
  .card-grid.two, .card-grid.four, .command-list, .command-grid, .host-grid, .server-grid, .partner-grid { grid-template-columns:1fr 1fr; }
  .connection-box { grid-template-columns:1fr 1fr; }
  .connection-box > div { border-bottom:1px solid var(--border); }
  .story-layout, .team-profile { grid-template-columns:1fr; }
  .team-photo-wrap { max-width:360px; }
}
@media (max-width:600px) {
  .card-grid.two, .card-grid.four, .command-list, .command-grid, .host-grid, .server-grid, .partner-grid, .connection-box { grid-template-columns:1fr; }
  .connection-box > div { border-right:0; }
  .cta-panel { padding:30px 24px; }
  .timeline article { grid-template-columns:1fr; gap:5px; }
  .team-profile { padding:24px; }
}


.games-help-cta { margin-top: 46px; }


/* V5 refinements */
.team-profile {
  grid-template-columns: 245px 1fr;
  gap: 42px;
  align-items: center;
}
.team-photo-wrap {
  max-width: 245px;
}
.team-photo {
  border-radius: 20px;
}
.team-profile-copy h2 {
  font-size: 2.5rem;
}
.profile-facts {
  max-width: 650px;
}
.team-do {
  max-width: 760px;
}

.partner-grid a[target="_blank"]::after {
  content: " ↗";
  font-size: .85em;
  color: var(--accent);
}
.partner-grid a[target="_blank"]:hover {
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
}

.host-link {
  display: inline-block;
  text-decoration: none;
  border-radius: 8px;
}
.host-link code {
  transition: color .18s ease, text-decoration-color .18s ease;
}
.host-link:hover code {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.legacy-tls-note {
  margin-top: 24px;
}

@media (max-width: 900px) {
  .team-profile {
    grid-template-columns: 210px 1fr;
  }
  .team-photo-wrap {
    max-width: 210px;
  }
}
@media (max-width: 700px) {
  .team-profile {
    grid-template-columns: 1fr;
    align-items: start;
  }
  .team-photo-wrap {
    max-width: 220px;
  }
}


/* V6 refinements */

/* Give legacy IRC hostnames their own line/spacing so they do not run together. */
.host-grid .host-link {
  display: block;
  width: fit-content;
  margin: 6px 0;
}
.host-grid .host-link code {
  display: inline-block;
}

/* Lift the Team portrait so it aligns more naturally with the profile heading. */
@media (min-width: 901px) {
  .team-photo-wrap {
    align-self: start;
    margin-top: -54px;
  }
}

/* Slightly softer adjustment on medium screens. */
@media (min-width: 701px) and (max-width: 900px) {
  .team-photo-wrap {
    align-self: start;
    margin-top: -28px;
  }
}

/* On mobile, keep the portrait in normal document flow. */
@media (max-width: 700px) {
  .team-photo-wrap {
    margin-top: 0;
  }
}


/* V7 refinements */

/* Team portrait: keep current size, but keep it fully inside the card and align near CURRENT TEAM. */
@media (min-width: 901px) {
  .team-photo-wrap {
    margin-top: -4px;
  }
}
@media (min-width: 701px) and (max-width: 900px) {
  .team-photo-wrap {
    margin-top: 0;
  }
}


/* V9 history archive */
.history-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}
.history-card {
  display:block;
  padding:28px;
  border:1px solid var(--border);
  border-radius:20px;
  background:var(--surface);
  color:var(--text);
  text-decoration:none;
  box-shadow:var(--shadow);
}
.history-card h2 {
  margin:4px 0 12px;
  font-size:1.45rem;
  letter-spacing:-.03em;
}
.history-card p { color:var(--muted); }
.history-card > span:last-child { color:var(--accent); font-weight:850; }
.history-card:hover { transform:translateY(-2px); }
.history-article {
  max-width:850px;
}
.history-section {
  padding:0 0 34px;
  margin-bottom:34px;
  border-bottom:1px solid var(--border);
}
.history-section h2 {
  font-size:clamp(1.7rem,4vw,2.5rem);
  letter-spacing:-.04em;
  margin:0 0 16px;
}
.history-section p {
  color:var(--muted);
  font-size:1.03rem;
}
.history-back { padding-top:8px; }
.history-cta { margin-top:0; }

@media (max-width:900px) {
  .history-grid { grid-template-columns:1fr; }
}

.history-list {
  color: var(--muted);
  padding-left: 1.4rem;
  margin: 14px 0 0;
}
.history-list li { margin: 8px 0; line-height: 1.7; }
.history-article code { white-space: nowrap; }