@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wdth,wght@12..96,75..100,400..800&family=DM+Mono:wght@400;500&display=swap');

.elsewhere-page {
  --ew-ink: #11100e;
  --ew-paper: #f4efe6;
  --ew-signal: #ff4f00;
  --ew-line: #c9c0b3;
  --ew-muted: #6f695f;
  --ew-green: #a7f36b;
  background: var(--ew-paper);
  color: var(--ew-ink);
}

.elsewhere-page #title-block-header,
.elsewhere-page .article-author-card,
.elsewhere-page .disagree-cta,
.elsewhere-page .article-newsletter-cta,
.elsewhere-page .author-bio,
.elsewhere-page .giscus {
  display: none !important;
}

.elsewhere-page main.content { max-width: none; padding: 0; }
.elsewhere-page .page-columns { display: block; }
.elsewhere-page .column-page { width: 100%; margin: 0; padding: 0; }

.ew-shell {
  font-family: "Bricolage Grotesque", sans-serif;
  font-variation-settings: "wdth" 100;
  overflow: hidden;
}

.ew-shell *, .ew-shell *::before, .ew-shell *::after { box-sizing: border-box; }
.ew-shell h1, .ew-shell h2, .ew-shell h3, .ew-shell p { font-family: inherit; }
.ew-shell a { color: inherit; text-decoration: none; }

.ew-hero { padding: 0 clamp(1.25rem, 4vw, 5rem); border-bottom: 1px solid var(--ew-ink); }
.ew-product-nav { height: 82px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--ew-line); }
.ew-lockup { display: inline-flex; align-items: center; gap: .8rem; font-size: 1.05rem; font-weight: 750; letter-spacing: -.03em; }
.ew-lockup img { border-radius: 10px; }
.ew-nav-links { display: flex; gap: 1.8rem; font: 500 .78rem/1 "DM Mono", monospace; text-transform: uppercase; letter-spacing: .06em; }
.ew-nav-links a { padding: .45rem 0; border-bottom: 1px solid transparent; }
.ew-nav-links a:hover { border-color: var(--ew-signal); color: var(--ew-signal); }

.ew-hero-grid { min-height: 720px; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(420px, .8fr); gap: clamp(3rem, 7vw, 8rem); align-items: center; padding: 6rem 0 5rem; }
.ew-kicker, .ew-section-number { font: 500 .73rem/1.3 "DM Mono", monospace; text-transform: uppercase; letter-spacing: .1em; }
.ew-kicker { display: flex; align-items: center; gap: .65rem; margin-bottom: 1.8rem; }
.ew-kicker span { width: 9px; height: 9px; background: var(--ew-signal); animation: ew-pulse 1.8s ease-in-out infinite; }
@keyframes ew-pulse { 50% { opacity: .35; transform: scale(.72); } }
.ew-hero h1 { max-width: 920px; margin: 0; font-size: clamp(4rem, 7.3vw, 8.4rem); font-weight: 760; line-height: .91; letter-spacing: -.045em; border: 0; text-wrap: balance; }
.ew-lede { margin: 2.2rem 0 1rem; font-size: clamp(1.55rem, 2.6vw, 2.7rem); font-weight: 520; letter-spacing: -.045em; line-height: 1.05; }
.ew-intro { max-width: 720px; color: var(--ew-muted); font-size: 1.15rem; line-height: 1.5; }
.ew-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2.2rem; }
.ew-button { display: inline-flex; align-items: center; justify-content: space-between; gap: 2rem; padding: 1rem 1.2rem; border: 1px solid var(--ew-ink); font: 650 .85rem/1 "DM Mono", monospace; text-transform: uppercase; transition: transform .18s ease, box-shadow .18s ease; }
.ew-button:hover { transform: translate(-3px, -3px); box-shadow: 4px 4px 0 var(--ew-ink); }
.ew-button-primary { color: var(--ew-paper) !important; background: var(--ew-ink); }
.ew-button-primary:hover { box-shadow: 4px 4px 0 var(--ew-signal); }
.ew-button-secondary { background: transparent; }

.ew-terminal-wrap { position: relative; transform: rotate(1.1deg); }
.ew-terminal-label { position: absolute; top: -2.3rem; right: 0; font: 500 .7rem/1 "DM Mono", monospace; text-transform: uppercase; letter-spacing: .1em; }
.ew-terminal { background: var(--ew-ink); color: #eee8dc; border: 1px solid var(--ew-ink); box-shadow: 14px 14px 0 var(--ew-signal); }
.ew-terminal-bar { height: 42px; border-bottom: 1px solid #3d3a34; display: flex; align-items: center; gap: 7px; padding: 0 14px; font: .65rem "DM Mono", monospace; color: #8f897e; }
.ew-terminal-bar i { width: 8px; height: 8px; border: 1px solid #706a60; border-radius: 50%; }
.ew-terminal-bar span { margin-left: auto; }
.ew-terminal pre { margin: 0; padding: clamp(1.3rem, 3vw, 2rem); background: transparent; color: inherit; font: 500 clamp(.72rem, 1.1vw, .9rem)/1.7 "DM Mono", monospace; white-space: pre-wrap; }
.ew-terminal code { color: inherit; }
.ew-prompt, .ew-signal { color: #ff6a2a; }
.ew-dim { color: #8c877f; }
.ew-ok { color: var(--ew-green); }
.ew-terminal-wrap > p { margin: 1.4rem 0 0 1rem; color: var(--ew-muted); font: .72rem/1.5 "DM Mono", monospace; }

.ew-marquee { margin: 0 -5rem; padding: 1.1rem 0; border-top: 1px solid var(--ew-ink); display: flex; justify-content: space-around; gap: 2rem; font: 700 clamp(.9rem, 1.5vw, 1.3rem)/1 "DM Mono", monospace; letter-spacing: .04em; white-space: nowrap; }
.ew-marquee b { color: var(--ew-signal); }

.ew-problem, .ew-how, .ew-proof, .ew-trust, .ew-install { padding: clamp(5rem, 10vw, 10rem) clamp(1.25rem, 6vw, 7rem); }
.ew-section-number { margin-bottom: 2.6rem; color: var(--ew-signal); }
.ew-problem-grid, .ew-trust-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(3rem, 9vw, 10rem); }
.ew-shell h2 { margin: 0; padding: 0; border: 0; font-size: clamp(2.8rem, 5.4vw, 6rem); line-height: .98; letter-spacing: -.04em; font-weight: 720; text-wrap: balance; }
.ew-problem-grid > div { padding-top: .5rem; max-width: 640px; }
.ew-problem p { font-size: clamp(1.15rem, 1.7vw, 1.55rem); line-height: 1.45; color: var(--ew-muted); }

.ew-how { background: var(--ew-ink); color: var(--ew-paper); }
.ew-how h2,
.ew-how h3 { color: var(--ew-paper) !important; }
.ew-how h2 { max-width: 950px; }
.ew-steps { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 5rem; border-top: 1px solid #49453e; }
.ew-steps article { min-height: 330px; padding: 2rem 2rem 2rem 0; border-right: 1px solid #49453e; }
.ew-steps article + article { padding-left: 2rem; }
.ew-steps article:last-child { border-right: 0; }
.ew-step-index { display: block; color: var(--ew-signal); font: .8rem "DM Mono", monospace; margin-bottom: 5rem; }
.ew-steps h3 { margin: 0 0 1rem; font-size: 1.8rem; letter-spacing: -.04em; }
.ew-steps p { color: #c8c1b6; font-size: 1rem; line-height: 1.55; }

.ew-proof { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(4rem, 10vw, 11rem); align-items: center; }
.ew-proof-copy p { color: var(--ew-muted); max-width: 720px; font-size: 1.15rem; line-height: 1.55; }
.ew-route-card { border: 1px solid var(--ew-ink); background: #ebe3d6; box-shadow: 12px 12px 0 var(--ew-ink); }
.ew-route-head { padding: 1rem 1.2rem; display: flex; justify-content: space-between; border-bottom: 1px solid var(--ew-ink); font: .7rem "DM Mono", monospace; }
.ew-live { color: var(--ew-signal); }
.ew-route-line { padding: 4rem 1.4rem; display: flex; align-items: center; }
.ew-route-line i { flex: 1; height: 1px; background: var(--ew-ink); position: relative; }
.ew-route-line i::after { content: ">"; position: absolute; right: -2px; top: -9px; font: .8rem "DM Mono", monospace; }
.ew-node { padding: .6rem .7rem; border: 1px solid var(--ew-ink); font: .75rem "DM Mono", monospace; background: var(--ew-paper); }
.ew-node-muted { text-decoration: line-through; color: var(--ew-muted); }
.ew-node-active { background: var(--ew-signal); color: white; }
.ew-route-card dl { margin: 0; display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--ew-ink); }
.ew-route-card dl div { padding: 1rem 1.2rem; border-right: 1px solid var(--ew-ink); border-bottom: 1px solid var(--ew-ink); }
.ew-route-card dl div:nth-child(even) { border-right: 0; }
.ew-route-card dt { color: var(--ew-muted); font: .65rem "DM Mono", monospace; text-transform: uppercase; }
.ew-route-card dd { margin: .4rem 0 0; font-weight: 700; }

.ew-trust { background: #ded4c4; border-top: 1px solid var(--ew-ink); border-bottom: 1px solid var(--ew-ink); }
.ew-trust-list > div { display: grid; grid-template-columns: 45px 1fr; border-top: 1px solid #aea598; padding: 1.3rem 0; }
.ew-trust-list span { font: .7rem "DM Mono", monospace; color: var(--ew-signal); }
.ew-trust-list p { margin: 0; line-height: 1.45; }

.ew-install { display: grid; grid-template-columns: 1fr 1fr; gap: 8vw; align-items: end; }
.ew-install p { color: var(--ew-muted); font-size: 1.1rem; max-width: 670px; }
.ew-install-command { background: var(--ew-ink); color: var(--ew-paper); padding: 1.5rem; }
.ew-install-command span { font: .68rem "DM Mono", monospace; color: #aaa398; text-transform: uppercase; }
.ew-install-command code { display: block; margin: 1rem 0 1.4rem; padding: 1.1rem; background: #24211e; color: var(--ew-green); font: .78rem/1.5 "DM Mono", monospace; overflow-x: auto; }
.ew-install-command a { color: var(--ew-signal); font: .75rem "DM Mono", monospace; }

.ew-ctfl { padding: clamp(6rem, 12vw, 13rem) clamp(1.25rem, 6vw, 7rem); background: var(--ew-signal); color: var(--ew-ink); text-align: center; }
.ew-ctfl-small { font: .7rem "DM Mono", monospace; letter-spacing: .15em; }
.ew-ctfl-type { margin: 2rem 0 1.25rem; font-size: clamp(7rem, 22vw, 24rem); font-weight: 800; line-height: .78; letter-spacing: -.065em; }
.ew-ctfl-type span { color: var(--ew-paper); }
.ew-ctfl h2 { font-size: clamp(2.4rem, 5vw, 5rem); }
.ew-ctfl p { max-width: 670px; margin: 1.5rem auto 2.5rem; font-size: 1.1rem; }
.ew-ctfl a { display: inline-flex; gap: 2rem; padding-bottom: .35rem; border-bottom: 2px solid var(--ew-ink); font: 650 .85rem "DM Mono", monospace; text-transform: uppercase; }

@media (max-width: 900px) {
  .ew-nav-links a:not(:last-child) { display: none; }
  .ew-hero-grid, .ew-problem-grid, .ew-proof, .ew-trust-grid, .ew-install { grid-template-columns: 1fr; }
  .ew-hero-grid { min-height: auto; padding: 4.5rem 0; }
  .ew-terminal-wrap { max-width: 620px; margin: 2rem 12px 0 0; }
  .ew-steps { grid-template-columns: 1fr; }
  .ew-steps article, .ew-steps article + article { min-height: 0; padding: 2rem 0; border-right: 0; border-bottom: 1px solid #49453e; }
  .ew-step-index { margin-bottom: 2rem; }
  .ew-ctfl-type { margin-bottom: .5rem; }
}

@media (max-width: 560px) {
  .ew-hero h1 { font-size: 3.35rem; line-height: .93; letter-spacing: -.04em; }
  .ew-shell h2 { font-size: 2.65rem; line-height: 1; letter-spacing: -.035em; }
  .ew-ctfl-type { font-size: clamp(6.2rem, 35vw, 8.2rem); margin-bottom: 1rem; }
  .ew-button { width: 100%; }
  .ew-terminal pre { font-size: .64rem; }
  .ew-route-card dl { grid-template-columns: 1fr; }
  .ew-route-card dl div { border-right: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .ew-kicker span { animation: none; }
  .ew-button { transition: none; }
}

body.quarto-dark.elsewhere-page {
  --ew-ink: #f4efe6;
  --ew-paper: #11100e;
  --ew-line: #4a453e;
  --ew-muted: #aaa398;
}
body.quarto-dark.elsewhere-page .ew-terminal { background: #050505; }
body.quarto-dark.elsewhere-page .ew-button-primary { color: #11100e !important; }
body.quarto-dark.elsewhere-page .ew-route-card { background: #25221e; }
body.quarto-dark.elsewhere-page .ew-node { background: #11100e; }
body.quarto-dark.elsewhere-page .ew-trust { background: #1d1a17; }
