/* Bounce Brothas / Monolith. No dependencies and no remote requests. */
:root {
  color-scheme: dark;
  --page: #0c0b0c;
  --ink: #f5f1ee;
  --muted: #87807f;
  --rule: rgba(237, 219, 216, 0.19);
  --accent: #ff5148;
  --brand-symbol-bg: #ff5148;
  --accent-ink: #111010;
  --switch-bg: rgba(255, 255, 255, 0.055);
  --switch-active: #302a2a;
  --switch-ink: #aaa09e;
  --stage: transparent;
  --stage-ink: #f5efed;
  --stage-muted: #a99e9c;
  --stage-border: transparent;
  --stage-glow: rgba(198, 30, 19, 0.12);
  --page-glow: rgba(200, 37, 28, 0.055);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    color-scheme: light;
    --page: #f5f2ef;
    --ink: #201b1b;
    --muted: #706966;
    --rule: rgba(49, 39, 37, 0.2);
    --accent: #e7473d;
    --accent-ink: #180d0d;
    --switch-bg: rgba(30, 23, 22, 0.055);
    --switch-active: #ffffff;
    --switch-ink: #5d5351;
    --stage: transparent;
    --stage-ink: #201b1b;
    --stage-muted: #746b68;
    --stage-border: transparent;
    --stage-glow: rgba(225, 53, 44, 0.065);
    --page-glow: rgba(203, 58, 45, 0.02);
  }
}
:root[data-theme="light"] {
  color-scheme: light;
  --page: #f5f2ef;
  --ink: #201b1b;
  --muted: #706966;
  --rule: rgba(49, 39, 37, 0.2);
  --accent: #e7473d;
  --accent-ink: #180d0d;
  --switch-bg: rgba(30, 23, 22, 0.055);
  --switch-active: #ffffff;
  --switch-ink: #5d5351;
  --stage: transparent;
  --stage-ink: #201b1b;
  --stage-muted: #746b68;
  --stage-border: transparent;
  --stage-glow: rgba(225, 53, 44, 0.065);
  --page-glow: rgba(203, 58, 45, 0.02);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) .brand-symbol {color: #fff;}
}
:root[data-theme="light"] .brand-symbol {color: #fff;}
:root[data-theme="dark"] {color-scheme: dark;}
* {box-sizing: border-box;}
html {min-width: 280px; scroll-behavior: smooth;}
body {
  min-width: 280px;
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body::before {
  content: "";
  position: fixed;
  pointer-events: none;
  inset: 0;
  z-index: 0;
  background: radial-gradient(ellipse 65% 47% at 50% 48%, var(--page-glow), transparent 80%);
}
button, a {-webkit-tap-highlight-color: transparent;}
a {color: inherit;}
a:focus-visible, button:focus-visible {outline: 2px solid var(--accent); outline-offset: 5px;}
.skip-link {position: fixed; top: -100px; left: 20px; padding: .8rem 1rem; background: var(--ink); color: var(--page); z-index: 5;}
.skip-link:focus {top: 15px;}
.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;}
.site-shell {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  position: relative;
  isolation: isolate;
}
.container {width: min(calc(100% - (clamp(20px, 4.7vw, 76px) * 2)), 1410px); margin-inline: auto;}
.site-header {
  min-height: clamp(80px, 8.4vw, 108px);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 22px;
  border-bottom: 1px solid var(--rule);
}
.brand {display: inline-flex; align-items: center; gap: 14px; text-decoration: none; flex-shrink: 0;}
.brand-symbol {
  display: grid; place-items: center;
  width: 37px; height: 37px;
  background: var(--brand-symbol-bg); color: var(--accent-ink);
  font-size: 23px; font-weight: 950; letter-spacing: -.12em; padding-right: 4px;
  line-height: 1;
}
.brand-name {font-weight: 760; font-size: 12px; letter-spacing: .22em; white-space: nowrap;}
.header-actions {display: flex; align-items: center; gap: clamp(20px, 3.2vw, 48px);}
.header-meta {font-size: 10px; letter-spacing: .24em; color: var(--muted); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; white-space: nowrap;}
.theme-control {display: none; align-items: center; padding: 3px; gap: 2px; background: var(--switch-bg); border: 1px solid var(--rule); border-radius: 999px;}
.js .theme-control {display: flex;}
.theme-button {
  padding: 9px 12px; border: 0; border-radius: 999px;
  color: var(--switch-ink); background: transparent;
  font: 650 10px/1.2 ui-sans-serif, system-ui, -apple-system, sans-serif;
  letter-spacing: .055em; cursor: pointer;
  transition: background .18s ease, color .18s ease;
}
.theme-button:hover:not([aria-pressed="true"]) {color: var(--ink);}
.theme-button[aria-pressed="true"] {background: var(--switch-active); color: var(--ink); box-shadow: 0 1px 8px rgba(0,0,0,.055);}
.hero {flex: 1; display: flex; align-items: center; justify-content: center; padding-block: clamp(42px, 5.6vh, 86px);}
.hero-stage {
  width: 100%;
  min-width: 0;
  padding: clamp(42px, 6vw, 78px) clamp(15px, 3.6vw, 58px) clamp(36px, 4.5vw, 64px);
  border: 1px solid var(--stage-border);
  border-radius: clamp(13px, 1.3vw, 22px);
  background: var(--stage);
  color: var(--stage-ink);
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.hero-stage::before {
  content:""; position:absolute; inset: 11% 12% 0; z-index: -1;
  background: radial-gradient(ellipse 60% 48% at 50% 48%, var(--stage-glow), transparent 85%);
  pointer-events:none;
}
.hero-inner {text-align: center; max-width: 1090px; margin-inline: auto;}
.eyebrow {
  display: flex; justify-content: center; align-items: center; gap: clamp(10px, 1.5vw, 20px);
  margin: 0 0 clamp(30px, 4.5vw, 62px);
  color: var(--stage-muted);
  font-size: clamp(9px, .8vw, 11px); font-weight: 640;
  letter-spacing: clamp(.14em, .26vw, .3em);
  line-height: 1.6;
}
.eyebrow-star {color: var(--accent); font-size: 12px; line-height: 1;}
.hero-logo {margin: 0 auto; width: 100%; line-height: 0;}
.hero-logo img {
  max-width: 100%; height: auto;
  filter: drop-shadow(0 24px 30px rgba(0, 0, 0, .27));
}
.tagline {
  display: flex; justify-content: center; align-items: center; gap: clamp(15px, 2.5vw, 30px);
  margin: clamp(28px, 3.7vw, 52px) 0 0;
  font-size: clamp(11px, 1vw, 13px);
  font-weight: 580;
  letter-spacing: clamp(.25em, .4vw, .47em);
  white-space: nowrap;
  color: var(--stage-ink);
}
.tagline-separator {display: block; height: 13px; width: 1px; background: var(--accent); transform: rotate(21deg);}
.site-footer {
  min-height: 114px;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: 22px;
  border-top: 1px solid var(--rule);
}
.footer-copyright {color: var(--muted); margin: 0; font: 11px/1.8 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .08em; white-space: nowrap;}
.social-links {display: flex; align-items: center; justify-content: center; gap: clamp(15px, 2.9vw, 46px);}
.social-links a, .footer-contact {text-decoration: none; font-size: 11px; font-weight: 580; letter-spacing: .07em; white-space: nowrap; transition: color .18s ease;}
.social-links a:hover, .footer-contact:hover {color: var(--accent);}
.social-links span[aria-hidden], .footer-contact span {font-size: 1.1em; color: var(--accent); margin-left: 2px;}
.footer-contact {justify-self: end;}
@media (max-width: 1050px) {
  .site-footer {grid-template-columns: 1fr auto; column-gap: 16px; row-gap: 8px; padding-block: 25px;}
  .social-links {justify-content: flex-end;}
  .footer-contact {grid-column: 2;}
  .footer-copyright {grid-row: 1 / span 2; align-self: center;}
  .header-meta {display:none;}
}
@media (max-width: 640px) {
  .site-header {min-height: 82px;}
  .brand {gap: 9px;}
  .brand-symbol {height: 33px; width: 33px; font-size: 20px;}
  .brand-name {font-size: 10px; letter-spacing: .12em;}
  .theme-button {font-size: 10px; padding: 8px 8px;}
  .hero {padding-block: 28px;}
  .hero-stage {padding: clamp(54px, 13vh, 90px) 12px clamp(54px, 13vh, 90px); border-radius: 16px;}
  .eyebrow {gap: 10px; font-size: 8px; letter-spacing: .115em; margin-bottom: 32px;}
  .hero-logo {width: 100%;}
  .tagline {margin-top: 36px; font-size: 10px; letter-spacing: .3em; gap: 16px;}
  .site-footer {display: flex; flex-direction: column; align-items: center; gap: 22px; padding: 28px 0 30px; min-height: 0;}
  .social-links {gap: clamp(12px, 4vw, 25px); flex-wrap: wrap; justify-content: center;}
  .social-links a, .footer-contact {font-size: 10px;}
  .footer-contact {order: 2;}
  .footer-copyright {order: 3; font-size: 10px;}
}
@media (max-width: 370px) {
  .brand-name {font-size: 9px; letter-spacing: .07em;}
  .theme-button {padding: 8px 6px; font-size: 9px;}
  .hero-stage {padding-inline: 8px;}
  .eyebrow {font-size: 7px; gap: 7px;}
}
@media (max-height: 630px) and (min-width: 641px) {
  .hero {padding-block: 18px;}
  .hero-stage {padding-block: 16px;}
  .eyebrow {margin-bottom: 14px;}
  .hero-logo {max-width: 680px;}
  .tagline {margin-top: 17px;}
  .site-header {min-height: 65px;}
  .site-footer {min-height: 78px;}
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important;}
}


/* One unmodified logo file is used in both themes. A gentle CSS-only shadow
   helps the original white ink stand out against the seamless light canvas. */
.hero-logo picture { display: block; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) .hero-logo img {
    filter: drop-shadow(0 6px 7px rgba(33, 27, 27, 0.18)) drop-shadow(0 22px 30px rgba(74, 42, 36, 0.07));
  }
}
:root[data-theme="light"] .hero-logo img {
  filter: drop-shadow(0 6px 7px rgba(33, 27, 27, 0.18)) drop-shadow(0 22px 30px rgba(74, 42, 36, 0.07));
}