/*  ccws — "Operator's Manual"
    warm-black parchment · amber/ochre · Instrument Serif × JetBrains Mono      */

:root{
  --bg:#0f0d0b;
  --bg-2:#14110d;
  --panel:#1a1611;
  --panel-2:#211c15;
  --line:#2c241b;
  --line-2:#3a3024;
  --fg:#f1eadb;
  --muted:#9c8f7c;
  --dim:#6a5f51;
  --accent:#e8a04c;   /* amber  */
  --accent-2:#d9542b; /* brick  */
  --root:#f3c069;     /* lit amber for workspace root */
  --serif:"Instrument Serif", "Iowan Old Style", Georgia, serif;
  --mono:"JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --max:1180px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--serif);
  font-size:19px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
/* warm radial atmosphere + faint top vignette */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(120% 80% at 78% -8%, rgba(232,160,76,.10), transparent 55%),
    radial-gradient(90% 70% at 12% 110%, rgba(217,84,43,.06), transparent 60%);
}
.grain{
  position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.045;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
main,.nav,.foot{position:relative;z-index:2}

a{color:inherit;text-decoration:none}
code{font-family:var(--mono);font-size:.86em;color:var(--fg)}
::selection{background:var(--accent);color:#1a1208}

/* ---------- nav ---------- */
.nav{
  max-width:var(--max);margin:0 auto;padding:26px 32px;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.brand{
  font-family:var(--mono);font-weight:700;font-size:17px;letter-spacing:-.02em;
  display:inline-flex;align-items:center;gap:9px;
}
.brand .mark{color:var(--accent);font-size:15px;transform:translateY(-1px)}
.nav-links{display:flex;align-items:center;gap:26px;font-family:var(--mono);font-size:13.5px}
.nav-links a{color:var(--muted);transition:color .2s}
.nav-links a:hover{color:var(--fg)}
.pill{
  font-size:12px;color:var(--accent);
  border:1px solid var(--line-2);border-radius:999px;padding:3px 11px;
  background:rgba(232,160,76,.05);
}
.gh{display:inline-flex;color:var(--muted)}
.gh:hover{color:var(--accent)}

/* ---------- hero ---------- */
.hero{
  max-width:var(--max);margin:0 auto;padding:72px 32px 110px;
  display:grid;grid-template-columns:1.15fr .85fr;gap:64px;align-items:center;
}
.kicker{
  font-family:var(--mono);font-size:12.5px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--accent);margin:0 0 26px;
}
h1{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(3.1rem,7.6vw,6.6rem);line-height:.96;letter-spacing:-.015em;
  margin:0 0 30px;
}
h1 em{font-style:italic;color:var(--accent)}
.lede{
  font-size:1.32rem;line-height:1.45;color:var(--muted);max-width:30ch;margin:0 0 34px;
}
.lede code{color:var(--fg);background:var(--panel);padding:1px 6px;border-radius:4px}

.cmd{
  display:flex;align-items:center;gap:12px;
  background:var(--bg-2);border:1px solid var(--line);border-radius:9px;
  padding:13px 14px;max-width:640px;
}
.cmd .prompt{color:var(--accent);font-family:var(--mono);font-size:13px;flex:none}
.cmd code{font-size:12.5px;line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1}
.cmd .copy,.cmd.small{font-family:var(--mono)}
.copy{
  flex:none;font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);background:transparent;border:1px solid var(--line-2);border-radius:6px;
  padding:5px 10px;cursor:pointer;transition:.18s;
}
.copy:hover{color:var(--bg);background:var(--accent);border-color:var(--accent)}
.copy.copied{color:var(--accent-2);border-color:var(--accent-2)}
.hint{
  font-family:var(--mono);font-size:12px;color:var(--dim);margin:14px 0 0;letter-spacing:.01em;
}

/* ---------- tree art ---------- */
.hero-art{display:flex;justify-content:center}
.tree{
  font-family:var(--mono);font-size:15px;line-height:1.85;margin:0;color:var(--fg);
  white-space:pre;
}
.tree .p{color:var(--muted)}
.tree .b{color:var(--accent)}
.tree .r{color:var(--root);font-weight:500}
.tree .d{color:var(--dim)}
.tree .a{color:var(--accent)}
.tree .dim{color:var(--dim);font-style:italic}
.tree.big{font-size:13.5px;line-height:1.95}

/* ---------- sections ---------- */
.section{max-width:var(--max);margin:0 auto;padding:84px 32px;border-top:1px solid var(--line)}
.section-head{display:flex;align-items:baseline;gap:20px;margin-bottom:52px}
.num{
  font-family:var(--mono);font-size:13px;color:var(--accent);
  border:1px solid var(--line-2);border-radius:6px;padding:3px 9px;
}
.section-head h2{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(2.1rem,4.4vw,3.4rem);line-height:1;letter-spacing:-.01em;margin:0;
}
.section-head h2 em{font-style:italic;color:var(--accent)}

/* concept */
.concept-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
.prose p{font-size:1.18rem;line-height:1.55;color:var(--fg);margin:0 0 1.3em}
.prose p:nth-child(2){color:var(--muted)}
.prose code{color:var(--accent);background:rgba(232,160,76,.07);padding:1px 6px;border-radius:4px}
.facts{list-style:none;padding:0;margin:8px 0 0;font-family:var(--mono);font-size:13px;line-height:1.7;color:var(--muted)}
.facts li{padding:9px 0;border-top:1px dashed var(--line)}
.facts b{color:var(--fg);font-weight:500}
.facts code{color:var(--accent)}
.diagram{
  background:var(--bg-2);border:1px solid var(--line);border-radius:11px;padding:28px 30px;
  box-shadow:0 1px 0 var(--line-2) inset, 0 30px 60px -40px rgba(0,0,0,.8);
}

/* terminal */
.terminal{
  background:var(--panel);border:1px solid var(--line-2);border-radius:13px;overflow:hidden;
  box-shadow:0 40px 80px -50px rgba(0,0,0,.9);
}
.term-chrome{
  display:flex;align-items:center;gap:8px;padding:13px 16px;
  background:var(--panel-2);border-bottom:1px solid var(--line);
}
.dot{width:11px;height:11px;border-radius:50%;background:var(--line-2)}
.dot:nth-child(1){background:#5a3a22}
.dot:nth-child(2){background:var(--accent)}
.dot:nth-child(3){background:var(--accent-2)}
.term-title{margin-left:10px;font-family:var(--mono);font-size:12px;color:var(--dim)}
.term-tabs{display:flex;gap:0;border-bottom:1px solid var(--line);overflow-x:auto}
.tab{
  font-family:var(--mono);font-size:13px;color:var(--muted);background:none;border:none;
  padding:14px 20px;cursor:pointer;position:relative;white-space:nowrap;
}
.tab:hover{color:var(--fg)}
.tab.active{color:var(--accent)}
.tab.active::after{
  content:"";position:absolute;left:14px;right:14px;bottom:-1px;height:2px;background:var(--accent);
}
.term-body{padding:22px 26px;min-height:148px}
.pane{display:none;font-family:var(--mono);font-size:13.5px;line-height:1.85}
.pane.active{display:block}
.line{white-space:pre-wrap;word-break:break-word}
.line .prompt{color:var(--accent);margin-right:10px}
.line.in{color:var(--fg)}
.line.out{color:var(--muted)}
.line.out.ok{color:var(--fg)}
.line.out.ok::first-letter,.line.out .ok{}
.line.a{color:var(--root)}

/* install */
.install-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.install-card{
  background:var(--bg-2);border:1px solid var(--line);border-radius:12px;padding:28px 26px;
  display:flex;flex-direction:column;gap:12px;transition:border-color .2s,transform .2s;
}
.install-card:hover{border-color:var(--line-2);transform:translateY(-2px)}
.install-card h3{font-family:var(--serif);font-weight:400;font-size:1.6rem;margin:0;color:var(--fg)}
.install-card p{font-size:.98rem;line-height:1.5;color:var(--muted);margin:0}
.install-card p code{color:var(--accent);background:rgba(232,160,76,.07);padding:1px 5px;border-radius:4px;font-size:.85em}
.link{
  margin-top:auto;font-family:var(--mono);font-size:13px;color:var(--accent);
  border-top:1px dashed var(--line);padding-top:14px;transition:color .2s;
}
.link:hover{color:var(--root)}
.cmd.small{margin-top:4px;border-radius:7px;padding:10px 12px;max-width:none}
.cmd.small code{font-size:11.5px}
.platforms{
  font-family:var(--mono);font-size:12.5px;color:var(--fg);text-align:center;
  margin:46px 0 0;letter-spacing:.02em;
}
.platforms .dim{color:var(--dim)}

/* footer */
.foot{border-top:1px solid var(--line);margin-top:40px}
.foot-inner{
  max-width:var(--max);margin:0 auto;padding:30px 32px;
  display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
  font-family:var(--mono);font-size:12.5px;color:var(--muted);
}
.foot-brand{display:inline-flex;align-items:center;gap:8px;color:var(--fg)}
.foot-brand .mark{color:var(--accent)}
.foot-nav{display:flex;gap:22px}
.foot-nav a:hover{color:var(--accent)}
.sig{color:var(--dim);font-style:italic;font-family:var(--serif);font-size:14px}

/* ---------- reveal ---------- */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.reveal.visible{opacity:1;transform:none}
.hero-copy .reveal:nth-child(1){transition-delay:.05s}
.hero-copy .reveal:nth-child(2){transition-delay:.16s}
.hero-copy .reveal:nth-child(3){transition-delay:.27s}
.hero-copy .reveal:nth-child(4){transition-delay:.38s}
.hero-copy .reveal:nth-child(5){transition-delay:.49s}
.hero-art.reveal{transition-delay:.30s}

/* ---------- responsive ---------- */
@media (max-width:880px){
  .hero{grid-template-columns:1fr;gap:40px;padding:48px 24px 80px}
  .hero-art{order:-1;justify-content:flex-start;opacity:.9}
  .concept-grid,.install-grid{grid-template-columns:1fr;gap:30px}
  .section{padding:60px 24px}
  .nav{padding:20px 24px}
  .foot-inner{padding:24px}
  .nav-links{gap:16px}
  .nav-links a[href="#concept"],.nav-links a[href="#commands"],.nav-links a[href="#install"]{display:none}
  .lede{font-size:1.18rem}
}
@media (max-width:520px){
  body{font-size:17px}
  .cmd code{font-size:11px}
  .term-body{padding:18px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
}