/* Boston Brokers — Cinematic + Atlas · design tokens */
:root{
  /* Ink palette */
  --ink:#0c0c08;
  --ink-2:#14140e;
  --ink-3:#1b1b13;
  --paper:#f3efe4;
  --paper-2:#e8e0cf;
  --cream:#ede4d0;

  /* Brand */
  --green:#1a5d3a;
  --green-deep:#0f4d2f;
  --green-darkest:#07321d;
  --gold:#c9a879;
  --gold-deep:#9e7a37;

  /* Functional */
  --live:#c9a879;
  --uo:#c7431f;
  --sold:#7a7a6e;

  /* Surfaces */
  --line:rgba(255,255,255,.12);
  --line-soft:rgba(255,255,255,.07);
  --line-ink:rgba(0,0,0,.12);
  --text-dim:rgba(255,255,255,.62);
  --text-mute:rgba(255,255,255,.45);

  /* Type */
  --serif:'Fraunces',ui-serif,Georgia,serif;
  --sans:'Inter','Inter Fallback',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,Menlo,monospace;

  /* Scale */
  --text-xs:11px;
  --text-sm:13px;
  --text-base:15px;
  --text-md:17px;
  --text-lg:22px;
  --text-xl:28px;
  --text-2xl:36px;
  --text-3xl:clamp(36px,4.2vw,56px);
  --text-4xl:clamp(48px,5.4vw,82px);
  --text-hero:clamp(120px,22vw,340px);

  /* Spacing */
  --pad-page:40px;
  --pad-section:140px;

  /* Motion */
  --ease:cubic-bezier(.2,.7,.2,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--ink);color:var(--paper);font-family:var(--sans);font-weight:300;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img,video{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
input,select,textarea{font:inherit;color:inherit}

/* Typography utilities */
.eyebrow{font-size:var(--text-xs);letter-spacing:.32em;text-transform:uppercase;font-weight:400;color:var(--gold)}
.eyebrow-line{display:inline-flex;align-items:center;gap:14px}
.eyebrow-line::before{content:"";width:28px;height:1px;background:currentColor}

.h-hero{font-family:var(--serif);font-weight:200;font-style:italic;font-size:var(--text-hero);line-height:.9;letter-spacing:-.04em}
.h-xxl{font-family:var(--serif);font-weight:300;font-style:italic;font-size:var(--text-4xl);line-height:1.02;letter-spacing:-.02em}
.h-xl{font-family:var(--serif);font-weight:300;font-style:italic;font-size:var(--text-3xl);line-height:1.05;letter-spacing:-.015em}
.h-lg{font-family:var(--serif);font-weight:300;font-style:italic;font-size:var(--text-xl);line-height:1.12;letter-spacing:-.01em}

.prose{font-size:var(--text-md);line-height:1.7;color:var(--text-dim)}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:14px;font-size:12px;letter-spacing:.24em;text-transform:uppercase;padding:15px 26px;border:1px solid rgba(255,255,255,.25);border-radius:999px;color:#fff;transition:background .4s var(--ease),color .4s var(--ease),border-color .4s var(--ease)}
.btn:hover{background:var(--gold);color:var(--ink);border-color:var(--gold)}
.btn--gold{border-color:var(--gold);color:var(--gold)}
.btn--gold:hover{background:var(--gold);color:var(--ink)}
.btn--ghost{border-color:rgba(255,255,255,.2)}
.btn--light{border-color:rgba(0,0,0,.25);color:var(--ink)}
.btn--light:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}

/* Container */
.container{max-width:1400px;margin:0 auto;padding:0 var(--pad-page)}
.container-sm{max-width:1100px;margin:0 auto;padding:0 var(--pad-page)}

/* Film grain overlay (optional utility) */
.grain::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:9;opacity:.06;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='3'/><feColorMatrix values='0 0 0 0 .9 0 0 0 0 .9 0 0 0 0 .85 0 0 0 0 .6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

@media (max-width:860px){
  :root{ --pad-page:22px; --pad-section:80px; }
}