/* bytedev.co.uk — "Homebrew signal" (2026-10-21 redesign). Fonts self-hosted in /fonts. */
@import url("/fonts/fonts.css");

:root, [data-theme="light"] {
  --bg: #F3F4F1; --surface: #FFFFFF; --ink: #16181D; --text2: #3A3E46; --muted: #5B606B;
  --line: #D9DBD5; --line2: #C9CCC4; --ph: #8A8F98; --link: #1F4FD1;
  --accent: #F5C518; --on-accent: #16181D;
  color-scheme: light;
}
[data-theme="dark"] {
  --bg: #121418; --surface: #1B1E24; --ink: #EEF0EA; --text2: #C9CDD3; --muted: #A9AEB6;
  --line: #2E323B; --line2: #4A4F5A; --ph: #6B7180; --link: #9DB7FF;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 400 16px/1.5 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
}
a { color: var(--link); }
a:hover { color: var(--ink); }
img, video { max-width: 100%; }
:focus-visible { outline: 3px solid var(--link); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { max-width: 1200px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }
.mono { font-family: 'IBM Plex Mono', ui-monospace, monospace; }
.display { font-family: 'Bricolage Grotesque', system-ui, sans-serif; font-weight: 800; letter-spacing: -0.03em; }

/* ── Buttons ─────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 12px 18px;
  font: 600 15px 'IBM Plex Sans', sans-serif; text-decoration: none; cursor: pointer; border: none;
  background: var(--ink); color: var(--bg);
}
.btn:hover { color: var(--bg); opacity: .9; }
.btn-lg { min-height: 52px; padding: 16px 24px; font-size: 17px; }
.btn-accent { background: var(--accent); color: var(--on-accent); }
.btn-accent:hover { color: var(--on-accent); }
.icon-btn {
  width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 0;
  background: transparent; border: 1.5px solid var(--line2); color: var(--ink); cursor: pointer;
}
.theme-icon-sun { display: none; }
[data-theme="dark"] .theme-icon-sun { display: block; }
[data-theme="dark"] .theme-icon-moon { display: none; }

/* ── Nav ─────────────────────────────────────────────────── */
.site-header { border-bottom: 1px solid var(--line); }
.site-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; padding-top: 18px; padding-bottom: 18px; }
.wordmark { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); text-decoration: none; }
.wordmark:hover { color: var(--ink); }
.wordmark-text { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 26px; letter-spacing: -0.03em; line-height: 1; }
.wordmark-dot { width: 10px; height: 10px; background: var(--accent); margin-top: 8px; }
.nav-links { display: flex; flex-wrap: wrap; gap: 8px 22px; flex: 1 1 auto; font-size: 15px; }
.nav-links a { color: var(--ink); text-decoration: none; padding: 6px 0; }
.nav-links a:hover { text-decoration: underline; }

/* ── Hero ────────────────────────────────────────────────── */
.hero { display: flex; flex-wrap: wrap; gap: 56px; align-items: flex-start; padding-top: 72px; padding-bottom: 88px; }
.hero-copy { flex: 1 1 420px; min-width: 0; padding-top: 24px; }
.kicker { font-family: 'IBM Plex Mono', monospace; font-size: 13px; color: var(--muted); margin: 0 0 20px; }
.hero h1 { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: clamp(40px, 6vw, 64px); line-height: 1; letter-spacing: -0.035em; margin: 0 0 28px; }
.mark { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: .14em; text-underline-offset: .1em; text-decoration-skip-ink: none; }
.lede { font-size: 19px; line-height: 1.55; color: var(--text2); margin: 0 0 36px; max-width: 520px; }
.hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; }
.hero-cta .text-link { font-weight: 600; color: var(--ink); }

/* ── Demo (chat.js renders into #messages) ───────────────── */
.demo { flex: 1 1 460px; min-width: 0; background: var(--surface); border: 1.5px solid var(--ink); box-shadow: 8px 8px 0 var(--ink); display: flex; flex-direction: column; }
.demo-bar { display: flex; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1.5px solid var(--ink); font-family: 'IBM Plex Mono', monospace; font-size: 13px; }
.demo-bar span:last-child { color: var(--muted); }
#messages { padding: 20px; display: flex; flex-direction: column; gap: 16px; font-size: 15px; line-height: 1.5; max-height: 460px; min-height: 220px; overflow-y: auto; }
.msg { display: flex; gap: 12px; align-items: flex-start; }
.msg-label { display: none; }
.msg.byte::before {
  content: "b"; flex: none; width: 28px; height: 28px; background: var(--accent); color: var(--on-accent);
  font: 800 15px 'Bricolage Grotesque', sans-serif; display: flex; align-items: center; justify-content: center;
}
.msg.user { justify-content: flex-end; }
.msg.user .msg-body { background: var(--ink); color: var(--bg); padding: 10px 14px; max-width: 80%; }
.msg.byte .msg-body { min-width: 0; overflow-wrap: anywhere; }
.msg-body img { border: 1px solid var(--ink); }
.msg-body code { font-family: 'IBM Plex Mono', monospace; font-size: 13px; background: var(--bg); padding: 1px 5px; }
.msg-body.thinking { color: var(--muted); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 20px 14px; }
.chip { font: 500 14px 'IBM Plex Sans', sans-serif; background: var(--bg); color: var(--ink); border: 1px solid var(--line2); padding: 10px 12px; min-height: 44px; cursor: pointer; }
.chip:hover { border-color: var(--ink); }
.chat-input-row { display: flex; border-top: 1.5px solid var(--ink); }
#chat-input { flex: 1; min-width: 0; border: none; padding: 16px; font: 400 16px 'IBM Plex Sans', sans-serif; background: transparent; color: var(--ink); }
#chat-input:focus { outline: none; }
.chat-input-row:focus-within { box-shadow: inset 0 0 0 2px var(--link); }
#send-btn { border: none; border-left: 1.5px solid var(--ink); background: var(--accent); color: var(--on-accent); font: 600 15px 'IBM Plex Sans', sans-serif; padding: 0 22px; min-height: 52px; cursor: pointer; }
#send-btn:disabled { opacity: .6; cursor: default; }
.img-nudge { margin: 0; padding: 12px 16px; border-top: 1px solid var(--line); font-size: 14px; color: var(--text2); }

/* ── Feature rows ────────────────────────────────────────── */
.uses { background: var(--surface); border-top: 1px solid var(--line); }
.uses .wrap { padding-top: 88px; padding-bottom: 88px; }
.section-title { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 40px; letter-spacing: -0.03em; margin: 0 0 56px; max-width: 640px; line-height: 1.05; }
.rows { display: flex; flex-direction: column; gap: 72px; }
.row { display: flex; flex-wrap: wrap; gap: 48px; align-items: center; }
.row.flip { flex-wrap: wrap-reverse; }
.row-media { flex: 1 1 460px; min-width: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.row-text { flex: 1 1 360px; min-width: 0; }
.row-text .num { font-family: 'IBM Plex Mono', monospace; font-size: 13px; color: var(--muted); margin: 0 0 12px; }
.row-text h3 { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 30px; letter-spacing: -0.02em; margin: 0 0 14px; line-height: 1.1; }
.row-text p { font-size: 17px; line-height: 1.6; color: var(--text2); margin: 0 0 18px; }
.row-text code { font-family: 'IBM Plex Mono', monospace; background: var(--bg); padding: 2px 6px; font-size: 15px; }
.row-text a { font-weight: 600; }
figcaption, .caption { font-family: 'IBM Plex Mono', monospace; font-size: 13px; color: var(--muted); }

.zoom { position: relative; display: block; width: 100%; padding: 0; border: none; background: none; cursor: zoom-in; text-align: left; color: inherit; }
.zoom img { width: 100%; height: auto; display: block; border: 1.5px solid var(--ink); }
.row-media img { height: auto; }
.discord-frame img { aspect-ratio: 771 / 245; }
.historia-shot { aspect-ratio: 16 / 10; object-fit: cover; }
.zoom-badge { position: absolute; top: 10px; right: 10px; width: 34px; height: 34px; background: rgba(14,16,19,.75); color: #F3F4F1; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.zoom:hover .zoom-badge { background: rgba(14,16,19,.92); }
.discord-frame { background: #1E1F22; border: 1.5px solid var(--ink); box-shadow: 8px 8px 0 var(--accent); padding: 20px; }
.discord-frame img { border: none; }
.media-shadow { box-shadow: 8px 8px 0 var(--accent); }
.video-wrap { position: relative; }
.video-wrap video { width: 100%; aspect-ratio: 1280 / 760; object-fit: cover; display: block; background: #16181D; border: 1.5px solid var(--ink); box-shadow: 8px 8px 0 var(--accent); }
.watch-bigger { position: absolute; top: 10px; right: 10px; height: 36px; padding: 0 12px; border: none; background: rgba(14,16,19,.82); color: #F3F4F1; font: 500 13px 'IBM Plex Sans', sans-serif; display: flex; align-items: center; gap: 8px; cursor: pointer; }
.pics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.pics .wide { grid-column: span 2; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.pics .zoom img { aspect-ratio: 1672 / 941; object-fit: cover; }

/* ── Honest bits ─────────────────────────────────────────── */
.honest { padding-top: 88px; padding-bottom: 88px; }
.honest h2 { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 40px; letter-spacing: -0.03em; margin: 0 0 40px; }
.honest-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 40px; }
.honest-grid > div { border-top: 3px solid var(--ink); padding-top: 20px; }
.honest-grid h3 { font-size: 18px; font-weight: 600; margin: 0 0 10px; }
.honest-grid p { font-size: 16px; line-height: 1.6; color: var(--text2); margin: 0; }

/* ── Footer (dark in both themes) ────────────────────────── */
.site-footer { background: #0E1013; color: #D7DAD2; border-top: 1px solid var(--line); }
.site-footer .wrap { padding-top: 48px; padding-bottom: 48px; display: flex; flex-wrap: wrap; gap: 32px; justify-content: space-between; align-items: flex-start; }
.site-footer .wordmark { color: #F3F4F1; margin-bottom: 12px; }
.site-footer .wordmark-text { font-size: 24px; }
.site-footer p { margin: 0; font-size: 14px; color: #A9AEB6; }
.site-footer a { color: #D7DAD2; }
.site-footer a:hover { color: #FFFFFF; }
.footer-links { display: flex; flex-wrap: wrap; gap: 14px 28px; font-size: 14px; }

/* ── Media viewer ────────────────────────────────────────── */
.viewer { position: fixed; inset: 0; z-index: 1000; background: rgba(8,9,11,.93); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 64px 24px 32px; }
.viewer[hidden] { display: none; }
.viewer-backdrop { position: absolute; inset: 0; background: transparent; border: none; cursor: zoom-out; }
.viewer-close { position: absolute; top: 16px; right: 16px; width: 44px; height: 44px; border: 1.5px solid #4A4F5A; background: #16181D; color: #F3F4F1; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 1; }
.viewer-media { position: relative; max-width: min(1600px, 100%); max-height: 80vh; display: block; }
.viewer-media img, .viewer-media video { max-width: 100%; max-height: 80vh; display: block; object-fit: contain; background: #16181D; }
.viewer p { position: relative; margin: 0; max-width: 900px; text-align: center; font-family: 'IBM Plex Mono', monospace; font-size: 13px; color: #D7DAD2; }

/* ── Limit modal (chat.js shows it) ──────────────────────── */
.modal-overlay { position: fixed; inset: 0; z-index: 1100; background: rgba(8,9,11,.7); display: flex; align-items: center; justify-content: center; padding: 24px; }
.modal { background: var(--surface); color: var(--ink); border: 1.5px solid var(--ink); box-shadow: 8px 8px 0 var(--ink); padding: 32px; max-width: 440px; width: 100%; }
.modal h2 { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 28px; letter-spacing: -0.02em; margin: 0 0 10px; line-height: 1.1; }
.modal p { color: var(--text2); margin: 0 0 22px; }
.modal-btns { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.modal-close { background: none; border: none; color: var(--muted); font: 500 14px 'IBM Plex Sans', sans-serif; cursor: pointer; padding: 8px 0; min-height: 44px; }

@media (max-width: 640px) {
  .site-nav { gap: 12px; padding-top: 14px; padding-bottom: 14px; }
  .site-nav > .btn { display: none; }            /* the hero has the big Add to Discord button */
  .nav-links { gap: 4px 14px; font-size: 14px; }
  .wordmark-text { font-size: 23px; }
  .icon-btn { width: 40px; height: 40px; }
  .hero { padding-top: 40px; padding-bottom: 56px; gap: 40px; }
  .hero-copy { padding-top: 0; }
  #messages { min-height: 150px; }
  .section-title, .honest h2 { font-size: 32px; }
  .demo { box-shadow: 5px 5px 0 var(--ink); }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }