/* PlayoffProof shared brand system — heritage editorial (Aimé Leon Dore-inspired).
   Link AFTER fonts.css on every page. One source of truth for palette, type, and components,
   so pages stop drifting into one-off looks. */
:root{
  --ivory:#e8e2d5;--paper:#f3eee3;--card:#f5f0e5;--field:#fffdf8;
  --ink:#1d1b16;--ink2:#514d40;--muted:#8d8878;
  --green:#1c3a30;--green2:#142b23;--gold:#b2914a;--cognac:#8f6330;--rose:#bd7d74;--brick:#9e4030;--deep:#4a3a24;
  --rule:rgba(29,27,22,.14);--rule2:rgba(29,27,22,.26);
  --serif:'Playfair Display',Georgia,serif;
  --sans:'Helvetica Neue',Helvetica,Arial,sans-serif;
  --script:'Pinyon Script',cursive;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--ivory);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased;line-height:1.6}
a{color:var(--ink2);text-decoration:none}
.it{font-style:italic}
.rose{color:var(--rose)}.g{color:var(--green)}.cognac{color:var(--cognac)}

/* film grain (add <div class="grain"></div> once per page) */
.grain{position:fixed;inset:0;pointer-events:none;z-index:2;opacity:.045;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* type */
h1,h2,h3{font-family:var(--serif);font-weight:600;line-height:1.06;letter-spacing:0;color:var(--ink)}
.eyebrow{font-size:10.5px;letter-spacing:.34em;text-transform:uppercase;color:var(--muted)}
.script{font-family:var(--script);font-weight:400;color:var(--cognac)}
.sub{color:var(--ink2);line-height:1.7}
.sub b{color:var(--ink);font-weight:700}
.fine{font-size:12px;color:var(--muted);line-height:1.7}
.fine b{color:var(--ink2)}

/* brand lockup (basketball mark + wordmark) */
.brand{display:inline-flex;align-items:center;gap:11px;font-family:var(--serif);font-weight:600;font-size:20px;letter-spacing:.01em;color:var(--ink)}
.brand svg{width:24px;height:24px}
.brand .seam{fill:none;stroke:var(--cognac);stroke-width:3.6;stroke-linecap:round}

/* card */
.card{background:var(--paper);border:1px solid var(--gold);border-radius:6px;box-shadow:0 30px 60px -34px rgba(28,58,48,.5)}

/* buttons */
.btn{font-family:var(--sans);font-size:11px;letter-spacing:.22em;text-transform:uppercase;background:var(--green);color:#f0ebdf;
  border:0;border-radius:2px;padding:16px 30px;text-decoration:none;cursor:pointer;transition:background .18s;
  display:inline-flex;align-items:center;justify-content:center;gap:12px}
.btn:hover{background:var(--green2)}
.btn:disabled{opacity:.5;cursor:wait}
.btn-ghost{background:transparent;border:1px solid var(--green);color:var(--green)}
.btn-ghost:hover{background:var(--green);color:var(--paper)}
.tlink{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink2);border-bottom:1px solid var(--cognac);padding-bottom:3px}

/* forms */
label{display:block;font-size:10.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin:18px 0 7px}
input,select{width:100%;background:var(--field);border:1px solid var(--rule2);border-radius:3px;padding:13px 15px;font:inherit;font-size:15px;color:var(--ink);outline:none;transition:border-color .15s}
input:focus,select:focus{border-color:var(--green)}
input::placeholder{color:var(--muted)}

/* callout / lock note */
.note{display:flex;gap:10px;align-items:flex-start;background:rgba(28,58,48,.06);border:1px solid var(--rule2);border-radius:4px;padding:13px 15px;font-size:12.5px;color:var(--ink2);line-height:1.55}

/* long-form document pages (legal, guides) */
.doc{max-width:720px;margin:0 auto;padding:38px 22px 80px;text-align:left}
.doc .brand{margin-bottom:26px}
.doc h1{font-size:clamp(30px,5vw,40px);margin:20px 0 4px}
.doc h2{font-size:19px;margin:30px 0 8px}
.doc p,.doc li{color:var(--ink2);font-size:15px;line-height:1.72}
.doc p{margin:0 0 12px}
.doc li{margin:5px 0}
.doc b{color:var(--ink)}
.doc .eff{color:var(--muted);font-size:13px;margin-bottom:24px}
.doc .foot{margin-top:46px;padding-top:20px;border-top:1px solid var(--rule);color:var(--muted);font-size:13px;display:flex;gap:18px;flex-wrap:wrap}

/* CTA swish (small basket at rest; ball drops through the net on hover) */
.btn .swish{width:26px;height:26px;overflow:visible;flex:none}
.btn .rim{fill:none;stroke:var(--gold);stroke-width:1.6;stroke-linecap:round}
.btn .net{fill:none;stroke:#f0ebdf;stroke-width:.9;stroke-linecap:round;opacity:.5;transform-origin:13px 13px}
.btn .ball{fill:var(--paper);stroke:var(--cognac);stroke-width:.7}
.btn .ballseam{stroke:var(--cognac);stroke-width:.5;fill:none;opacity:.6}
.btn .ballwrap{transform:translateY(-15px);opacity:0}
.btn:hover .ballwrap{animation:swish .9s cubic-bezier(.5,.05,.5,1) forwards}
.btn:hover .net{animation:netflick .9s ease forwards}
@keyframes swish{0%{transform:translateY(-15px);opacity:0}18%{opacity:1}55%{transform:translateY(4px);opacity:1}80%{transform:translateY(16px);opacity:1}100%{transform:translateY(26px);opacity:0}}
@keyframes netflick{0%,40%{transform:scaleX(1) scaleY(1)}58%{transform:scaleX(1.18) scaleY(1.12)}74%{transform:scaleX(.92) scaleY(.96)}100%{transform:scaleX(1) scaleY(1)}}
@media(prefers-reduced-motion:reduce){.btn:hover .ballwrap,.btn:hover .net{animation:none}}