@font-face{
  font-family:"Fraunces";
  src:url("/assets/fonts/fraunces-latin-wght-normal.woff2") format("woff2-variations");
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Fraunces";
  src:url("/assets/fonts/fraunces-latin-wght-italic.woff2") format("woff2-variations");
  font-weight:100 900;
  font-style:italic;
  font-display:swap;
}
@font-face{
  font-family:"JetBrains Mono";
  src:url("/assets/fonts/jetbrains-mono-latin-wght-normal.woff2") format("woff2-variations");
  font-weight:100 800;
  font-style:normal;
  font-display:swap;
}

:root{
  --ink:#0B0A08;
  --ink-2:#141210;
  --parchment:#EFE5D0;
  --parchment-dim:#B9AE96;
  --brass:#C9A14A;
  --brass-deep:#8C6A24;
  --brass-glow:#F4D38A;
  --rule:#2A241B;
  --pulse:rgba(201,161,74,.18);
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
html{
  background:var(--ink);
  color:var(--parchment);
  font-family:"Fraunces","Cormorant Garamond",Georgia,serif;
  font-optical-sizing:auto;
  font-variation-settings:"SOFT" 40,"WONK" 0,"opsz" 14;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  scrollbar-width:thin;
  scrollbar-color:var(--brass-deep) transparent;
}
html::-webkit-scrollbar{width:10px;height:10px}
html::-webkit-scrollbar-track{background:transparent}
html::-webkit-scrollbar-thumb{background:var(--brass-deep);border-radius:6px;border:2px solid var(--ink)}
html::-webkit-scrollbar-thumb:hover{background:var(--brass)}

body{
  min-height:100%;
  display:flex;flex-direction:column;
  background:
    radial-gradient(1200px 700px at 50% -10%, rgba(201,161,74,.10), transparent 60%),
    radial-gradient(900px 500px at 85% 110%, rgba(140,106,36,.12), transparent 55%),
    linear-gradient(180deg, var(--ink) 0%, var(--ink-2) 100%);
  background-attachment:fixed;
}

a{color:inherit}
a:focus-visible{outline:2px solid var(--brass);outline-offset:4px;border-radius:2px}

main{
  flex:1 0 auto;
  max-width:72ch;
  margin:0 auto;
  padding:clamp(2rem,5vw,5rem) clamp(1.25rem,4vw,3rem);
  display:flex;flex-direction:column;gap:clamp(2.5rem,4vw,4rem)
}

/* --- crumb --- */
.crumb{
  font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.72rem;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--parchment-dim);
  display:flex;align-items:center;gap:.75em
}
.crumb::before{
  content:"";
  display:inline-block;
  width:.6em;height:.6em;
  background:var(--brass);
  transform:rotate(45deg);
  box-shadow:0 0 12px var(--pulse);
}

/* --- hero --- */
.hero{display:flex;flex-direction:column;gap:.9rem}
.hero h1{
  font-size:clamp(3.2rem,11vw,7rem);
  line-height:.95;
  letter-spacing:-.02em;
  font-weight:300;
  font-variation-settings:"SOFT" 0,"WONK" 1,"opsz" 144;
  color:var(--parchment);
}
.hero h1 em{
  font-style:italic;
  color:var(--brass);
  font-weight:400;
}
.hero .sub{
  font-style:italic;
  font-size:clamp(1.05rem,2.4vw,1.35rem);
  color:var(--parchment-dim);
  max-width:46ch;
}

/* --- prose rhythm --- */
.prose{
  font-size:clamp(1.05rem,1.6vw,1.2rem);
  line-height:1.55;
  color:var(--parchment);
  max-width:56ch;
}
.prose + .prose{margin-top:1.2rem}
.prose b{color:var(--brass-glow);font-weight:500;letter-spacing:.01em}

/* --- install --- */
.install{
  display:flex;flex-direction:column;gap:1.5rem;
  padding:clamp(1.5rem,3.5vw,2.5rem);
  border:1px solid var(--rule);
  border-radius:2px;
  background:
    linear-gradient(180deg, rgba(201,161,74,.035) 0%, transparent 70%),
    rgba(20,18,16,.6);
  position:relative;
  overflow:hidden;
}
.install::before,.install::after{
  content:"";
  position:absolute;
  width:20px;height:20px;
  border:1px solid var(--brass);
  opacity:.5;
}
.install::before{top:10px;left:10px;border-right:none;border-bottom:none}
.install::after{bottom:10px;right:10px;border-left:none;border-top:none}

.install .tag{
  font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,monospace;
  font-size:.68rem;letter-spacing:.28em;text-transform:uppercase;
  color:var(--parchment-dim);
}
.install .ask{
  font-size:clamp(1.25rem,2.5vw,1.6rem);
  font-style:italic;
  line-height:1.35;
  color:var(--parchment);
  max-width:40ch;
}

.slack-cta{
  align-self:flex-start;
  display:inline-flex;align-items:center;gap:.9rem;
  padding:.95rem 1.4rem;
  border:1px solid var(--brass);
  background:linear-gradient(180deg, rgba(201,161,74,.14), rgba(201,161,74,.04));
  color:var(--parchment);
  text-decoration:none;
  font-family:inherit;
  font-size:1.05rem;
  letter-spacing:.01em;
  border-radius:2px;
  transition:background .2s ease, box-shadow .2s ease, transform .1s ease;
  position:relative;
  animation:breath 4.5s ease-in-out infinite;
}
.slack-cta:hover{
  background:linear-gradient(180deg, rgba(201,161,74,.22), rgba(201,161,74,.08));
  box-shadow:0 0 32px var(--pulse);
}
.slack-cta:active{transform:translateY(1px)}
.slack-cta .mark{
  width:20px;height:20px;flex-shrink:0;
}
.slack-cta .arrow{
  display:inline-block;
  transition:transform .25s ease;
  color:var(--brass);
}
.slack-cta:hover .arrow{transform:translateX(4px)}

@keyframes breath{
  0%,100%{box-shadow:0 0 0 var(--pulse)}
  50%{box-shadow:0 0 24px var(--pulse)}
}

/* --- what --- */
.what{display:flex;flex-direction:column;gap:1.1rem}
.what h2{
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:.72rem;letter-spacing:.28em;text-transform:uppercase;
  color:var(--parchment-dim);
  font-weight:500;
}
.what ul{list-style:none;display:flex;flex-direction:column;gap:1rem}
.what li{
  padding-left:2em;
  position:relative;
  font-size:clamp(1rem,1.5vw,1.15rem);
  line-height:1.5;
  color:var(--parchment);
}
.what li::before{
  content:"";
  position:absolute;
  left:.2em;top:.7em;
  width:1em;height:1px;
  background:var(--brass);
}

/* --- footer --- */
footer{
  margin-top:auto;
  padding:2.5rem clamp(1.25rem,4vw,3rem) 2rem;
  max-width:72ch;
  width:100%;
  margin-inline:auto;
  border-top:1px solid var(--rule);
}
footer .row{
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--parchment-dim);
}
footer a{color:var(--parchment-dim);text-decoration:none;transition:color .15s}
footer a:hover{color:var(--brass)}
footer .sigil{color:var(--brass)}

/* --- secondary pages --- */
.doc{max-width:64ch}
.doc h1{
  font-size:clamp(2rem,5vw,3rem);
  font-variation-settings:"SOFT" 0,"opsz" 60;
  font-weight:400;
  margin-bottom:.3em;
  color:var(--parchment);
}
.doc h1 em{font-style:italic;color:var(--brass);font-weight:400}
.doc h2{
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:.75rem;letter-spacing:.26em;text-transform:uppercase;
  color:var(--parchment-dim);
  margin-top:2.5rem;margin-bottom:.8rem;font-weight:500;
}
.doc p{
  font-size:1.05rem;line-height:1.65;margin-bottom:1rem;
  color:var(--parchment);
}
.doc p code,.doc code{
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:.92em;background:rgba(201,161,74,.08);
  padding:.05em .4em;border-radius:2px;color:var(--brass-glow);
}
.doc a{color:var(--brass);text-decoration-color:var(--brass-deep);text-underline-offset:3px}
.doc a:hover{color:var(--brass-glow)}

/* --- callback --- */
.cbox{
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:.88rem;line-height:1.5;
  background:var(--ink-2);
  border:1px solid var(--rule);
  padding:1.25rem;
  border-radius:2px;
  color:var(--brass-glow);
  word-break:break-all;
  user-select:all;
}
.cbox.ok{border-color:var(--brass)}
.cbox.err{border-color:#B03A2E;color:#E8B0A7}

@media (max-width:520px){
  main{gap:2rem}
  .install::before,.install::after{display:none}
}

@media (prefers-reduced-motion: reduce){
  .slack-cta{animation:none}
  .slack-cta:hover .arrow{transform:none}
}