/* ========================================================================== 80 SCALE PROSPECT — core stylesheet Palette, type and layout tokens. Edit here first. ========================================================================== */ /* -------------------------------------------------------------------------- COLOR SYSTEM Three approved schemes. Switch the whole site by changing one attribute: Gold Standard (default, matches the deck) Night Game (cooler, stadium-lights) Clay & Chalk (warmer, infield dirt) Preview all three side by side at /palette.html -------------------------------------------------------------------------- */ :root, [data-theme="gold"]{ --ink:#0A0A0B; /* page background, darkest value */ --panel:#141417; /* raised surfaces: cards, nav drawer */ --panel-2:#1C1C20; /* image wells, inset areas */ --gold:#C8942A; /* primary accent: buttons, rules, marks */ --gold-bright:#E7B84B; /* accent type on dark backgrounds */ --gold-deep:#8C6416; /* accent type on light backgrounds */ --bone:#F5F3EE; /* light sections, body type on dark */ --bone-2:#E7E4DB; /* light-section wells */ --chalk:#D8D4C8; /* secondary type on dark */ --rule-dark:rgba(255,255,255,.14); --rule-light:rgba(10,10,11,.14); --body-on-light:#3B3B3F; --muted-on-light:#6A6A70; --ok:#3F8F4F; --no:#B23A32; } /* Night Game — cooler, blue-black like a field under lights */ [data-theme="night"]{ --ink:#0A0E13; --panel:#111823; --panel-2:#18212E; --gold:#D0A23C; --gold-bright:#F0C863; --gold-deep:#7E6018; --bone:#EEF1F4; --bone-2:#DDE3E9; --chalk:#C4CDD6; --rule-dark:rgba(238,241,244,.15); --rule-light:rgba(10,14,19,.14); --body-on-light:#2F3742; --muted-on-light:#5E6874; --ok:#3F8F4F; --no:#B23A32; } /* Clay & Chalk — warmer, infield dirt and chalk line */ [data-theme="clay"]{ --ink:#12100D; --panel:#1B1813; --panel-2:#242019; --gold:#C98B2E; --gold-bright:#EBB558; --gold-deep:#8A5A14; --bone:#F4EFE4; --bone-2:#E6DFCE; --chalk:#DED5C2; --rule-dark:rgba(244,239,228,.16); --rule-light:rgba(18,16,13,.15); --body-on-light:#413A30; --muted-on-light:#6E6455; --ok:#3F8F4F; --no:#B23A32; } :root{ --display:"Anton",Impact,"Haettenschweiler","Arial Narrow Bold",sans-serif; --script:"Kaushan Script",cursive; --body:"Barlow",system-ui,-apple-system,Segoe UI,Roboto,sans-serif; --util:"Barlow Condensed",system-ui,sans-serif; --wrap:1180px; --pad:clamp(18px,4vw,40px); --gap:clamp(18px,2.4vw,32px); --sec:clamp(64px,8.5vw,124px); } /* Reset ------------------------------------------------------------------ */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{margin:0;background:var(--ink);color:var(--bone);font-family:var(--body);font-size:clamp(16px,1.05vw,17.5px);line-height:1.62;-webkit-font-smoothing:antialiased} img{max-width:100%;display:block} a{color:inherit} h1,h2,h3,h4,p,ul,ol,figure{margin:0} ul,ol{padding:0;list-style:none} button{font:inherit} :focus-visible{outline:3px solid var(--gold-bright);outline-offset:3px;border-radius:2px} .skip{position:absolute;left:-9999px;top:0;background:var(--gold);color:#000;padding:12px 18px;font-family:var(--util);font-weight:700;letter-spacing:.08em;text-transform:uppercase;z-index:100} .skip:focus{left:12px;top:12px} /* Type ------------------------------------------------------------------- */ .display{font-family:var(--display);font-weight:400;text-transform:uppercase;line-height:.92;letter-spacing:.005em} .h1{font-family:var(--display);font-weight:400;text-transform:uppercase;line-height:.9;letter-spacing:.004em;font-size:clamp(44px,7.4vw,104px)} .h2{font-family:var(--display);font-weight:400;text-transform:uppercase;line-height:.94;letter-spacing:.006em;font-size:clamp(32px,4.6vw,60px)} .h3{font-family:var(--display);font-weight:400;text-transform:uppercase;line-height:1;letter-spacing:.01em;font-size:clamp(21px,2.1vw,27px)} .h4{font-family:var(--util);font-weight:700;text-transform:uppercase;letter-spacing:.1em;font-size:15px} .gold{color:var(--gold-bright)} .script{font-family:var(--script);text-transform:none;font-size:.62em;color:var(--gold-bright);letter-spacing:0;line-height:1} .eyebrow{font-family:var(--util);text-transform:uppercase;letter-spacing:.22em;font-weight:600;font-size:13px;color:var(--gold);display:flex;align-items:center;gap:12px} .eyebrow::after{content:"";height:1px;flex:1;background:linear-gradient(90deg,var(--gold),transparent);max-width:120px} .eyebrow--center{justify-content:center} .eyebrow--center::before{content:"";height:1px;flex:1;background:linear-gradient(270deg,var(--gold),transparent);max-width:120px} .lede{font-size:clamp(17px,1.5vw,21px);line-height:1.55;color:var(--chalk);max-width:60ch} .muted{color:rgba(245,243,238,.66)} .tight{max-width:66ch} /* Layout ----------------------------------------------------------------- */ .wrap{width:min(var(--wrap),100% - var(--pad)*2);margin-inline:auto} .section{padding-block:var(--sec);position:relative} .section--bone{background:var(--bone);color:var(--ink)} .section--bone .lede,.section--bone .muted{color:var(--body-on-light)} .section--panel{background:var(--panel)} .section--tight{padding-block:clamp(44px,5vw,70px)} .head{display:grid;gap:14px;margin-bottom:clamp(30px,4vw,56px);max-width:70ch} .head--center{margin-inline:auto;text-align:center;justify-items:center} .grid{display:grid;gap:var(--gap)} @media(min-width:720px){ .grid--2{grid-template-columns:repeat(2,1fr)} .grid--3{grid-template-columns:repeat(2,1fr)} .grid--4{grid-template-columns:repeat(2,1fr)} } @media(min-width:1000px){ .grid--3{grid-template-columns:repeat(3,1fr)} .grid--4{grid-template-columns:repeat(4,1fr)} } /* Pinstripe — the uniform motif from the badge ---------------------------- */ .pinstripe{background-image:repeating-linear-gradient(90deg,transparent 0 9px,rgba(245,243,238,.075) 9px 10px)} .section--bone .pinstripe{background-image:repeating-linear-gradient(90deg,transparent 0 9px,rgba(10,10,11,.07) 9px 10px)} /* Header ----------------------------------------------------------------- */ .site-header{position:sticky;top:0;z-index:50;background:rgba(10,10,11,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--rule-dark)} .site-header .bar{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-block:12px} .brand{display:flex;align-items:center;gap:12px;text-decoration:none} .brand img{width:46px;height:46px} .brand span{font-family:var(--util);font-weight:700;text-transform:uppercase;letter-spacing:.14em;font-size:14px;line-height:1.1} .brand small{display:block;color:var(--gold);letter-spacing:.2em;font-size:10.5px} .nav{display:flex;align-items:center;gap:26px} .nav a{font-family:var(--util);text-transform:uppercase;letter-spacing:.12em;font-weight:600;font-size:14.5px;text-decoration:none;color:rgba(245,243,238,.8);padding-block:6px;border-bottom:2px solid transparent} .nav a:hover{color:var(--bone)} .nav a[aria-current="page"]{color:var(--bone);border-bottom-color:var(--gold)} .nav .btn{margin-left:6px} .navtoggle{display:none;background:none;border:1px solid var(--rule-dark);color:var(--bone);padding:9px 12px;font-family:var(--util);text-transform:uppercase;letter-spacing:.12em;font-weight:700;font-size:13px;cursor:pointer} @media(max-width:940px){ .navtoggle{display:block} .nav{position:fixed;inset:69px 0 auto 0;background:var(--ink);border-bottom:1px solid var(--rule-dark);flex-direction:column;align-items:stretch;gap:0;padding:8px var(--pad) 22px;display:none} .nav.open{display:flex} .nav a{padding:14px 0;border-bottom:1px solid var(--rule-dark)} .nav a[aria-current="page"]{border-bottom-color:var(--gold)} .nav .btn{margin:16px 0 0} } /* Buttons ---------------------------------------------------------------- */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:var(--util);font-weight:700;text-transform:uppercase;letter-spacing:.13em;font-size:14.5px;padding:14px 26px;text-decoration:none;border:2px solid transparent;cursor:pointer;transition:transform .16s ease,background .16s ease,color .16s ease} .btn--gold{background:var(--gold);color:#0A0A0B} .btn--gold:hover{background:var(--gold-bright);transform:translateY(-2px)} .btn--ghost{border-color:rgba(245,243,238,.4);color:var(--bone)} .btn--ghost:hover{border-color:var(--gold);color:var(--gold-bright);transform:translateY(-2px)} .section--bone .btn--ghost{border-color:rgba(10,10,11,.35);color:var(--ink)} .section--bone .btn--ghost:hover{border-color:var(--gold);color:var(--gold-deep)} .btns{display:flex;flex-wrap:wrap;gap:14px} /* Hero ------------------------------------------------------------------- */ .hero{position:relative;overflow:hidden;background:var(--ink);border-bottom:1px solid var(--rule-dark)} .hero::before{content:"";position:absolute;inset:0;background-image:repeating-linear-gradient(90deg,transparent 0 11px,rgba(245,243,238,.05) 11px 12px);opacity:.9} .hero::after{content:"";position:absolute;right:-14%;top:-30%;width:78vw;height:150%;background:radial-gradient(closest-side,rgba(200,148,42,.26),transparent 72%)} .hero .wrap{position:relative;z-index:1;padding-block:clamp(56px,9vw,112px);display:grid;gap:var(--gap)} @media(min-width:980px){.hero .wrap{grid-template-columns:1.12fr .88fr;align-items:center;column-gap:clamp(32px,4vw,64px)}} .herofig{margin:0;position:relative} .herofig img{width:100%;aspect-ratio:5/7;object-fit:cover;object-position:50% 22%;border:1px solid var(--rule-dark)} .herofig::after{content:"";position:absolute;inset:14px -14px -14px 14px;border:1px solid var(--gold);z-index:-1} .herofig figcaption{font-family:var(--util);text-transform:uppercase;letter-spacing:.15em;font-size:11.5px;color:rgba(245,243,238,.55);margin-top:12px} @media(max-width:979px){.herofig{max-width:420px}.herofig img{aspect-ratio:4/3;object-position:50% 8%}} .hero .h1{margin-block:18px 20px} .hero .h1 em{font-style:normal;display:block;color:var(--gold-bright)} .hero .lede{margin-bottom:30px} .philo{display:grid;gap:2px;grid-column:1/-1;margin-top:clamp(40px,5vw,64px);border:1px solid var(--rule-dark);background:var(--rule-dark)} @media(min-width:760px){.philo{grid-template-columns:repeat(4,1fr)}} .philo li{background:var(--panel);padding:22px 24px;display:grid;gap:6px} .philo b{font-family:var(--display);text-transform:uppercase;font-size:clamp(20px,2.1vw,26px);font-weight:400;letter-spacing:.01em;line-height:1} .philo li:last-child b{color:var(--gold-bright)} .philo span{font-family:var(--util);text-transform:uppercase;letter-spacing:.16em;font-size:12px;color:rgba(245,243,238,.55)} /* The 20–80 scale rail — signature device -------------------------------- */ .rail{position:relative;margin:0;padding:0;display:grid;grid-template-columns:repeat(7,1fr);align-items:end;gap:0;border-bottom:2px solid var(--gold);padding-bottom:10px} .rail li{font-family:var(--util);font-weight:700;font-size:13px;letter-spacing:.14em;color:rgba(245,243,238,.4);text-align:center;position:relative;padding-bottom:12px} .rail li::after{content:"";position:absolute;left:50%;bottom:-12px;width:1px;height:12px;background:rgba(245,243,238,.32)} .rail li:last-child{color:var(--gold-bright);font-size:17px} .rail li:last-child::after{height:20px;bottom:-12px;width:2px;background:var(--gold-bright)} .section--bone .rail li{color:rgba(10,10,11,.4)} .section--bone .rail li::after{background:rgba(10,10,11,.28)} .section--bone .rail li:last-child{color:var(--gold-deep)} .railnote{font-family:var(--util);text-transform:uppercase;letter-spacing:.18em;font-size:12px;color:var(--gold);margin-top:14px;text-align:center} /* Cards ------------------------------------------------------------------ */ .card{background:var(--panel);border:1px solid var(--rule-dark);padding:clamp(22px,2.6vw,30px);display:grid;gap:12px;align-content:start;position:relative} .card--bone{background:#FFFFFF;border-color:var(--rule-light);color:var(--ink)} .card .h3{margin-bottom:2px} .card p{color:rgba(245,243,238,.72);font-size:15.5px} .card--bone p{color:var(--body-on-light)} .card .tick{font-family:var(--util);text-transform:uppercase;letter-spacing:.16em;font-size:11.5px;color:var(--gold)} .list{display:grid;gap:9px} .list li{position:relative;padding-left:22px;font-size:15.5px;color:rgba(245,243,238,.78)} .card--bone .list li,.section--bone .list li{color:var(--body-on-light)} .list li::before{content:"";position:absolute;left:0;top:.62em;width:9px;height:2px;background:var(--gold)} .tag{display:inline-block;font-family:var(--util);text-transform:uppercase;letter-spacing:.14em;font-weight:700;font-size:11.5px;color:#0A0A0B;background:var(--gold);padding:4px 10px} /* Journey chain ---------------------------------------------------------- */ .chain{display:grid;gap:0;border-top:1px solid var(--rule-dark)} @media(min-width:860px){.chain{grid-template-columns:repeat(5,1fr);border-top:0}} .chain li{padding:20px 0;border-bottom:1px solid var(--rule-dark);position:relative} @media(min-width:860px){ .chain li{border-bottom:0;border-top:3px solid var(--rule-dark);padding:22px 22px 0 0} .chain li:last-child{border-top-color:var(--gold)} } .section--bone .chain,.section--bone .chain li{border-color:var(--rule-light)} @media(min-width:860px){.section--bone .chain li:last-child{border-top-color:var(--gold)}} .chain b{display:block;font-family:var(--display);text-transform:uppercase;font-weight:400;font-size:clamp(19px,1.9vw,24px);line-height:1.02} .chain span{font-family:var(--util);text-transform:uppercase;letter-spacing:.16em;font-size:11.5px;color:rgba(245,243,238,.5)} .section--bone .chain span{color:var(--muted-on-light)} .chain li:last-child b{color:var(--gold-bright)} .section--bone .chain li:last-child b{color:var(--gold-deep)} /* Roadmap ---------------------------------------------------------------- */ .road{display:grid;gap:0} .step{display:grid;grid-template-columns:auto 1fr;gap:clamp(18px,3vw,38px);padding-block:clamp(24px,3vw,34px);border-top:1px solid var(--rule-dark)} .step:last-child{border-bottom:1px solid var(--rule-dark)} .step .no{font-family:var(--display);font-size:clamp(38px,5.4vw,68px);line-height:.8;color:transparent;-webkit-text-stroke:1.5px rgba(245,243,238,.32)} .step:last-child .no{-webkit-text-stroke-color:var(--gold);color:rgba(200,148,42,.14)} .section--bone .step{border-color:var(--rule-light)} .section--bone .step:last-child{border-bottom-color:var(--rule-light)} .section--bone .step .no{-webkit-text-stroke-color:rgba(10,10,11,.34)} .section--bone .step:last-child .no{-webkit-text-stroke-color:var(--gold);color:rgba(200,148,42,.18)} .step .body{display:grid;gap:10px;max-width:62ch} .step .grade{font-family:var(--util);font-weight:700;letter-spacing:.16em;font-size:12px;color:var(--gold)} /* Comparison ------------------------------------------------------------- */ .compare{display:grid;gap:var(--gap)} @media(min-width:860px){.compare{grid-template-columns:1fr 1fr}} .compare .col{border:1px solid var(--rule-light);background:#fff} .compare .col h3{padding:16px 22px;background:var(--ink);color:var(--bone);font-family:var(--display);text-transform:uppercase;font-weight:400;letter-spacing:.02em;font-size:22px} .compare .col--us h3{background:var(--gold);color:#0A0A0B} .compare ul{display:grid} .compare li{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;padding:13px 22px;border-top:1px solid var(--rule-light);font-size:15.5px;color:var(--body-on-light)} .compare .mark{font-family:var(--util);font-weight:700;font-size:15px;line-height:1.45} .compare .col--old .mark{color:var(--no)} .compare .col--us .mark{color:var(--ok)} /* Stats ------------------------------------------------------------------ */ .stats{display:grid;gap:2px;background:var(--rule-dark);border:1px solid var(--rule-dark)} @media(min-width:640px){.stats{grid-template-columns:repeat(3,1fr)}} .stat{background:var(--panel);padding:26px 24px;display:grid;gap:4px} .stat b{font-family:var(--display);font-size:clamp(34px,4.4vw,52px);line-height:.9;color:var(--gold-bright);font-weight:400} .stat span{font-family:var(--util);text-transform:uppercase;letter-spacing:.16em;font-size:12px;color:rgba(245,243,238,.6)} /* Pricing ---------------------------------------------------------------- */ .tiers{display:grid;gap:2px;background:var(--rule-light);border:1px solid var(--rule-light)} @media(min-width:900px){.tiers{grid-template-columns:repeat(4,1fr)}} .tier{background:var(--bone);padding:clamp(24px,2.6vw,32px);display:grid;gap:10px;align-content:start;color:var(--ink)} .tier--feature{background:var(--ink);color:var(--bone)} .tier .grade{font-family:var(--util);text-transform:uppercase;letter-spacing:.16em;font-weight:700;font-size:12.5px;color:var(--gold)} .tier .price{font-family:var(--display);font-size:clamp(38px,4.4vw,54px);line-height:.9;font-weight:400} .tier--feature .price{color:var(--gold-bright)} .tier .len{font-family:var(--util);text-transform:uppercase;letter-spacing:.13em;font-size:13px;color:var(--muted-on-light)} .tier--feature .len{color:rgba(245,243,238,.6)} .included{display:grid;gap:2px;background:var(--rule-dark);border:1px solid var(--rule-dark)} @media(min-width:640px){.included{grid-template-columns:repeat(3,1fr)}} .included li{background:var(--panel);padding:18px 22px;font-family:var(--util);text-transform:uppercase;letter-spacing:.1em;font-weight:600;font-size:14.5px} .included li::before{content:"★";color:var(--gold);margin-right:10px;font-size:11px;vertical-align:middle} /* Roster ----------------------------------------------------------------- */ .classes{display:grid;gap:var(--gap)} @media(min-width:700px){.classes{grid-template-columns:repeat(2,1fr)}} @media(min-width:1020px){.classes{grid-template-columns:repeat(3,1fr)}} .classcard{border:1px solid var(--rule-dark);background:var(--panel)} .classcard h3{background:var(--gold);color:#0A0A0B;font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:19px;letter-spacing:.03em;padding:11px 20px} .classcard ul{padding:8px 20px 18px} .classcard li{display:flex;justify-content:space-between;gap:14px;padding:9px 0;border-bottom:1px solid var(--rule-dark);font-size:15.5px} .classcard li:last-child{border-bottom:0} .classcard em{font-style:normal;font-family:var(--util);text-transform:uppercase;letter-spacing:.09em;font-size:12.5px;color:var(--gold);text-align:right;flex:0 0 auto;max-width:52%} .pros{display:grid;gap:2px;background:var(--rule-light);border:1px solid var(--rule-light)} @media(min-width:600px){.pros{grid-template-columns:repeat(3,1fr)}} @media(min-width:1000px){.pros{grid-template-columns:repeat(3,1fr)}} .pros li{background:#fff;padding:20px;display:grid;gap:4px} .pros b{font-family:var(--util);font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:16px} .pros span{font-family:var(--util);text-transform:uppercase;letter-spacing:.13em;font-size:11.5px;color:var(--muted-on-light)} /* Story feature ---------------------------------------------------------- */ .story{display:grid;gap:var(--gap);align-items:center} @media(min-width:900px){.story{grid-template-columns:1.05fr .95fr}} .frame{position:relative;border:1px solid var(--rule-dark);background:var(--panel-2);aspect-ratio:16/10;display:grid;place-items:center;overflow:hidden} .frame img{width:100%;height:100%;object-fit:cover} .frame .ph{font-family:var(--util);text-transform:uppercase;letter-spacing:.18em;font-size:12px;color:rgba(245,243,238,.42);text-align:center;padding:24px} .section--bone .frame{border-color:var(--rule-light);background:var(--bone-2)} .section--bone .frame .ph{color:rgba(10,10,11,.42)} .frame--wide{aspect-ratio:auto} .frame--wide img{aspect-ratio:16/9;object-fit:cover} .frame figcaption{position:absolute;left:0;right:0;bottom:0;padding:10px 16px;background:linear-gradient(0deg,rgba(10,10,11,.86),rgba(10,10,11,0));font-family:var(--util);text-transform:uppercase;letter-spacing:.13em;font-size:11.5px;color:var(--bone)} /* Form ------------------------------------------------------------------- */ .form{display:grid;gap:18px;background:#fff;border:1px solid var(--rule-light);padding:clamp(22px,3vw,38px);color:var(--ink)} @media(min-width:760px){.form{grid-template-columns:1fr 1fr}} .field{display:grid;gap:7px} .field--full{grid-column:1/-1} .field label{font-family:var(--util);text-transform:uppercase;letter-spacing:.13em;font-weight:700;font-size:12.5px;color:var(--body-on-light)} .field input,.field select,.field textarea{font:inherit;font-size:16px;padding:12px 14px;border:1px solid rgba(10,10,11,.28);background:#FBFAF7;color:var(--ink);border-radius:0;width:100%} .field input:focus,.field select:focus,.field textarea:focus{border-color:var(--gold);outline-offset:1px} .field textarea{min-height:110px;resize:vertical} .hp{position:absolute;left:-9999px} /* CTA band --------------------------------------------------------------- */ .cta{background:var(--gold);color:#0A0A0B;text-align:center} .cta .h2{margin-bottom:8px} .cta p{color:rgba(10,10,11,.78);margin-inline:auto;max-width:56ch} .cta .btns{justify-content:center;margin-top:26px} .cta .btn--dark{background:#0A0A0B;color:var(--bone)} .cta .btn--dark:hover{background:#000;transform:translateY(-2px)} .cta .btn--line{border-color:rgba(10,10,11,.45);color:#0A0A0B} .cta .btn--line:hover{border-color:#0A0A0B;transform:translateY(-2px)} /* Footer ----------------------------------------------------------------- */ .site-footer{background:#050506;border-top:1px solid var(--rule-dark);padding-block:clamp(44px,5vw,68px) 26px} .foot{display:grid;gap:var(--gap)} @media(min-width:820px){.foot{grid-template-columns:1.4fr 1fr 1fr}} .foot h4{margin-bottom:14px;color:var(--gold)} .foot a{text-decoration:none;color:rgba(245,243,238,.72);font-size:15.5px} .foot a:hover{color:var(--bone)} .foot ul{display:grid;gap:9px} .legal{margin-top:36px;padding-top:20px;border-top:1px solid var(--rule-dark);display:flex;flex-wrap:wrap;gap:10px 24px;justify-content:space-between;font-family:var(--util);text-transform:uppercase;letter-spacing:.12em;font-size:12px;color:rgba(245,243,238,.45)} /* Motion ----------------------------------------------------------------- */ .reveal{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease} .reveal.in{opacity:1;transform:none} @media(prefers-reduced-motion:reduce){ *{animation:none!important;transition:none!important} .reveal{opacity:1;transform:none} .btn:hover{transform:none} } /* Testimonials ----------------------------------------------------------- */ .quote{margin:0;background:var(--panel);border:1px solid var(--rule-dark);border-top:3px solid var(--gold);padding:clamp(24px,2.6vw,32px);display:grid;gap:18px;align-content:start} .quote blockquote{margin:0;font-size:17px;line-height:1.55;color:var(--chalk)} .quote blockquote::before{content:"\201C";font-family:var(--display);font-size:44px;line-height:0;color:var(--gold);display:block;margin-bottom:14px} .quote figcaption{display:grid;gap:2px;border-top:1px solid var(--rule-dark);padding-top:14px} .quote figcaption b{font-family:var(--util);text-transform:uppercase;letter-spacing:.1em;font-size:14.5px} .quote figcaption span{font-family:var(--util);text-transform:uppercase;letter-spacing:.14em;font-size:11.5px;color:var(--gold)} .section--bone .quote{background:#fff;border-color:var(--rule-light);border-top-color:var(--gold)} .section--bone .quote blockquote{color:var(--body-on-light)} .section--bone .quote figcaption{border-top-color:var(--rule-light)} /* Legal documents -------------------------------------------------------- */ .legaldoc{max-width:74ch} .legaldoc .h3{margin:clamp(30px,3.4vw,44px) 0 12px} .legaldoc .h3:first-child{margin-top:0} .legaldoc p{margin-bottom:14px;font-size:16.5px;line-height:1.68;color:var(--body-on-light)} .legaldoc .list{margin-bottom:14px} .legaldoc strong{color:var(--ink)} .draftbar{border-left:4px solid var(--gold);background:rgba(200,148,42,.12);padding:16px 20px;margin-bottom:30px;font-size:15.5px;line-height:1.55;color:var(--chalk)} .draftbar strong{color:var(--gold-bright)}