/* Case Code shared design tokens — colors, type, trunk/node motif, buttons.
   Mirrors the inline system in /index.html so sub-pages stay visually identical. */

:root{
  --ground:#F4F8F9; --surface:#FFFFFF; --ink:#0C242A; --ink-2:#4E656B; --ink-3:#7E9298;
  --rule:#D7E4E6; --rule-2:#E7EFF0;
  --mint:#56BE9D; --cyan:#2FBBCC; --link:#08718A; --glow:rgba(47,187,204,.14);
  --grad-a:#2E9E80; --grad-b:#1596AD;
  --fs-micro:.6875rem; --fs-small:.875rem; --measure:63ch;
  --gut:clamp(1.25rem,5vw,3.5rem); --rail:1.75rem;
}
@media (prefers-color-scheme:dark){
  :root{
    --ground:#071A1F; --surface:#0C2429; --ink:#E4F0F1; --ink-2:#94ABB0; --ink-3:#6B858B;
    --rule:#17353C; --rule-2:#102A30; --link:#4DCBDE; --glow:rgba(86,190,157,.16);
    --grad-a:#56BE9D; --grad-b:#2FBBCC;
  }
}
:root[data-theme="dark"]{
  --ground:#071A1F; --surface:#0C2429; --ink:#E4F0F1; --ink-2:#94ABB0; --ink-3:#6B858B;
  --rule:#17353C; --rule-2:#102A30; --link:#4DCBDE; --glow:rgba(86,190,157,.16);
  --grad-a:#56BE9D; --grad-b:#2FBBCC;
}
:root[data-theme="light"]{
  --ground:#F4F8F9; --surface:#FFFFFF; --ink:#0C242A; --ink-2:#4E656B; --ink-3:#7E9298;
  --rule:#D7E4E6; --rule-2:#E7EFF0; --link:#08718A; --glow:rgba(47,187,204,.14);
  --grad-a:#2E9E80; --grad-b:#1596AD;
}

*{box-sizing:border-box}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:'Manrope',ui-sans-serif,system-ui,sans-serif; font-size:1rem; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit}
img{max-width:100%;display:block}
:focus-visible{outline:2px solid var(--cyan); outline-offset:3px}

.mono{font-family:'JBMono',ui-monospace,SFMono-Regular,Menlo,monospace}
.tag{
  font-family:'JBMono',ui-monospace,Menlo,monospace; font-weight:500; font-size:var(--fs-micro);
  letter-spacing:.13em; text-transform:uppercase; color:var(--ink-3);
}
h1,h2,h3{font-family:'Bricolage',ui-sans-serif,sans-serif; font-weight:700; letter-spacing:-.025em; text-wrap:balance; margin:0}
.wrap{max-width:1080px; margin:0 auto; padding-inline:var(--gut)}

/* ---- trunk: a git branch running the length of the page ---- */
.trunk{position:relative}
.wrap{position:relative}
.node{position:relative}
@media (min-width:900px){
  .wrap::before{
    content:""; position:absolute; left:calc(var(--gut) - var(--rail)); top:0; bottom:0; width:2px;
    background:linear-gradient(180deg,var(--mint),var(--cyan)); opacity:.45;
  }
  .node::before{
    content:""; position:absolute; left:calc(-1 * var(--rail) - 5px); top:-6px;
    width:12px; height:12px; border-radius:50%;
    background:var(--ground); border:2px solid var(--cyan); box-shadow:0 0 0 5px var(--glow);
  }
}

.btn{
  display:inline-flex; align-items:center; gap:.5rem; text-decoration:none; padding:.7rem 1.25rem;
  border-radius:999px; font-weight:600; font-size:.9375rem; border:1px solid transparent; transition:.2s;
}
.btn--go{background:linear-gradient(96deg,var(--mint),var(--cyan)); color:#04222A}
.btn--go:hover{filter:brightness(1.07)}
.btn--ghost{border-color:var(--rule); color:var(--ink)}
.btn--ghost:hover{border-color:var(--cyan); color:var(--link)}

/* ---- sections ---- */
section{padding-block:clamp(2.75rem,7vw,4.25rem); border-top:1px solid var(--rule-2)}
.head{margin-bottom:clamp(1.75rem,4vw,2.5rem)}
.head h2{font-size:clamp(1.7rem,4vw,2.6rem); line-height:1.05; margin-top:.5rem}
.copy{max-width:var(--measure); color:var(--ink-2); text-wrap:pretty}
.copy p{margin:0 0 1.1em}
.copy p:last-child{margin-bottom:0}
.copy strong{color:var(--ink); font-weight:600}
.copy a{color:var(--link); text-decoration:none; border-bottom:1px solid var(--glow)}
.copy a:hover{border-bottom-color:var(--cyan)}

footer{border-top:1px solid var(--rule-2); padding-block:2rem 3rem}
.footrow{display:flex; flex-wrap:wrap; gap:.6rem 2rem; justify-content:space-between; align-items:center}
.footrow a{color:var(--ink-2); text-decoration:none}
.footrow a:hover{color:var(--link)}

@media (prefers-reduced-motion:reduce){ *{transition:none !important; animation:none !important} }