/* ===========================================================
   Shared brand atoms across the three layout explorations.
   =========================================================== */

:root{
  --ink:#12150F;
  --green:#2C4A36;          /* forest */
  --green-deep:#1F3527;     /* deeper green for text on cream */
  --cream:#F2ECDC;
  --paper:#F7F2E5;
  --rule:rgba(18,21,15,.14);
  --rule-strong:rgba(18,21,15,.28);
  --muted:rgba(18,21,15,.55);
  --muted2:rgba(18,21,15,.78);
  --serif:"Fraunces", ui-serif, Georgia, serif;
  --mono:"JetBrains Mono", ui-monospace, monospace;
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--paper);color:var(--ink)}
body{
  font-family:var(--serif);
  font-weight:400;
  font-size:18px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{color:inherit;text-decoration:none}
a.link{border-bottom:1px solid currentColor;padding-bottom:1px;transition:opacity 140ms}
a.link:hover{opacity:.6}
::selection{background:var(--green);color:var(--cream)}

.compare-bar{
  position:fixed;top:12px;left:12px;z-index:100;
  display:flex;gap:6px;
  font-family:var(--mono);font-size:10px;letter-spacing:1.4px;text-transform:uppercase;
  background:rgba(247,242,229,.9);backdrop-filter:blur(8px);
  padding:6px;border:1px solid var(--rule);
}
.compare-bar a{padding:6px 10px;border:1px solid var(--rule);color:var(--muted2)}
.compare-bar a.is-active{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.compare-bar a:hover{color:var(--ink)}

/* Seedling — used inline anywhere via .brand-seed */
.brand-seed{display:inline-flex;line-height:0}
.brand-seed svg{width:100%;height:100%;display:block}