:root { --ink:#291d19; --muted:#6f5b50; --paper:#fffaf4; --sand:#f5e7d5; --clay:#d95b3e; --rust:#aa422d; --line:#dfc7af; --card:#fffdf9; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; background:var(--paper); color:var(--ink); font-family:Manrope,Arial,sans-serif; font-size:16px; line-height:1.7; } .container { width:min(1120px, calc(100% - 48px)); margin:auto; }
.hero { background:var(--sand); min-height:540px; position:relative; overflow:hidden; } .nav { display:flex; justify-content:space-between; align-items:center; padding:25px 0; } .brand { color:var(--rust); font-family:'DM Mono',monospace; font-size:1.4rem; font-weight:500; text-decoration:none; letter-spacing:-.08em; } .branch-mark { display:inline-block; margin-right:5px; transform:rotate(-45deg); font-family:Arial,sans-serif; font-size:1.65rem; vertical-align:-2px; } .nav-links { display:flex; gap:25px; } .nav-links a, footer a { color:var(--ink); text-decoration:none; font-size:.78rem; font-weight:700; } .nav-links a:hover, footer a:hover { color:var(--clay); }
.hero-content { padding:93px 0 115px; max-width:1120px; } .eyebrow, .section-label { font-family:'DM Mono',monospace; font-size:.73rem; letter-spacing:.08em; font-weight:500; color:var(--rust); } .hero h1 { font-size:clamp(3.15rem, 8vw, 6.6rem); letter-spacing:-.075em; line-height:.98; margin:11px 0 24px; max-width:700px; } .hero h1 span { color:var(--clay); } .lead { max-width:600px; color:#583f35; font-size:1.08rem; margin:0 0 32px; } .button { display:inline-flex; gap:18px; align-items:center; padding:13px 20px; background:var(--rust); color:white; text-decoration:none; font-weight:800; font-size:.83rem; border-radius:4px; } .button:hover { background:var(--clay); } .hero-line { height:9px; background:var(--clay); position:absolute; bottom:0; width:100%; }
.section { padding:104px 0; } .section-label { display:flex; align-items:center; gap:10px; margin-bottom:32px; } .section-label span { color:var(--clay); font-size:1rem; } .section-label i { width:38px; height:1px; background:var(--clay); } h2 { margin:0; font-size:clamp(2rem, 4.2vw, 3.5rem); line-height:1.1; letter-spacing:-.055em; } .two-column { display:grid; grid-template-columns:.9fr 1.1fr; gap:90px; } .prose { color:var(--muted); } .prose p:first-child { margin-top:0; } strong { color:var(--ink); } .tinted { background:#f8ede1; } .section-heading { display:flex; justify-content:space-between; gap:40px; align-items:end; margin-bottom:45px; } .section-heading p { max-width:430px; margin:0; color:var(--muted); } .narrow { display:block; } .narrow p { margin-top:14px; }
.benefits { display:grid; grid-template-columns:repeat(3, 1fr); border-top:1px solid var(--line); border-left:1px solid var(--line); } .benefits article { min-height:220px; padding:27px; background:rgba(255,253,249,.65); border-right:1px solid var(--line); border-bottom:1px solid var(--line); } .benefits b { color:var(--clay); font-family:'DM Mono',monospace; font-size:.75rem; } .benefits h3 { font-size:1.15rem; margin:28px 0 8px; letter-spacing:-.035em; } .benefits p { color:var(--muted); font-size:.9rem; line-height:1.6; margin:0; }
.commands-section { padding-bottom:120px; } .command-tree { counter-reset:item; list-style:none; padding:0 0 0 80px; margin:55px auto 0; max-width:760px; position:relative; } .command-tree:before { content:""; position:absolute; left:18px; top:18px; bottom:45px; width:1px; background:var(--line); } .command-tree li { position:relative; counter-increment:item; background:var(--card); border:1px solid var(--line); border-radius:5px; padding:19px 23px; margin-bottom:15px; box-shadow:5px 5px 0 #f5e8dc; } .command-tree li:before { content:counter(item, decimal-leading-zero); position:absolute; right:calc(100% + 22px); top:20px; width:42px; color:var(--clay); font-family:'DM Mono',monospace; font-size:.75rem; text-align:right; } .command-tree li:after { content:""; position:absolute; right:100%; top:31px; width:20px; height:1px; background:var(--line); } code { font-family:'DM Mono',monospace; color:var(--rust); font-size:.94em; } .command-tree > li > code { font-size:1rem; font-weight:500; } .command-tree p { color:var(--muted); font-size:.9rem; line-height:1.6; margin:7px 0 0; }
.sources { background:var(--ink); color:#fff9f1; padding:90px 0; } .sources h2 { margin:10px 0 16px; } .sources p:not(.eyebrow) { color:#d9beb0; max-width:420px; } .sources-inner { display:grid; grid-template-columns:.8fr 1.2fr; gap:90px; } .source-list { list-style:none; margin:0; padding:0; border-top:1px solid #5d4137; } .source-list li { border-bottom:1px solid #5d4137; } .source-list a { min-height:104px; display:grid; grid-template-columns:130px 1fr 20px; align-items:center; gap:18px; color:inherit; text-decoration:none; padding:17px 4px; } .source-list a:hover strong, .source-list a:hover em { color:#ff8b69; } .source-list span { color:#d0a99a; font-family:'DM Mono',monospace; font-size:.72rem; } .source-list strong { color:#fff9f1; font-size:1.05rem; } .source-list em { color:#ff7654; font-style:normal; font-size:1.25rem; } footer { background:#211713; color:#cdaea0; font-size:.76rem; } footer .container { min-height:80px; display:flex; align-items:center; gap:25px; justify-content:space-between; } footer a { color:#f3d9c8; }
@media (max-width:760px) { .container { width:min(100% - 32px, 1120px); } .nav-links { display:none; } .hero { min-height:auto; } .hero-content { padding:65px 0 80px; } .two-column, .sources-inner { grid-template-columns:1fr; gap:28px; } .section { padding:72px 0; } .section-heading { display:block; } .section-heading p { margin-top:15px; } .benefits { grid-template-columns:1fr; } .benefits article { min-height:unset; padding:24px; } .benefits h3 { margin-top:15px; } .command-tree { padding-left:55px; } .command-tree li { padding:17px; } .command-tree li:before { right:calc(100% + 12px); width:34px; } .command-tree li:after { width:10px; } .command-tree:before { left:9px; } .source-list a { grid-template-columns:1fr 20px; gap:2px; } .source-list span { grid-column:1; } .source-list strong { grid-column:1; } .source-list em { grid-column:2; grid-row:1 / span 2; } footer .container { min-height:110px; flex-wrap:wrap; gap:10px 20px; padding:20px 0; } }