/* ============================================================
   Lotus Intelligence — design system
   Palette: deep plum + antique gold on paper ivory.
   "Private bank annual letter", not SaaS. No gradients, one accent.
   ============================================================ */

:root{
  /* palette (brief §8) */
  --paper:#fbf8f4;        /* substrate */
  --cream:#f3efe2;        /* offer inset bg */
  --ink:#280e1c;          /* text / chrome — deep plum */
  --ink-2:#4f3643;        /* secondary ink — aubergine */
  --muted:#ac9ea3;        /* mauve grey — metadata */
  --muted-2:#8d7b81;      /* mauve grey, a touch darker for small body */
  --gold:#b58c4a;         /* accent / rules / single highlight */
  --gold-2:#c6aa7b;       /* soft gold */
  --sand:#d8c5a5;         /* warm sand — panel/hover */
  --rule:#d8c5a5;         /* hairline rule */
  --rule-soft:#e7dcc8;    /* faint rule */
  --amber-deep:#7a4a1d;   /* offer inset left rule (email continuity) */

  --maxw:1120px;
  --gutter:40px;
  --col-num:148px;        /* narrow mono overline / number column */

  --serif:"Source Serif 4", Georgia, "Times New Roman", serif;
  --display:"DM Serif Display", Georgia, serif;
  --sans:"IBM Plex Sans", system-ui, sans-serif;
  --mono:"IBM Plex Mono", ui-monospace, monospace;
}

*{ box-sizing:border-box }
html{ scroll-behavior:smooth }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto } }

body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--serif); font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}

::selection{ background:var(--sand); color:var(--ink) }

/* ---------- type ---------- */
.mono{ font-family:var(--mono); text-transform:uppercase; letter-spacing:.14em }
.overline{ font-family:var(--mono); font-size:11px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--gold); margin:0 }
.eyebrow-muted{ color:var(--muted-2) }

h1,h2,h3{ font-weight:400; margin:0; text-wrap:balance }
.display{ font-family:var(--display) }
p{ text-wrap:pretty }

a{ color:var(--ink); text-decoration:none }

/* ---------- layout shell ---------- */
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 var(--gutter) }
@media (max-width:720px){ :root{ --gutter:22px } }

/* asymmetric section: narrow mono/number column + wide content column */
.section{ padding:76px var(--gutter) }
.section-grid{
  display:grid;
  grid-template-columns:var(--col-num) 1fr;
  column-gap:48px;
}
.section-grid .colnum{
  font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted-2); padding-top:6px; line-height:1.7;
}
.section-grid .colnum .idx{ color:var(--gold); display:block; font-size:13px; margin-bottom:8px }
.section-content{ max-width:760px }
@media (max-width:860px){
  .section-grid{ grid-template-columns:1fr; row-gap:18px }
  .section-grid .colnum{ padding-top:0 }
}

/* hairline gold rule that draws in on scroll (motion #2) */
.rule-draw{ height:1px; background:var(--rule); transform:scaleX(0); transform-origin:left center;
  transition:transform .6s cubic-bezier(.2,.7,.2,1) }
.rule-draw.in{ transform:scaleX(1) }
@media (prefers-reduced-motion: reduce){ .rule-draw{ transform:none; transition:none } }

/* ---------- buttons (brief §8 hover spec) ---------- */
.btn{ display:inline-flex; align-items:center; gap:.5em; font-family:var(--sans);
  font-size:14px; font-weight:500; letter-spacing:.01em; padding:13px 22px;
  border:1px solid var(--ink); cursor:pointer; transition:background .18s, color .18s, border-color .18s; }
.btn-primary{ background:var(--ink); color:var(--paper) }
.btn-primary:hover{ background:var(--paper); color:var(--ink) } /* inverts plum->ivory */
.btn-outline{ background:transparent; color:var(--ink); border-color:var(--sand) }
.btn-outline:hover{ border-color:var(--gold) }                  /* gains a gold rule */
.btn-amber{ background:var(--amber-deep); color:#fff; border-color:var(--amber-deep) }
.btn-amber:hover{ background:#5f3914; border-color:#5f3914 }

/* inline link — underline lift */
.link{ color:var(--ink); border-bottom:1px solid var(--gold); padding-bottom:1px;
  transition:border-color .18s, color .18s }
.link:hover{ color:var(--gold) }
.link-mono{ font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-2); border-bottom:1px solid var(--sand) }
.link-mono:hover{ color:var(--ink); border-color:var(--gold) }

/* focus ring — visible gold */
:focus-visible{ outline:2px solid var(--gold); outline-offset:3px }

/* ---------- reveal on scroll ---------- */
.reveal{ opacity:0; transform:translateY(14px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1) }
.reveal.in{ opacity:1; transform:none }
@media (prefers-reduced-motion: reduce){ .reveal{ opacity:1; transform:none; transition:none } }