:root{ --nr-aged-texture:url("/img/img-200.webp"); /* Johnny 08-02g: single shared copy, referenced via var() so the smudge-on-wordmark rule below doesn't duplicate ~800KB of base64 */ --nr-door-ov18:url("/images/home-photo-1-62e7495331.jpg"); --nr-door-civilwar2:url("/img/img-201.jpg"); --ink:#231F20;--obsidian:#0D0D0D;--white:#FFFFFF;--paper:#F6F2E9;--bone:#F5F3EE;--cream:#ECE5D8; --hairline:#E2DCCE;--stone:#BFB4A0;--monotext:#8a8072; --acc:#FF7300;--acc-deep:#E35205;--acc-b:#FF8A2E;--acc-on:#231F20; --burnt:#D08C4E;--burnt-deep:#B06F33;--gold:#C8A96E; --noble-gold:#C99A3B; /* Johnny 08-01: OSU Orange banned in text/elements, becomes this -- NEVER a button colour */ --ffline:#F5F3EE; /* featured-ribbon hairline — ramps via body[data-hair] (v8 toggle) */ --sans:'Jost',system-ui,-apple-system,sans-serif; --mono:'Jost',system-ui,-apple-system,sans-serif; } /* v8 hairline-brightness toggle: bright bone (default) · soft cream · stone grey */ body[data-hair="soft"]{--ffline:#E2DCCE} body[data-hair="grey"]{--ffline:#B7AC98} *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth;overflow-x:hidden} body{background:var(--obsidian);color:var(--bone);font-family:var(--sans)} .wrap{max-width:1120px;margin:0 auto;padding:0 26px} /* blueprint annotation chips */ .bp{display:flex;gap:8px;align-items:center;margin:0 0 14px;flex-wrap:wrap} .bp .n{font:700 var(--fs-small) var(--mono);letter-spacing:.16em;color:var(--acc-b);border:1px solid #4a3524;padding:5px 9px} .bp .ref{font:400 var(--fs-small) var(--mono);letter-spacing:.16em;text-transform:uppercase;color:#6d6555;border:1px solid #2a2620;padding:5px 9px} .bp .chg{color:#7fae6a;border-color:#33452a} .provnote{font:400 var(--fs-small) var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--monotext);border:1px solid #332e27;padding:10px 15px;margin:22px auto 0;display:block;max-width:1068px;line-height:1.7} .provnote b{color:var(--acc-b)} /* placeholder photo */ .ph{position:relative;display:flex;flex-direction:column;gap:12px;align-items:center;justify-content:center;background:linear-gradient(150deg,#1b1916,#100f0d);width:100%} .ph .k{width:52px;color:#3a352d} .ph .phtxt{font:400 var(--fs-small) var(--mono);letter-spacing:.28em;color:#57503f;text-transform:uppercase} /* nav */ nav{display:flex;justify-content:space-between;align-items:center;padding:18px 34px;border-bottom:1px solid #26231f;position:sticky;top:0;background:rgba(13,13,13,.94);backdrop-filter:blur(6px);z-index:9} nav .mark{display:flex;align-items:center;gap:14px} nav .mark .k{width:38px;color:var(--bone)} nav .mark .t{font:400 13px 'Archivo Black',sans-serif;letter-spacing:.14em;text-transform:uppercase} nav .links{display:flex;gap:26px} nav .links a{font:600 10px var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--stone);text-decoration:none} nav .links a.hot{color:var(--acc-b)} /* hero */ .hero{position:relative;min-height:74vh;display:flex;align-items:flex-end;border-bottom:1px solid #26231f;overflow:hidden} .hero .ph{position:absolute;inset:0;height:100%} .hero .scrim{position:absolute;inset:0;background:linear-gradient(to top,rgba(8,8,9,.94),rgba(8,8,9,.45) 42%,rgba(8,8,9,.05) 70%)} .hero .inner{position:relative;padding:0 34px 40px;max-width:1120px;margin:0 auto;width:100%} .hero .kick{font:500 10px var(--mono);letter-spacing:.26em;color:var(--stone);text-transform:uppercase} .hero h1{font:400 clamp(34px,5.6vw,64px)/1.05 'Archivo Black',sans-serif;text-transform:uppercase;letter-spacing:-.01em;margin:14px 0 10px} .hero h1 em{font-style:normal;color:var(--acc)} .hero .sub{font:300 17px/1.55 var(--sans);color:#cfc8ba;max-width:52ch} .hero .sub b{font-weight:600;color:var(--bone)} .ctarow{display:flex;gap:12px;align-items:center;margin-top:24px;flex-wrap:wrap} .btn{font:600 11px var(--sans);letter-spacing:.18em;text-transform:uppercase;text-decoration:none;padding:14px 28px;background:var(--acc);color:var(--acc-on)} .ghost{font:600 11px var(--sans);letter-spacing:.18em;text-transform:uppercase;text-decoration:none;padding:14px 22px;border:1px solid #5a544a;color:var(--bone)} /* stat band */ .stats{display:flex;justify-content:space-between;gap:18px;border-bottom:1px solid #26231f;padding:20px 34px;max-width:1120px;margin:0 auto;flex-wrap:wrap} .stats .s{text-align:center} .stats .s .v{font:400 26px 'Archivo Black',sans-serif;color:var(--acc-b)} .stats .s .v.sm{font-size:18px} .stats .s .v .q{color:var(--stone);font-size:.68em;letter-spacing:.02em} .stats .s .l{font:500 var(--fs-small) var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--monotext);margin-top:6px} /* tighter vertical rhythm across the page (Johnny: WE NEED VERTICAL SPACE — cut the padding) */ section{padding:26px 0} /* section headers — CENTER by default; toggle to left via body[data-heads="left"] */ .sechead{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;margin-bottom:8px} .sechead h2{font:400 clamp(20px,2.6vw,30px) 'Archivo Black',sans-serif;text-transform:uppercase;letter-spacing:.01em} .sechead .mono-l{font:500 9.5px var(--mono);letter-spacing:.22em;color:var(--monotext);text-transform:uppercase} .sechead .cta-r{font:600 var(--fs-small) var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--acc-b);text-decoration:none} body[data-heads="left"] .sechead{flex-direction:row;align-items:baseline;text-align:left;gap:18px} body[data-heads="left"] .sechead .cta-r{margin-left:auto} /* header-alignment toggle (mockup control) */ .headtog{display:flex;gap:8px;align-items:center;justify-content:center;max-width:1068px;margin:10px auto 0;font:500 9px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--monotext)} .headtog button{font:inherit;color:var(--stone);background:transparent;border:1px solid #2a2620;padding:5px 11px;cursor:pointer} .headtog button[aria-pressed="true"]{color:var(--acc-b);border-color:#4a3524} /* ===== FEATURED FOAL card (sec 03) — tight ===== */ .feature{position:relative;border:1px solid #26231f;border-radius:3px;overflow:hidden;background:#181613;max-width:none;display:flex;flex-direction:column} .feature .ffphoto{position:relative;min-height:470px;flex:1;overflow:hidden} .feature img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .feature .scrim{position:absolute;inset:0;background:linear-gradient(to top,rgba(8,8,9,.95) 0%,rgba(8,8,9,.8) 24%,rgba(8,8,9,.32) 50%,rgba(8,8,9,.05) 72%)} /* orange ribbon — minimal padding · group hugs left · pedigree bracket to headline · rotate far right */ .feature .ribbon{position:absolute;top:0;left:0;right:0;display:flex;flex-wrap:wrap;align-items:stretch;gap:0;row-gap:3px;padding:5px 10px;background:var(--acc);color:var(--acc-on);z-index:2} .feature .ffgroup{display:flex;align-items:stretch;flex:0 0 auto} .feature .fftag{display:flex;align-items:center;gap:6px;background:#0D0D0D;color:var(--acc-b);padding:5px 11px;font:700 var(--fs-small) var(--mono);letter-spacing:.13em;text-transform:uppercase;white-space:nowrap;border:1px solid var(--ffline)} .feature .fftag .k{width:14px;color:var(--acc-b);flex:0 0 auto} .feature .ffjoin{align-self:center;width:10px;height:1px;background:var(--ffline);flex:0 0 auto} .feature .ffrec{display:flex;align-items:center;gap:8px;background:#0D0D0D;color:var(--bone);padding:5px 16px;white-space:nowrap;border:1px solid var(--ffline)} .feature .ffrec .l{font:600 var(--fs-small) var(--mono);letter-spacing:.13em;color:var(--monotext);text-transform:uppercase} .feature .ffrec .v{font:400 23px 'Archivo Black',sans-serif;line-height:1} .feature .ffrec .v em{font-style:normal;color:var(--acc)} /* pedigree-style bracket: horizontal line from the H063 box · vertical tick at the headline edge */ .feature .ffbrk{flex:0 0 32px;align-self:stretch;position:relative} .feature .ffbrk::before{content:'';position:absolute;left:0;right:0;top:50%;height:1px;background:var(--ffline)} .feature .ffbrk::after{content:'';position:absolute;right:0;top:24%;bottom:24%;width:1px;background:var(--ffline)} /* hook = the FOCUS of the ribbon — larger, never truncated; wraps/stacks on top instead of cutting */ .feature .ffhook{align-self:center;flex:1 1 auto;min-width:0;font:400 clamp(17px,2.7vw,30px)/1.04 'Archivo Black',sans-serif;letter-spacing:.01em;text-transform:uppercase;color:var(--acc-on);padding-left:6px} /* rotate/scroll arrows — pinned to the photo's TOP-RIGHT corner, tight, arrows only */ .feature .ffrot{position:absolute;top:7px;right:9px;z-index:4;display:flex;gap:5px} .feature .ffrot button{width:26px;height:26px;border:1px solid rgba(245,243,238,.4);background:rgba(13,13,13,.6);color:var(--bone);font:400 14px var(--sans);display:flex;align-items:center;justify-content:center;cursor:pointer;line-height:1;backdrop-filter:blur(2px)} .feature .ffrot button:hover{border-color:var(--acc-b);background:rgba(13,13,13,.82)} /* bottom info block — sits low on the photo, very tight rhythm */ .feature .block{position:absolute;left:0;right:0;bottom:0;padding:18px 28px;z-index:2} .feature .kick{font:400 13.5px 'Jost','Helvetica Neue',Arial,sans-serif;letter-spacing:.09em;color:var(--acc-b);text-transform:uppercase;text-shadow:0 1px 8px rgba(0,0,0,.55)} .feature h3{font:400 clamp(24px,3.4vw,38px)/1.02 'Archivo Black',sans-serif;text-transform:uppercase;letter-spacing:-.01em;color:var(--bone);margin:1px 0 0;text-shadow:0 1px 10px rgba(0,0,0,.6)} .feature h3 .xb{font:400 .64em 'Archivo Black',sans-serif;color:#CDC4B4;letter-spacing:.02em;white-space:nowrap} .feature h3 .xb .x{color:var(--acc-b);font-weight:400;margin:0 4px} /* metric row — label-LEFT (DOB:), boxes tight together, badges share the line + stack below */ .feature .ffmetrow{display:flex;gap:10px;align-items:flex-start;margin:8px 0 0;flex-wrap:wrap} .feature .ffmet{display:flex;gap:4px;margin:0;flex-wrap:wrap} .feature .ffmet .m{display:flex;align-items:center;gap:6px;flex-wrap:wrap;background:rgba(11,11,11,.58);border:1px solid rgba(245,243,238,.16);padding:6px 10px} .feature .ffmet .m .l{font:500 var(--fs-small) var(--mono);letter-spacing:.1em;color:#cfc8ba;text-transform:uppercase;flex:0 0 auto} .feature .ffmet .m .l::after{content:':'} .feature .ffmet .m .v{font:400 15px 'Archivo Black',sans-serif;color:var(--bone);white-space:nowrap} .feature .ffmet .m .v.acc{color:var(--acc-b)} /* ===== incentive badges = REAL badge art (Wix CDN), ALL shown, no names/stars ===== */ /* badge band — own row, ONE line, shrink-to-fit (colt-card Solo-Select behavior), subtle backing over the photo */ .feature .ffbadges{display:flex;align-items:center;gap:7px;margin:9px 0 0;padding:6px 11px;background:rgba(11,11,11,.5);border:1px solid rgba(245,243,238,.12);flex-wrap:nowrap;overflow:hidden} .feature .ffbadges img{height:26px;width:auto;max-width:100%;object-fit:contain;flex:0 1 auto;min-width:0;display:block} /* CTA strip — small, colt-card style w/ key icon (no banner band); sits below the photo */ .feature .ffbottom{background:#141210;border-top:1px solid #201d19} .feature .ffcta{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:11px 20px} .feature .ffcta a{display:inline-flex;align-items:center;gap:6px;font:600 9px var(--sans);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;padding:8px 13px;cursor:pointer} .feature .ffcta a .bico{width:13px;height:10px;flex:0 0 auto} .feature .ffcta a.p{background:var(--acc);color:var(--acc-on)} .feature .ffcta a.p .bico{color:var(--acc-on)} .feature .ffcta a.g{border:1px solid rgba(245,243,238,.32);color:var(--bone);background:rgba(11,11,11,.42)} .feature .ffcta a.g .bico{color:var(--acc-b)} .feature .ffcta a.g:hover{border-color:var(--acc-b)} .feature .ffcta a.on{border-color:var(--acc-b);color:var(--acc-b)} /* pedigree fold-out — opens under the card the same way the colt cards do (compact split) */ .feature .ffped{display:none;padding:0 20px 16px;background:#141210} .feature .ffped.open{display:block} .feature .ffpedgrid{display:grid;grid-template-columns:1fr auto 1fr;gap:0 14px;align-items:center;border-top:1px dashed #2c2820;padding-top:14px} .feature .ffpedgrid .side{display:flex;flex-direction:column;gap:8px;min-width:0} .feature .ffpedgrid .side.dam{text-align:right} .feature .ffpedgrid .plab{font:500 var(--fs-small) var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--acc-b);margin-bottom:1px} .feature .ffpedgrid .g1 .nm{font:400 14px 'Archivo Black',sans-serif;color:var(--bone);line-height:1.05} .feature .ffpedgrid .g1 .nm.mare{color:#CDC4B4} .feature .ffpedgrid .g1 .meta{font:500 var(--fs-small) var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--monotext);margin-top:2px} .feature .ffpedgrid .g2{display:flex;flex-direction:column;gap:7px} .feature .ffpedgrid .g2 .nm2{font:600 var(--fs-small) var(--sans);letter-spacing:.02em;color:var(--bone)} .feature .ffpedgrid .g2 .nm2.mare{color:#CDC4B4} .feature .ffpedgrid .g2 .deep{font:500 var(--fs-small) var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--monotext)} .feature .ffpedgrid .g2 .pend{color:var(--acc-b);font-size:.85em} .feature .ffpedgrid .foalbox{align-self:center;text-align:center;border:1px solid var(--ffline);background:#0d0d0d;padding:9px 14px;white-space:nowrap} .feature .ffpedgrid .foalbox .fl{font:500 var(--fs-small) var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--monotext)} .feature .ffpedgrid .foalbox .fv{font:400 20px 'Archivo Black',sans-serif;color:var(--bone);line-height:1} .feature .ffpedgrid .foalbox .fv em{font-style:normal;color:var(--acc)} .feature .ffpedgrid .foalbox .fm{font:500 var(--fs-small) var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--monotext);margin-top:2px} @media(max-width:640px){.feature .ffpedgrid{grid-template-columns:1fr;gap:12px}.feature .ffpedgrid .side.dam{text-align:left}} /* sub-header font options (Johnny picks) */ body[data-subfont="garamond"] .feature .kick{font-family:'EB Garamond',Georgia,serif;font-style:italic;font-weight:500;font-size:16.5px;letter-spacing:.01em;text-transform:none} body[data-subfont="helv"] .feature .kick{font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-weight:600;font-size:12px;letter-spacing:.06em} body[data-subfont="type"] .feature .kick{font-family:'Jost',system-ui,-apple-system,sans-serif;font-weight:600;font-size:12px;letter-spacing:.13em} /* v8 hook-position toggle: left tight to the bracket tick (default) · centered in the banner */ body[data-hook="center"] .feature .ffhook{flex:1 1 auto;text-align:center;padding-left:0} /* when the ribbon gets tight, hook drops to its own full-width line ON TOP of the tag/foal boxes (never truncates) */ @media(max-width:820px){.feature .ffbrk{display:none}.feature .ffhook{order:-1;flex-basis:100%;padding-left:0;margin-bottom:2px}} .fnav{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;border:1px solid rgba(245,243,238,.28);background:rgba(13,13,13,.42);color:var(--bone);font:400 20px var(--sans);display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:3;backdrop-filter:blur(2px)} .fnav.prev{left:16px}.fnav.next{right:16px} .fdots{display:flex;align-items:center;gap:8px;margin-top:11px} .fdots .d{width:7px;height:7px;border-radius:50%;background:rgba(245,243,238,.26)} .fdots .d.on{background:var(--acc)} .fdots .fnote{margin-left:10px;font:500 var(--fs-small) var(--mono);letter-spacing:.16em;color:var(--stone);text-transform:uppercase} /* ===== LEAN STACKED colt cards (sec 04) — stand-ins for real LEANVAR-BADGED-v26 ===== */ .leanstack{display:flex;flex-direction:column;gap:16px} .lean{display:grid;grid-template-columns:96px minmax(210px,34%) 1fr;border:1px solid #26231f;background:#141210;overflow:hidden;min-height:186px} .lean .rec{background:#0F0F0F;border-right:1px solid #201d19;display:flex;flex-direction:column} .lean .rec .cell{padding:14px 12px;border-bottom:1px solid #201d19;flex:1;display:flex;flex-direction:column;justify-content:center} .lean .rec .cell:last-child{border-bottom:none} .lean .rec .l{font:500 var(--fs-small) var(--mono);letter-spacing:.16em;color:var(--monotext);text-transform:uppercase} .lean .rec .v{font:400 20px 'Archivo Black',sans-serif;color:var(--bone);margin-top:3px;line-height:1} .lean .rec .v em{font-style:normal;color:var(--acc)} .lean .rec .cell.sm .v{font-size:15px;color:var(--bone)} .lean .lph{position:relative;min-height:186px} .lean .info{padding:16px 20px;display:flex;flex-direction:column;justify-content:center;min-width:0} .lean .cross{font:400 clamp(17px,1.9vw,21px) 'Archivo Black',sans-serif;text-transform:uppercase;letter-spacing:-.005em;color:var(--bone)} .lean .cross .x{color:var(--acc-b);margin:0 4px} .lean .cross .dam{color:#8a8072} .lean .gs{font:500 var(--fs-small) var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--stone);margin:6px 0 12px} .lean .gs b{color:var(--acc-b);font-weight:700} .lean .met{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:#201d19;border:1px solid #201d19;max-width:440px} .lean .met .m{background:#141210;padding:9px 11px} .lean .met .mv{font:400 12.5px 'Archivo Black',sans-serif;color:var(--acc-b);white-space:nowrap} .lean .met .mv.tbd{color:var(--stone)} .lean .met .ml{font:500 var(--fs-small) var(--mono);letter-spacing:.12em;color:var(--monotext);text-transform:uppercase;margin-top:4px} .lean .band{display:flex;align-items:center;gap:7px;margin-top:12px;flex-wrap:wrap} .lean .band .bslot{height:24px;padding:0 9px;border:1px solid #2c281f;display:flex;align-items:center;font:600 var(--fs-small) var(--mono);letter-spacing:.1em;color:#8a8072;text-transform:uppercase;white-space:nowrap} .lean .band .cta{margin-left:auto;display:flex;gap:8px} .lean .band .cta a{font:600 8.5px var(--sans);letter-spacing:.16em;text-transform:uppercase;text-decoration:none;padding:8px 14px} .lean .band .cta .p{background:var(--acc);color:var(--acc-on)} .lean .band .cta .g{border:1px solid #5a544a;color:var(--bone)} /* story strip (sec 05) */ .strip{border:1px solid #3a2a18;background:linear-gradient(150deg,#191410,#120f0c);padding:24px 34px;display:flex;gap:26px;align-items:center;flex-wrap:wrap} .strip .k{width:60px;color:var(--acc);flex:0 0 auto} .strip h3{font:400 21px 'Archivo Black',sans-serif;text-transform:uppercase} .strip h3 em{font-style:normal;color:var(--acc-b)} .strip p{font:300 15px/1.55 var(--sans);color:#cfc8ba;max-width:58ch;margin-top:8px} .strip p b{color:var(--acc-b);font-weight:600} .strip .btn{margin-left:auto} /* reserve band (sec 07 → now before stallions) */ .reserve{border-top:1px solid #26231f;border-bottom:1px solid #26231f;background:var(--bone);color:var(--ink)} .reserve .in{max-width:1120px;margin:0 auto;padding:32px 34px;display:flex;gap:28px;align-items:center;flex-wrap:wrap} .reserve h3{font:400 clamp(20px,2.6vw,30px) 'Archivo Black',sans-serif;text-transform:uppercase} .reserve p{font:300 15.5px/1.5 var(--sans);color:#4a453c;max-width:50ch;margin-top:8px} .reserve p b{color:var(--burnt-deep);font-weight:600} .reserve .btn{margin-left:auto} .reserve .bp .ref{color:#8a7a5c;border-color:#d9cdb4} .reserve .bp .n{color:var(--burnt-deep);border-color:#d9b98a} /* feature stallion (sec 06) — burnt copper by role on obsidian */ .stal{display:flex;border:1px solid #26231f;background:#111} .stal .ph{flex:0 0 46%;min-height:420px;background:linear-gradient(150deg,#17130f,#0e0b09)} .stal .ph .k{color:#3d342a} .stal .b{flex:1;padding:30px 40px;display:flex;flex-direction:column;justify-content:center} .stal .kick{font:500 10px var(--mono);letter-spacing:.24em;color:var(--burnt);text-transform:uppercase} .stal h3{font:400 clamp(22px,3vw,34px) 'Archivo Black',sans-serif;text-transform:uppercase;margin:12px 0 8px} .stal .id{font:500 var(--fs-small) var(--mono);letter-spacing:.18em;color:var(--monotext);text-transform:uppercase} .stal p{font:300 15.5px/1.55 var(--sans);color:#cfc8ba;max-width:46ch;margin:16px 0 4px} .stal .btn{background:var(--burnt);color:#1a120a} .stal .ctarow .ghost{border-color:#5a4a38} /* ===== STALLION lean cards (sec 06.5 — NEW) ===== */ .stalstack{display:flex;flex-direction:column;gap:16px} .scard{display:grid;grid-template-columns:minmax(200px,32%) 1fr;border:1px solid #211d18;background:linear-gradient(150deg,#141210,#100d0b);min-height:200px;overflow:hidden} .scard .ph{min-height:200px;background:linear-gradient(150deg,#17130f,#0d0a08)}.scard .ph{position:relative;overflow:hidden}.scard .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}.punchrow.blood{gap:20px}.punchrow.blood .punch{min-width:0}.punchrow.blood .pv.name{font:600 13px "Helvetica Neue",Helvetica,Arial,sans-serif;line-height:1.18;color:var(--burnt);letter-spacing:.005em} .scard .ph .k{color:#3d342a} .scard .b{padding:22px 26px;display:flex;flex-direction:column;justify-content:center;min-width:0} .scard .kick{font:500 9px var(--sans);letter-spacing:.22em;color:var(--burnt);text-transform:uppercase} .scard h4{font:400 clamp(19px,2.2vw,25px) 'Archivo Black',sans-serif;text-transform:uppercase;margin:8px 0 5px;color:var(--bone)} .scard .id{font:500 var(--fs-small) var(--sans);letter-spacing:.16em;color:var(--monotext);text-transform:uppercase} .scard .punchrow{display:flex;gap:34px;margin:16px 0 14px;flex-wrap:wrap} .scard .punch .pv{font:400 22px 'Archivo Black',sans-serif;color:var(--burnt)} .scard .punch .pv.tbd{color:var(--stone);font-size:15px} .scard .punch .pl{font:500 var(--fs-small) var(--sans);letter-spacing:.14em;color:var(--monotext);text-transform:uppercase;margin-top:5px} .scard .ach{font:500 var(--fs-small) var(--sans);letter-spacing:.1em;color:var(--burnt);text-transform:uppercase;margin:0 0 12px;line-height:1.5} .scard .line{font:300 13.5px/1.5 var(--sans);color:#b7b1a4;max-width:52ch} .stal .spunch{display:flex;gap:34px;margin:16px 0 4px;flex-wrap:wrap} .stal .spunch .v{font:400 21px 'Archivo Black',sans-serif;color:var(--burnt)} .stal .spunch .v.tbd{color:var(--stone);font-size:15px} .stal .spunch .l{font:500 var(--fs-small) var(--mono);letter-spacing:.14em;color:var(--monotext);text-transform:uppercase;margin-top:5px} .scard .foot{display:flex;align-items:center;gap:10px;margin-top:16px} .scard .foot .gk{width:26px;color:var(--gold);opacity:.9} .scard .foot a{font:500 var(--fs-small) var(--sans);letter-spacing:.18em;text-transform:uppercase;text-decoration:none;text-underline-offset:3px;padding:7px 14px;background:#221E18;border:1px solid #4a443c;border-radius:2px;color:var(--bone);transition:all .15s}.scard .foot a:hover{border-color:#FFFFFF;color:var(--burnt);text-decoration:underline} .scard .foot .fee{margin-left:auto;font:500 var(--fs-small) var(--sans);letter-spacing:.16em;color:var(--burnt);text-transform:uppercase} /* why band (sec 08) */ .why{text-align:center;max-width:820px;margin:0 auto} .why--top{max-width:1180px} /* Johnny 08-02i: "packed up and tight, wraps" -- widen to match the badge band's own 1180px so the whole intro block uses the page width instead of a narrow 820px column */ .why .kick{font:500 10px var(--mono);letter-spacing:.28em;color:var(--stone);text-transform:uppercase} .why h2{font:400 clamp(22px,3.4vw,38px)/1.2 'Archivo Black',sans-serif;text-transform:uppercase;margin:10px 0 12px} .why h2 em{font-style:normal;color:var(--noble-gold)} .why p{font:300 var(--fs-body)/1.6 var(--sans);color:#cfc8ba} .blead{font:600 13px var(--sans);letter-spacing:.02em;color:var(--bone);text-align:center;margin:12px auto 0;max-width:520px} /* Johnny 08-02d: 22px->12px, closes remaining dead space above this line */ .badgeband{display:flex;gap:14px;justify-content:center;margin-top:16px;flex-wrap:nowrap;max-width:1180px;margin-left:auto;margin-right:auto} .bcard{flex:1 1 0;min-width:0;max-width:186px;padding:16px 14px;border:1px solid #33291c;background:rgba(200,169,110,.04);display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px} .bimg{height:44px;width:auto;max-width:120px;object-fit:contain;display:block} .bname{font:700 var(--fs-small) var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--gold)} .bwhy{font:400 var(--fs-desc) var(--sans);line-height:1.45;color:#b9ac93} .bnote{font:500 var(--fs-small) var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--monotext);text-align:center;margin-top:14px} @media(max-width:700px){.badgeband{flex-wrap:wrap}.bcard{flex:1 1 44%;max-width:none}} /* COLT-CARD FIXED HEIGHT — 2026-07-22 (WEB), replaces JS auto-height guessing. .coltmount overflow:hidden is the hard backstop; the four breakpoints below are real measured heights (+buffer) of the actual 5-card stack, matched to the card doc's own @media(max-width:820px) breakpoint where it switches from a stacked mobile layout to a compact grid. Re-measure and update these four numbers if Lenn changes the foal-card count. */ .coltmount{overflow:hidden} #coltframe{height:1355px} @media(max-width:872px){#coltframe{height:4900px}} @media(max-width:702px){#coltframe{height:4260px}} @media(max-width:552px){#coltframe{height:3760px}} @media(max-width:472px){#coltframe{height:3480px}} footer{border-top:1px solid #26231f;padding:34px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px} footer .t{font:500 var(--fs-small) var(--mono);letter-spacing:.2em;color:var(--monotext);text-transform:uppercase} footer .k{width:38px;color:#4a453c} @media(max-width:860px){ .lean{grid-template-columns:70px 1fr}.lean .lph{display:none} .scard{grid-template-columns:1fr}.scard .ph{min-height:200px} .stal{flex-direction:column}.stal .ph{min-height:260px} nav .links{display:none} } /* ===== GRAFTED FROM KEYFOLD R7 — hero + Option A overlay mast (ART lane). Key defaults baked: LARGE + RANCH ORANGE. Test-harness dropped. ===== */ /* R7 brand-kit tokens (adds --orange/--serif-auth/--serif-human/--display/--label/--subtext/--hairline) */ :root{ /* BRAND KIT v2.1 TOKENS */ --white:#FFFFFF; --paper:#FBFAF6; --bone:#F5F3EE; --ink:#231F20; --obsidian:#0D0D0D; --hairline:#E2DCCE; --stone:#BFB4A0; --subtext:#5d574d; --label:#8a8072; --orange:#FF7300; --orange-lt:#FF8A2E; --orange-deep:#E35205; --copper:#D08C4E; --gold:#C8A96E; --serif-auth:'Cinzel','Trajan Pro','Copperplate',serif; --serif-human:'EB Garamond',Garamond,'Baskerville',serif; --mono:'Jost',system-ui,-apple-system,sans-serif; --display:'Archivo Black','Arial Black',sans-serif; } /* ================= THE HERO ================= */ .hero{position:relative;background:var(--obsidian);height:100vh;height:100svh;min-height:340px;overflow:hidden;border-bottom:1px solid var(--hairline);margin-top:0;width:100vw;margin-left:calc(50% - 50vw)} .glowsoft{position:absolute;inset:0;background:radial-gradient(ellipse 42% 60% at 63% 45%, rgba(255,115,0,.34) 0%, rgba(227,82,5,.16) 42%, rgba(13,13,13,0) 72%)} .glowdots{position:absolute;inset:0;color:var(--orange);opacity:.6} .glowdots svg{width:100%;height:100%;display:block} .horse{position:absolute;top:0;right:0;width:78%;height:100%; background-image:url(/images/home-photo-2-05146a0f86.webp); background-size:cover;background-position:center; -webkit-mask-image:radial-gradient(ellipse 62% 78% at 58% 46%, #000 38%, transparent 78%); mask-image:radial-gradient(ellipse 62% 78% at 58% 46%, #000 38%, transparent 78%);} .topline{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:clamp(8px,3svh,30px) clamp(20px,4.5vw,64px);z-index:5} .brandrow{display:flex;align-items:center;gap:8px} .keybox{width:52px;height:36px;color:var(--gold)} .keybox svg{width:100%;height:100%;display:block} .brandname{font-family:var(--serif-auth);font-weight:600;font-size:16px;letter-spacing:.3em;color:var(--bone)} .quietnav{display:flex;gap:22px;align-items:center} .quietnav a{font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--stone);text-decoration:none;display:flex;align-items:center;gap:5px;transition:color .18s} .quietnav .qd{width:4px;height:4px;border-radius:50%;background:var(--gold);display:inline-block;flex:none;transition:background .18s,transform .18s} .quietnav a:hover{color:var(--bone)} .quietnav a:hover .qd{background:var(--orange);transform:scale(1.35)} .statement{position:absolute;left:clamp(20px,4.5vw,64px);top:46%;transform:translateY(-50%);z-index:5;max-width:520px} .statement h2{font-family:var(--display);font-size:clamp(34px,4.6vw,58px);line-height:1;letter-spacing:.01em;color:var(--bone);text-transform:uppercase} .statement h2 .hot{color:var(--orange)} .statement p{margin-top:3px;font-family:var(--serif-human);font-style:italic;font-size:23px;color:#bfbfbf;max-width:420px} /* THE FORK — split slab, BOTH doors in the lit voice, FOALS first */ .fork-split{position:absolute;left:0;right:0;bottom:0;display:grid;grid-template-columns:1fr 1fr;z-index:6;height:clamp(46px,9svh,84px);border-top:1px solid rgba(226,220,206,.25)} .fork-split a{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;text-decoration:none; font-family:var(--display);font-size:clamp(20px,2.4vw,30px);letter-spacing:.05em;text-transform:uppercase; color:var(--orange);background:rgba(255,115,0,.09);box-shadow:inset 0 -4px 0 var(--orange);transition:background .18s} .fork-split a:hover{background:rgba(255,115,0,.18)} .fork-split a + a{border-left:1px solid rgba(226,220,206,.25)} .fork-split a .maincopy{display:flex;align-items:center;gap:7px} .fork-split a .arrow{font-family:var(--sans);font-weight:300;font-size:1.1em;transform:translateY(-1px);margin-left:1px;transition:transform .18s} .fork-split a:hover .arrow{transform:translateY(-1px) translateX(3px)} .fork-split a .dkey{width:0.82em;color:currentColor;opacity:.9;display:inline-block;vertical-align:-0.08em} .fork-split a .sub{font-family:var(--mono);font-size:var(--fs-small);letter-spacing:.26em;color:var(--stone)} /* ============ KEYFOLD TEST ============ */ .statement{--kfline:var(--orange);--kfsw:0.45;--kfsize:1.25} .kf{position:absolute;color:var(--kfline);pointer-events:none} .kf svg{width:100%;height:auto;display:block;overflow:visible} .kf path,.kf rect{fill:none;stroke:currentColor;stroke-width:calc(var(--kfsw)*1px)} .kf.behind{left:-15%;top:50%;transform:translateY(-50%);width:calc(196% * var(--kfsize));z-index:-1} .kf.above{left:2%;bottom:calc(100% - 6vh);width:calc(116% * var(--kfsize));z-index:2} .kf.below{left:2%;top:calc(100% - 9.4vh);width:calc(122% * var(--kfsize));z-index:2} .kfbar{display:flex;flex-wrap:wrap;gap:22px;align-items:center;padding:16px 0;border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);margin-top:8px} .kfbar .lbl{font-family:var(--mono);font-size:var(--fs-small);letter-spacing:.24em;text-transform:uppercase;color:var(--label);margin-right:4px} .kfbar .grp{display:flex;align-items:center;gap:7px} .kfchip{width:22px;height:22px;border-radius:50%;cursor:pointer;border:1px solid var(--stone);outline:2px solid transparent;outline-offset:2px} .kfchip.on{outline-color:var(--ink)} .kfbtn{background:none;border:1px solid var(--stone);color:var(--ink);font-family:var(--mono);font-size:var(--fs-small);letter-spacing:.14em;padding:5px 10px;cursor:pointer;text-transform:uppercase} .kfbtn.on{background:var(--ink);color:var(--paper)} @media (max-width:640px){ .quietnav{display:none} .statement{max-width:82vw;--kfsize:1} .statement p{max-width:74vw} .kf.behind{width:calc(132% * var(--kfsize));left:-8%} } /* ===== TWO-DOOR SECTION (A+B) — 2026-07-19 · v10 Johnny revisions ===== Cards are SPACED apart to showcase them. Each card is a DIV (not a link) because it now holds TWO real buttons — nested would be invalid HTML. Buttons are transparent-gradient so the photo reads through them (Johnny's spec). */ .doors{display:grid;grid-template-columns:1fr 1fr;gap:20px;padding:30px 26px 36px;max-width:1360px;margin:0 auto} .doors .door{position:relative;overflow:hidden;min-height:clamp(330px,34vw,430px);background:#151310; display:flex;flex-direction:column;justify-content:flex-end; box-shadow:0 18px 44px rgba(0,0,0,.42);transition:box-shadow .35s,transform .35s cubic-bezier(.22,.61,.36,1)} .doors .door:hover{box-shadow:0 22px 56px rgba(0,0,0,.55);transform:translateY(-3px)} .doors .door img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.22,.61,.36,1)} /* PICTURE wrappers (WebP + JPEG fallback, 2026-07-19): make the picture element itself the positioned box so it never participates in flex/line layout. The img rules above are unchanged and still match (descendant selectors, no > child selectors in this sheet). */ .doors .door picture,.scard .ph picture{position:absolute;inset:0;display:block} .doors .door:hover img{transform:scale(1.045)} .doors .scrim{position:absolute;inset:0;background:linear-gradient(to top,rgba(8,8,8,.94) 0%,rgba(8,8,8,.66) 40%,rgba(8,8,8,.10) 78%)} .doors .foot{position:relative;z-index:2;padding:0 28px 26px} .doors .topline2{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:20px} .doors .copy{min-width:0} .doors .dkick{font-family:var(--mono);font-weight:700;font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--acc-b)} .doors .dtitle{font-family:var(--display);font-size:clamp(32px,4.2vw,52px);line-height:.92;letter-spacing:-.01em;text-transform:uppercase;margin:9px 0 8px;color:var(--bone)} .doors .dsub{font-family:var(--sans);font-size:15px;color:#cfc9be;line-height:1.5} /* --- METRIC BOX: semi-transparent + glow, bottom right of the photo area --- */ .doors .metric{flex:0 0 auto;text-align:right;padding:15px 18px 14px;border:1px solid rgba(226,220,206,.20); background:rgba(13,13,13,.42);-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px); box-shadow:0 0 26px rgba(255,115,0,.16),inset 0 0 22px rgba(255,115,0,.05);transition:box-shadow .3s,border-color .3s} .doors .door:hover .metric{box-shadow:0 0 34px rgba(255,115,0,.26),inset 0 0 26px rgba(255,115,0,.07);border-color:rgba(255,115,0,.34)} /* v11-re-apply 1/3 (2026-07-19): metric rows now read like the COLT CARD .met cell - [year] [value] [word] on one baseline. COLORS UNCHANGED from the approved v10 state: year orange, value bone/white, word stone by default, orange on the .hot row. Only real color change = .qm is now 1em (same size as the value) per Johnny's spec. */ .doors .mrow{display:flex;align-items:baseline;justify-content:flex-end;gap:7px;white-space:nowrap} .doors .mrow + .mrow{margin-top:7px;padding-top:7px;border-top:1px solid rgba(226,220,206,.13)} .doors .myr{font-family:var(--display);font-size:15px;letter-spacing:-.01em;color:var(--acc)} /* every year in orange */ .doors .mnum{font-family:var(--display);font-size:30px;line-height:.9;letter-spacing:-.02em;color:var(--bone);text-shadow:0 0 16px rgba(255,115,0,.30)} .doors .mword{font-family:var(--mono);font-weight:700;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--stone)} .doors .mrow.hot .mword{color:var(--acc-b)} /* '26 row: words in orange */ .doors .mrow.sm .myr{font-size:12px} .doors .mrow.sm .mnum{font-size:21px;color:#ded8cd;text-shadow:0 0 12px rgba(255,115,0,.18)} .doors .mrow.sm .mword{font-size:9px} .doors .qm{font-family:var(--display);font-size:1em;color:var(--acc);letter-spacing:0;margin-left:1px} /* --- THE TWO BUTTONS: transparent gradient, photo reads through --- */ .doors .btns{display:flex;gap:10px;align-items:stretch} .doors .btns .btn.down{flex:0 0 auto} .doors .btns .btn.go{flex:1 1 auto;min-width:0} .doors .btn{display:flex;align-items:center;justify-content:space-between;gap:14px;text-decoration:none;position:relative;overflow:hidden;z-index:0; padding:11px 15px;border:1px solid rgba(226,220,206,.26);color:var(--bone); background:linear-gradient(105deg,rgba(245,243,238,.13),rgba(245,243,238,.03)); -webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px); transition:background .25s,border-color .25s,transform .25s cubic-bezier(.22,.61,.36,1)} .doors .btn:hover{background:linear-gradient(105deg,rgba(245,243,238,.30),rgba(245,243,238,.12));border-color:rgba(245,243,238,.55)} /* Johnny 08-01: no orange, no gold on buttons -- same neutral bone tone, just brighter/more opaque on hover */ .doors .btn .bl{min-width:0} .doors .btn .bt{font-family:var(--sans);font-weight:600;font-size:12px;letter-spacing:.01em;display:block;line-height:1.2;white-space:nowrap} .doors .btn .bs{font-family:var(--mono);font-size:8px;letter-spacing:.17em;text-transform:uppercase;color:var(--stone);display:block;margin-top:5px} .doors .btn .ar{font-family:var(--sans);font-weight:300;font-size:15px;line-height:1;flex:0 0 auto;transition:transform .25s cubic-bezier(.22,.61,.36,1)} .doors .btn.go:hover .ar{transform:translateX(5px)} .doors .btn.down{grid-template-columns:none} .doors .btn.down:hover .ar{transform:translateY(4px)} .doors .btn.down .bt{white-space:nowrap} /* Johnny 08-09: middle widths (701-1270) had NO wrap rule -- 3 foals buttons crammed into one shrinking row at every step-down. Same 2+1 pattern as the phone fix (WEB125); wide keeps the one-row look Johnny picked 08-07 (WEB119). */ @media (min-width:701px) and (max-width:1270px){ .doors .btns.btns-foals{flex-wrap:wrap} .doors .btns.btns-foals .btn.down{flex:1 1 calc(50% - 5px)} .doors .btns.btns-foals .btn.go{flex:1 1 100%} .doors .btn .bt,.doors .btn .bs{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} } @media (max-width:700px){ .doors{grid-template-columns:1fr;gap:18px;padding:22px 16px 28px} .doors .door{min-height:clamp(300px,58vw,380px)} .doors .foot{padding:0 18px 20px} .doors .topline2{gap:12px;margin-bottom:16px} .doors .metric{padding:11px 13px 10px} .doors .mnum{font-size:24px}.doors .mrow.sm .mnum{font-size:17px} .doors .btns{flex-direction:column} .doors .btn{padding:12px 14px} /* WEB125 08-07: Foals' 3-button stack (2026/2027/See All) made the Foals door noticeably taller than Stallions' 2-button stack on phone widths -- lopsided, cramped, Johnny's "make look good on phone views and stack well." Fix scoped to the Foals door only (.btns-foals, new class on that one .btns div) -- Stallions' plain 2-button stack was already fine and is untouched: 2026/2027 Foals sit side by side (compact quick-look pair), See All wraps to its own full-width row below -- 2 rows total, matching Stallions' 2-row height instead of 3 stacked rows. Text truncates with ellipsis instead of wrapping/overflowing if a label ever runs long on a narrow phone. */ .doors .btns.btns-foals{flex-direction:row;flex-wrap:wrap} .doors .btns.btns-foals .btn.down{flex:1 1 calc(50% - 5px)} .doors .btns.btns-foals .btn.go{flex:1 1 100%} .doors .btn .bt{overflow:hidden;text-overflow:ellipsis} .doors .btn .bs{overflow:hidden;text-overflow:ellipsis} } @media (prefers-reduced-motion:reduce){ .doors .door,.doors .door img,.doors .btn,.doors .btn .ar,.doors .metric{transition:none!important} .doors .door:hover{transform:none} } /* the inherited .statcount glow is sized for the old big stat cells — rein it in inside the metric box so it reads as a lit number, not a blob over the horse */ .doors .metric .statcount::before{inset:-14% -12%;background:radial-gradient(circle,rgba(255,138,46,.22),transparent 62%)} /* 1 · SIGNATURE KEY GLEAM — clean-loop trace, rests fully off the key. Key geometry never redrawn. */ .kf svg{animation:keyFlare 1.6s ease-out .5s 1, keySheen 13s ease-in-out 3s infinite} @keyframes keyFlare{0%{filter:drop-shadow(0 0 0 rgba(255,186,124,0))}28%{filter:drop-shadow(0 0 12px rgba(255,186,124,.55))}100%{filter:drop-shadow(0 0 0 rgba(255,186,124,0))}} @keyframes keySheen{0%,88%,100%{filter:brightness(1)}94%{filter:brightness(1.32) drop-shadow(0 0 3px rgba(255,224,170,.45))}} /* 2 · HALFTONE SCREEN — atmosphere field behind TITLES only (never on product photos, Law A) */ .htwrap{position:relative;overflow:hidden} .htwrap>h2{position:relative;z-index:2} .halftone{position:absolute;inset:-18% -6% -30% -4%;z-index:1;pointer-events:none; background-image:radial-gradient(currentColor 1.15px, transparent 1.3px); background-size:9px 9px; opacity:.14; -webkit-mask-image:linear-gradient(90deg,#000,transparent 62%); mask-image:linear-gradient(90deg,#000,transparent 62%)} .halftone.o{color:var(--acc)} .halftone.g{color:var(--gold)} /* 3 · GRID-PAPER — rigid cousin, behind data only (dark-surface values) */ .stats{position:relative} .gridpaper{position:absolute;inset:0;z-index:0;pointer-events:none; background-image:linear-gradient(currentColor 1px,transparent 1px),linear-gradient(90deg,currentColor 1px,transparent 1px); background-size:26px 26px; color:#4a443b; opacity:.5; -webkit-mask-image:radial-gradient(120% 100% at 50% 0,#000 40%,transparent 100%); mask-image:radial-gradient(120% 100% at 50% 0,#000 40%,transparent 100%)} .stats .s{position:relative;z-index:3} /* 4 · STAT-GLOW + COUNT-UP — bloom sits BEHIND the number, never on the text. NOTE: R&D's law reserves the glow for money/LTE; Johnny called full rollout on the HOME counts (2026-07-19). */ .statcount{position:relative} .statcount::before{content:"";position:absolute;inset:-40% -30%;border-radius:50%;z-index:-1; background:radial-gradient(circle,rgba(255,138,46,.30),transparent 68%);opacity:0;transition:opacity 1.1s ease} .statcount.lit::before{opacity:1} /* 5 · ENTRANCE KIT — transform+opacity only, respects reduced-motion */ /* NO-JS / SLOW-JS FAILSAFE (2026-07-19): the hidden start state is gated behind html.js, which the head script adds before first paint. If scripting is off, or the head script never runs, the class is never added and this content is simply VISIBLE — it can no longer be left invisible by a script that stalls. Transitions stay ungated so the animation is identical when JS is healthy. The .in rules are gated too, because html.js .rise (0,2,1) would otherwise outrank a bare .rise.in (0,2,0). */ .rise{transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)} .slidein{transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)} /* STRIPPED 2026-07-21 (WEB, Johnny's call): the fade-in-on-scroll effect was the root cause of three separate invisible-content bugs this session (black-void hero blocks, the coltmount/foal-card wrapper, and whatever produced the latest blank-space report). Same mechanism, same failure mode, three times. Removing the opacity:0 starting state entirely -- content now just renders, no animation, no dependency on any observer or failsafe firing correctly. The .in / transition CSS below and the reveal JS at the bottom of body are now harmless no-ops, left in place rather than torn out by hand under time pressure -- safe to clean up properly in a later pass. */ html.js .rise{opacity:1;transform:none} html.js .slidein{opacity:1;transform:none} html.js .rise.in,html.js .slidein.in{opacity:1;transform:none} @media(prefers-reduced-motion:reduce){ .rise,.slidein{opacity:1!important;transform:none!important;transition:none} .kf svg{animation:none!important} .kf .ktrace{display:none} } .stkbrands{background:transparent!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;border-bottom:none!important}@media(max-width:820px){.zph{min-height:0!important;height:auto!important;aspect-ratio:auto!important;background:#141414}.zph img{position:static!important;width:100%!important;height:auto!important;display:block!important;object-fit:contain!important}} /* Johnny 08-02: aged filter added to match every other dark section -- position:relative;overflow:hidden hosts the reused .rd-civilwar-ov overlay, same technique/asset as the other 3 sections. */ .ftr{width:100%;background:#0D0D0D;color:#F5F3EE;font-family:var(--sans);border-top:1px solid rgba(245,243,238,.12);position:relative;overflow:hidden} .ftr::after{content:'';position:absolute;inset:0;background:var(--copper);mix-blend-mode:screen;opacity:.16;pointer-events:none;z-index:0} /* R&D 08-02b: overlay blend is near-invisible on the near-black #0D0D0D footer bg (overlay math ~= multiply on dark bases, darkens instead of tinting) -- switched to screen, which always lightens, so the copper actually reads as a warm wash instead of doing nothing */ .ftr-top,.ftr-bottom{position:relative;z-index:1} /* R&D 08-02: copper aged filter -- overlay tint on top of the existing civilwar grain, footer only, single-property change, no new texture asset */ .ftr .rd-civilwar-ov{mix-blend-mode:screen} .ftr-top{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px;padding:22px clamp(16px,5vw,40px) 16px} .ftr-brand{display:flex;align-items:center;text-decoration:none;color:inherit} .ftr-brand svg,.ftr-brand img{height:40px;width:40px;display:block} .ftr-word{font-family:'Cinzel',serif;font-weight:600;font-size:11px;letter-spacing:.22em;text-transform:uppercase;margin-left:8px;white-space:nowrap;color:var(--bone)} /* Johnny 08-02: footer nav was inheriting the bare `nav{}` rule meant for the sticky site header (background/border/padding/position:sticky) -- both are literally