/* Indie Hacker Directory — locked design system (from v2/b-final) Sand paper + grid/grain texture · ink black · red #DE2B18 · cobalt #20389F · gold #F0E2AE Archivo / Archivo Expanded / Space Mono */ :root{ --paper:#E9E4D6; --row:#F1EDE1; --row2:#EDE8DA; --head:#DFD9C7; --k:#12100D; --g:#6E6858; --line:#12100D; --red:#DE2B18; --blue:#20389F; --gold:#F0E2AE; --up:#0B7A34; --dn:#C81E1E; } /* Page-level color coding — each page type gets a lighter tint of its dominant accent, so pages read as distinct at a glance instead of one long tan blur. Applied via a class on ; unthemed pages (Home, Board, Profile, Compare) keep the neutral sand above as the "home base." */ body.theme-blue{ /* catalog / data-driven pages — Products, Lab, Trends */ --paper:#E4E7F1; --row:#EEF0F7; --row2:#E9ECF4; --head:#D8DCEB; } body.theme-gold{ /* leaderboard / achievement pages — Movers, Milestones */ --paper:#F2E9CC; --row:#F8F1DE; --row2:#F5EED6; --head:#EADFB8; } body.theme-green{ /* growth / trust pages — Rising, Verification */ --paper:#E1EAE2; --row:#EDF3ED; --row2:#E7EFE8; --head:#D3E0D5; } body.theme-gray{ /* somber / retired — Cemetery */ --paper:#E2E0DA; --row:#EDEBE5; --row2:#E8E6DF; --head:#D6D3CA; } /* The section band (page title bar) is the boldest single element on every page — recoloring IT per theme is a much stronger, more immediate signal than a subtle body tint. Gray/Cemetery keeps the default black band; black already reads as "somber," no override needed. */ body.theme-blue .band{background:var(--blue);color:#fff} body.theme-blue .band .live{color:rgba(255,255,255,.68)} body.theme-blue .band .live b{color:#7CE0A8} body.theme-blue .band a.more{color:#fff;border-color:rgba(255,255,255,.35)} body.theme-gold .band{background:#C9A227;color:var(--k)} body.theme-gold .band .live{color:rgba(18,16,13,.6)} body.theme-gold .band .live b{color:#0B7A34} body.theme-gold .band a.more{color:var(--k);border-color:rgba(18,16,13,.3)} body.theme-green .band{background:var(--up);color:#fff} body.theme-green .band .live{color:rgba(255,255,255,.68)} body.theme-green .band .live b{color:#CFF0D6} body.theme-green .band a.more{color:#fff;border-color:rgba(255,255,255,.35)} *{margin:0;padding:0;box-sizing:border-box} body{ background: repeating-linear-gradient(0deg,transparent 0 23px,rgba(18,16,13,.05) 23px 24px), repeating-linear-gradient(90deg,transparent 0 23px,rgba(18,16,13,.05) 23px 24px), var(--paper); color:var(--k);font-family:'Archivo',sans-serif;-webkit-font-smoothing:antialiased} body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:2000;mix-blend-mode:multiply;opacity:.6; background-image:url('data:image/svg+xml;utf8,')} a{color:inherit;text-decoration:none;cursor:pointer} .mono{font-family:'Space Mono',monospace} .shell{max-width:1280px;margin:0 auto;border-left:1px solid var(--line);border-right:1px solid var(--line)} /* Ticker */ .ticker{border-bottom:1px solid var(--line);background:var(--k);color:#F4F0E4;overflow:hidden} .tape{display:inline-flex;gap:44px;white-space:nowrap;padding:9px 0;font-family:'Space Mono',monospace;font-size:11px;animation:roll 36s linear infinite} @keyframes roll{from{transform:translateX(0)}to{transform:translateX(-50%)}} @media (prefers-reduced-motion:reduce){.tape{animation:none}} .tape .sym{font-weight:700}.tape .px{color:#9B968A}.tape .u{color:#3FCB74}.tape .d{color:#FF7A6B} /* Masthead */ .mast{display:grid;grid-template-columns:auto 1fr auto;align-items:stretch;border-bottom:1px solid var(--line)} .mast .brand{display:flex;align-items:center;gap:10px;padding:16px 22px;font-weight:800;font-size:16px;text-transform:uppercase;border-right:1px solid var(--line)} .mast .brand .sq{width:14px;height:14px;background:var(--red);flex:none} .mast .brand span{color:var(--red)} .mast .tag{display:flex;align-items:center;padding:0 22px;font-family:'Space Mono',monospace;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--g)} .mast nav{display:flex} .mast nav a{display:flex;align-items:center;padding:0 20px;min-height:52px;border-left:1px solid var(--line);font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.08em} .mast nav a:hover,.mast nav a.on{background:var(--k);color:var(--paper)} .mast nav a.cta{background:var(--red);color:#fff} .mast nav a.cta:hover{background:var(--k)} /* Search + filters */ .searchbar{display:flex;border-bottom:1px solid var(--line)} .searchbar .ps{padding:14px 0 14px 22px;font-family:'Space Mono',monospace;color:var(--red);font-weight:700;font-size:12px} .searchbar input{flex:1;border:0;outline:none;background:transparent;font-family:'Space Mono',monospace;font-size:12px;padding:14px 12px;color:var(--k);min-width:0} .searchbar input::placeholder{color:#9C9482} .searchbar button{border:0;border-left:1px solid var(--line);background:var(--red);color:#fff;font-family:'Space Mono',monospace;font-weight:700;font-size:11px;letter-spacing:.18em;padding:0 24px;cursor:pointer} .searchbar button:hover{background:var(--k)} .filters{display:flex;border-bottom:1px solid var(--line);overflow-x:auto;background:var(--paper)} .filters a{display:flex;align-items:baseline;gap:7px;padding:15px 20px 12px;min-height:46px;font-family:'Archivo',sans-serif;font-size:14px;font-weight:600;color:#2A2618;white-space:nowrap;border-bottom:3px solid transparent;border-right:1px solid rgba(18,16,13,.1)} .filters a .n{font-family:'Space Mono',monospace;font-size:11px;font-weight:400;color:var(--g)} .filters a.on{font-weight:800;color:var(--k);border-bottom-color:var(--red)} .filters a.on .n{color:var(--red);font-weight:700} .filters a:hover:not(.on){filter:brightness(.96)} /* Secondary/related links row — a distinct dark promo strip, not blended pills */ .reflinks{display:flex;align-items:center;border-bottom:1px solid var(--line);overflow-x:auto;background:var(--k)} .reflinks .rl-label{display:flex;align-items:center;padding:0 18px;min-height:44px;font-family:'Space Mono',monospace;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:#8F8A7C;white-space:nowrap;flex:none;border-right:1px solid #2B2822} .reflinks a{display:flex;align-items:center;gap:7px;padding:0 20px;min-height:44px;font-family:'Space Mono',monospace;font-size:11.5px;letter-spacing:.03em;font-weight:700;color:var(--paper);white-space:nowrap;border-right:1px solid #2B2822} .reflinks a .arrow{color:var(--red);font-weight:700} .reflinks a:hover{background:var(--red);color:#fff} .reflinks a:hover .arrow{color:#fff} /* Black section band */ .band{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:16px 22px;border-bottom:1px solid var(--line);background:var(--k);color:var(--paper)} .band h1,.band h2{font-family:'Archivo Expanded',sans-serif;font-size:clamp(20px,2.8vw,32px);font-weight:700;text-transform:uppercase;letter-spacing:-.02em} .band h1 span,.band h2 span{color:var(--red)} .band .live{font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.14em;color:#8F8A7C;text-align:right} .band .live b{color:#3FCB74;font-weight:700} .band a.more{font-family:'Space Mono',monospace;font-size:10px;font-weight:700;letter-spacing:.16em;color:var(--paper);border:1px solid #4A463D;padding:8px 14px} .band a.more:hover{background:var(--red);border-color:var(--red)} /* Paper-level section label */ .sechead{display:flex;justify-content:space-between;align-items:baseline;padding:14px 22px;border-bottom:1px solid var(--line)} .sechead h2{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.22em} .sechead h2 i{font-style:normal;color:var(--red)} .sechead .mono{font-size:10px;color:var(--g)} /* Board table */ table.board{width:100%;border-collapse:collapse} table.board th{font-family:'Space Mono',monospace;font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--g);text-align:left;padding:11px 12px;border-bottom:1px solid var(--line);font-weight:700;background:var(--head)} table.board th:first-child,table.board td:first-child{padding-left:22px} table.board th:last-child,table.board td:last-child{padding-right:22px;text-align:right} table.board td{padding:14px 12px;border-bottom:1px solid rgba(18,16,13,.14);vertical-align:middle;font-size:13.5px} table.board tbody tr:nth-child(even) td{background:var(--row2)} table.board tbody tr:nth-child(odd) td{background:var(--row)} table.board tbody tr:hover td{background:#F7F4EA} tr.lead td{background:var(--gold)!important} tr.lead:hover td{background:#EBDA9C!important} .rk{font-family:'Space Mono',monospace;font-weight:700;font-size:12px;color:var(--red)} tr.lead .rk{background:var(--red);color:#fff;display:inline-block;padding:3px 7px} .mk{display:flex;align-items:center;gap:12px} .mk img{width:38px;height:38px;object-fit:cover;border:1px solid var(--line);filter:grayscale(1);display:block;flex:none} tr:hover .mk img,a:hover .mk img{filter:none} .mk .nm{font-weight:800;font-size:15px;text-transform:uppercase} .mk .tk{font-family:'Space Mono',monospace;font-size:9.5px;color:var(--g);letter-spacing:.1em} .mrr{font-family:'Space Mono',monospace;font-weight:700} .chg{font-family:'Space Mono',monospace;font-weight:700;font-size:12px} .chg.up{color:var(--up)}.chg.dn{color:var(--dn)}.chg.fl{color:var(--g)} .spark path{stroke:var(--up);fill:none;stroke-width:1.5} .spark.dn path{stroke:var(--dn)} .src{font-family:'Space Mono',monospace;font-size:9.5px;color:var(--g)} .allrow{display:block;text-align:center;padding:14px;border-bottom:1px solid var(--line);font-family:'Space Mono',monospace;font-size:10.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;background:var(--head)} .allrow:hover{background:var(--k);color:var(--paper)} /* Red stats band */ .strip{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid var(--line);background:var(--red);color:#fff} .strip div{padding:22px;border-right:1px solid rgba(255,255,255,.28)} .strip div:last-child{border-right:0} .strip b{font-family:'Space Mono',monospace;font-size:27px;font-weight:700;display:block} .strip span{font-size:9.5px;text-transform:uppercase;letter-spacing:.16em;display:block;margin-top:5px;color:rgba(255,255,255,.78)} /* Cobalt editorial panel */ .panel-blue{background:var(--blue);color:#F2F1EA;position:relative;overflow:hidden} .panel-blue::before{content:"";position:absolute;right:-30px;bottom:-70px;width:300px;height:300px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.13) 1.5px,transparent 1.5px);background-size:12px 12px;pointer-events:none} .panel-blue h2,.panel-blue h3{font-family:'Archivo Expanded',sans-serif;font-weight:700;text-transform:uppercase;line-height:1.05;letter-spacing:-.02em;position:relative} .panel-blue mark{background:var(--gold);color:var(--k);padding:0 8px} .panel-blue p{font-size:14.5px;line-height:1.7;color:rgba(242,241,234,.8);position:relative} .panel-blue p b{color:#fff} /* Wire */ .wirefeed{display:flex;flex-direction:column} .wirefeed .wh{display:flex;justify-content:space-between;align-items:center;padding:13px 22px;border-bottom:1px solid var(--line);font-size:11px;font-weight:800;letter-spacing:.22em;text-transform:uppercase} .wirefeed .wh i{font-style:normal;color:var(--red)} .logline{display:flex;gap:12px;padding:13px 22px;border-bottom:1px solid rgba(18,16,13,.14);font-size:12.5px;line-height:1.55;align-items:baseline} .logline:nth-child(even){background:var(--row2)} .logline:last-child{border-bottom:0} .logline .t{font-family:'Space Mono',monospace;font-size:9.5px;color:var(--g);flex:none} .logline .tag{font-family:'Space Mono',monospace;font-size:9.5px;font-weight:700;color:var(--red);flex:none} /* Buttons */ .btn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 26px;border:1px solid var(--line);font-family:'Space Mono',monospace;font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase} .btn:hover{background:var(--k);color:var(--paper)} .btn-red{background:var(--red);border-color:var(--red);color:#fff} .btn-red:hover{background:var(--k);border-color:var(--k);color:#fff} .btn-inverse{border-color:var(--paper);color:var(--paper)} .btn-inverse:hover{background:var(--paper);color:var(--k)} /* Chips */ .chip{border:1px solid var(--line);padding:9px 14px;font-family:'Space Mono',monospace;font-size:11px;display:inline-flex;gap:8px;align-items:center;background:var(--row)} .chip:hover{background:var(--k);color:var(--paper)} .chip i{font-style:normal;color:var(--red);font-weight:700} .chip:hover i{color:var(--paper)} /* Footer */ .foot{display:grid;grid-template-columns:1fr 1fr 1fr;background:var(--k);color:#F4F0E4} .foot div{padding:20px 22px;border-right:1px solid #2B2822;font-size:10.5px;text-transform:uppercase;letter-spacing:.14em;color:#8F8A7C} .foot div:last-child{border-right:0} .foot b{color:#F4F0E4} .foot .r{color:var(--red)} /* ============ MOBILE ============ */ @media (max-width:760px){ .shell{border-left:0;border-right:0} .mast{grid-template-columns:1fr} .mast .brand{border-right:0;border-bottom:1px solid var(--line);padding:14px 16px} .mast .tag{display:none} .mast nav{flex-wrap:wrap} .mast nav a{flex:1 1 33%;justify-content:center;padding:0 8px;min-height:46px;border-left:0;border-right:1px solid var(--line);border-bottom:1px solid var(--line)} .mast nav a:nth-child(3n){border-right:0} .searchbar .ps{padding-left:16px} .searchbar button{padding:0 18px} .band{flex-direction:column;align-items:flex-start;gap:6px;padding:14px 16px} .band .live{text-align:left} table.board th:nth-child(5),table.board td:nth-child(5), table.board th:nth-child(6),table.board td:nth-child(6){display:none} table.board th:first-child,table.board td:first-child{padding-left:16px} table.board th:last-child,table.board td:last-child{padding-right:16px} table.board td{padding:12px 8px} .mk img{width:34px;height:34px} .mk .nm{font-size:13.5px} .strip{grid-template-columns:1fr 1fr} .strip div{border-bottom:1px solid rgba(255,255,255,.28)} .strip b{font-size:22px} .logline{padding:12px 16px} .sechead{padding:12px 16px} .foot{grid-template-columns:1fr} .foot div{border-right:0;border-bottom:1px solid #2B2822} .foot div:last-child{border-bottom:0} } /* ==== components added for the real-data build ==== */ /* ===== Home ===== */ .hero{display:grid;grid-template-columns:1.5fr 1fr;border-bottom:1px solid var(--line)} .hero .head{padding:56px 24px 48px;border-right:1px solid var(--line)} .hero .kick{font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--red);font-weight:700} .hero h1{margin-top:16px;font-family:'Archivo Expanded',sans-serif;font-weight:700;font-size:clamp(32px,4.4vw,58px);line-height:1;letter-spacing:-.03em;text-transform:uppercase} .hero h1 span{color:var(--red)} .hero .sub{margin-top:20px;font-size:15px;line-height:1.65;color:var(--g);max-width:520px} .hero .sub b{color:var(--k)} .hero .ctas{margin-top:24px;display:flex;gap:12px;flex-wrap:wrap} .motd{display:flex;flex-direction:column} .motd .mh{padding:13px 22px;border-bottom:1px solid var(--line);font-size:11px;font-weight:800;letter-spacing:.22em;text-transform:uppercase;background:var(--gold);display:flex;justify-content:space-between;align-items:center} .motd .card{flex:1;display:flex;flex-direction:column;justify-content:center;padding:26px 22px;background:var(--row)} .motd .prow{display:flex;gap:16px;align-items:center} .motd img{width:72px;height:72px;object-fit:cover;border:1px solid var(--line);filter:grayscale(1);display:block} .motd .card:hover img{filter:none} .motd h3{font-size:22px;font-weight:800;text-transform:uppercase} .motd .tk{font-family:'Space Mono',monospace;font-size:10px;color:var(--g)} .motd .fig{margin-top:18px;font-family:'Space Mono',monospace;font-size:28px;font-weight:700} .motd .src2{margin-top:10px;font-family:'Space Mono',monospace;font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--g)} .motd .src2 a{color:inherit} .lessons-strip{border-bottom:1px solid var(--line)} .lessons-strip .lesson{padding:16px 22px;border-bottom:1px solid rgba(18,16,13,.14)} .lessons-strip .lesson:nth-child(even){background:var(--row2)} .lessons-strip .lesson:last-child{border-bottom:0} .lessons-strip .n{font-family:'Space Mono',monospace;font-size:10px;color:var(--red);font-weight:700;text-transform:uppercase;letter-spacing:.1em} .lessons-strip p{margin-top:6px;font-size:14px;font-weight:600;line-height:1.55} .lessons-strip span a{font-family:'Space Mono',monospace;font-size:9px;letter-spacing:.1em;color:var(--g)} .mani{display:grid;grid-template-columns:1.4fr 1fr;border-bottom:1px solid var(--line)} .mani .txt{padding:42px 24px;border-right:1px solid var(--line)} .mani h2{font-size:clamp(22px,3.2vw,36px)} .mani p{margin-top:16px;max-width:560px} .news{padding:34px 24px;display:flex;flex-direction:column;justify-content:center;background:var(--row)} .news .k{font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--red);font-weight:700} .news h3{margin-top:10px;font-family:'Archivo Expanded',sans-serif;font-size:22px;font-weight:700;text-transform:uppercase} .news p{margin-top:10px;font-size:13px;color:var(--g);line-height:1.6} .subscribe-strip{display:flex;align-items:center;justify-content:space-between;gap:28px;padding:34px 24px;border-bottom:1px solid var(--line);background:var(--k);color:var(--paper);flex-wrap:wrap} .subscribe-strip .sub-copy{max-width:520px} .subscribe-strip .k{font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--red);font-weight:700} .subscribe-strip h3{margin-top:8px;font-family:'Archivo Expanded',sans-serif;font-size:22px;font-weight:700;text-transform:uppercase} .subscribe-strip h3 span{color:var(--red)} .subscribe-strip p{margin-top:8px;font-size:13px;color:rgba(244,240,228,.72);line-height:1.6} .subscribe-strip .sub-form{display:flex;gap:10px;flex-wrap:wrap} .subscribe-strip input[type=email]{min-width:240px;border:1px solid rgba(244,240,228,.3);background:rgba(244,240,228,.06);color:var(--paper);font-family:'Archivo',sans-serif;font-size:14px;padding:11px 14px} .subscribe-strip input[type=email]::placeholder{color:rgba(244,240,228,.5)} .subscribe-strip input[type=email]:focus{outline:2px solid var(--red);outline-offset:1px} /* ===== Profile ===== */ .phead{display:grid;grid-template-columns:auto 1fr 300px;border-bottom:1px solid var(--line)} .phead .pic{border-right:1px solid var(--line)} .phead .pic img{width:190px;height:100%;min-height:190px;object-fit:cover;display:block;filter:grayscale(1)} .phead .pic:hover img{filter:none} .phead .id{padding:26px 28px;display:flex;flex-direction:column;justify-content:center;background:var(--row)} .tickrow{display:flex;gap:12px;align-items:center;flex-wrap:wrap} .tick{font-family:'Space Mono',monospace;font-size:11px;font-weight:700;letter-spacing:.1em;background:var(--k);color:var(--paper);padding:5px 9px} .badge{font-family:'Space Mono',monospace;font-size:9.5px;font-weight:700;letter-spacing:.14em;padding:4px 8px;text-transform:uppercase;border:1px solid var(--up);color:var(--up)} .phead h1{font-family:'Archivo Expanded',sans-serif;font-size:clamp(28px,3.8vw,46px);font-weight:700;text-transform:uppercase;letter-spacing:-.03em;line-height:1;margin-top:12px} .phead h1 span{color:var(--red)} .phead .bio{margin-top:12px;font-size:14px;line-height:1.6;color:var(--g);max-width:640px} .phead .links{margin-top:14px;display:flex;gap:16px;flex-wrap:wrap;font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase} .phead .links a{border-bottom:1px solid var(--k);padding-bottom:1px} .phead .quote{border-left:1px solid var(--line);padding:28px;display:flex;flex-direction:column;justify-content:center} .phead .quote p{font-size:14px;line-height:1.6;font-weight:600} .phead .quote .s{margin-top:12px;font-family:'Space Mono',monospace;font-size:9px;letter-spacing:.06em;text-transform:uppercase;color:rgba(242,241,234,.7);word-break:break-all} .glance{display:grid;grid-template-columns:repeat(6,1fr);border-bottom:1px solid var(--line);background:var(--red);color:#fff} .glance div{padding:16px 20px;border-right:1px solid rgba(255,255,255,.28)} .glance div:last-child{border-right:0} .glance b{font-family:'Space Mono',monospace;font-size:19px;font-weight:700;display:block} .glance span{font-size:8.5px;text-transform:uppercase;letter-spacing:.16em;color:rgba(255,255,255,.78);display:block;margin-top:4px} .rev{display:grid;grid-template-columns:1.5fr 1fr;border-bottom:1px solid var(--line)} .rev .chart{padding:24px;border-right:1px solid var(--line)} .rev .box{border:1px solid var(--line);position:relative;height:270px;background:var(--row)} .rev .box svg{position:absolute;inset:0;width:100%;height:100%} .rev table{width:100%;border-collapse:collapse} .rev th{font-family:'Space Mono',monospace;font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--g);text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);font-weight:700;background:var(--head)} .rev td{padding:11px 12px;border-bottom:1px solid rgba(18,16,13,.14);font-size:12.5px;vertical-align:middle} .rev tbody tr:nth-child(even) td{background:var(--row2)} .rev tbody tr:nth-child(odd) td{background:var(--row)} .rev td.mono{font-family:'Space Mono',monospace;font-weight:700} .rev .kind{font-family:'Space Mono',monospace;font-size:9px;letter-spacing:.1em;text-transform:uppercase;border:1px solid var(--line);padding:3px 6px;background:#fff} .rev .kind.v{background:var(--up);color:#fff;border-color:var(--up)} .rev a.srclink{font-family:'Space Mono',monospace;font-size:10px;color:var(--g);border-bottom:1px solid var(--g)} .prods{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid var(--line)} .prod{padding:22px 24px;border-right:1px solid var(--line);background:var(--row)} .prod:nth-child(even){background:var(--row2)} .prod:last-child{border-right:0} .prod .st{font-family:'Space Mono',monospace;font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--up);font-weight:700} .prod h3{font-size:20px;font-weight:800;text-transform:uppercase;margin-top:8px} .prod p{font-size:12.5px;color:var(--g);line-height:1.55;margin-top:6px} .duo{display:grid;grid-template-columns:1fr 1.4fr;border-bottom:1px solid var(--line)} .duo>div:first-child{border-right:1px solid var(--line)} .chips{padding:20px 22px;display:flex;flex-wrap:wrap;gap:10px} /* ===== Products / Cemetery grids ===== */ .product-grid,.cemetery-grid{display:grid;grid-template-columns:repeat(3,1fr)} .product-card,.cemetery-card{border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:22px 24px;background:var(--row)} .product-card:nth-child(even),.cemetery-card:nth-child(even){background:var(--row2)} .product-card:nth-child(3n),.cemetery-card:nth-child(3n){border-right:0} .product-card:hover,.cemetery-card:hover{background:#F7F4EA} .product-card .cat,.cemetery-card .st{font-family:'Space Mono',monospace;font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--red);font-weight:700} .cemetery-card .st{color:var(--dn)} .product-card h3,.cemetery-card h3{font-size:22px;font-weight:800;text-transform:uppercase;margin-top:8px} .cemetery-card h3{text-decoration:line-through;text-decoration-color:rgba(18,16,13,.35)} .product-card p,.cemetery-card .why{font-size:12.5px;color:var(--g);line-height:1.55;margin-top:6px} .product-card .maker,.cemetery-card .maker{display:flex;align-items:center;gap:10px;margin-top:14px} .product-card .maker img,.cemetery-card .maker img{width:26px;height:26px;object-fit:cover;border:1px solid var(--line);filter:grayscale(1);display:block} .product-card .maker span,.cemetery-card .maker span{font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.1em;color:var(--g)} .product-card .maker span b,.cemetery-card .maker span b{color:var(--k);font-weight:700} .product-card .stack{margin-top:10px;display:flex;gap:6px;flex-wrap:wrap} .product-card .stack i{font-style:normal;font-family:'Space Mono',monospace;font-size:8.5px;letter-spacing:.1em;border:1px solid rgba(18,16,13,.3);color:var(--g);padding:3px 6px;text-transform:uppercase;background:#fff} .product-card .fig,.cemetery-card .fig{border-top:1px solid var(--line);margin-top:14px;padding-top:10px;font-family:'Space Mono',monospace;font-size:11px} .cemetery-card .src2{margin-top:8px;font-family:'Space Mono',monospace;font-size:9px;color:var(--g);text-transform:uppercase} .cemetery-card .src2 a{color:var(--red)} /* ===== Compare ===== */ .vshead{display:grid;grid-template-columns:1fr auto 1fr;border-bottom:1px solid var(--line)} .vsside{padding:32px 26px;display:flex;flex-direction:column;align-items:center;text-align:center} .vsside:first-child{border-right:1px solid var(--line)} .vsside:last-child{border-left:1px solid var(--line)} .vsside img{width:88px;height:88px;object-fit:cover;border:1px solid var(--line);filter:grayscale(1);display:block} .vsside:hover img{filter:none} .vsside .tick{margin-top:14px;font-family:'Space Mono',monospace;font-size:11px;font-weight:700;letter-spacing:.1em;background:var(--k);color:var(--paper);padding:5px 9px} .vsside h2{margin-top:12px;font-size:22px;font-weight:800;text-transform:uppercase} .vsside .mrr2{margin-top:10px;font-family:'Space Mono',monospace;font-size:26px;font-weight:700} .vsmid{display:flex;align-items:center;justify-content:center;padding:0 30px;font-family:'Archivo Expanded',sans-serif;font-size:24px;font-weight:700;color:var(--red)} .rows2{width:100%;border-collapse:collapse} .rows2 tr{border-bottom:1px solid rgba(18,16,13,.14)} .rows2 tr:nth-child(even) td{background:var(--row2)} .rows2 tr:nth-child(odd) td{background:var(--row)} .rows2 td{padding:14px 20px;font-size:13.5px;vertical-align:middle} .rows2 td.lab{width:220px;font-family:'Space Mono',monospace;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--g);background:var(--head)} .rows2 td.win{font-weight:800;color:var(--up)} .rows2 td.win::after{content:" ✓"} /* ===== Embed ===== */ .embed-grid{display:grid;grid-template-columns:repeat(3,1fr)} .embed-card{border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:20px 22px;background:var(--row)} .embed-card:nth-child(even){background:var(--row2)} .embed-card:nth-child(3n){border-right:0} .embed-preview{display:flex;align-items:center;min-height:28px} .embed-meta{margin-top:10px;font-size:13px} .embed-meta span{margin-left:8px;font-family:'Space Mono',monospace;font-size:10px;color:var(--g)} .snippet{margin-top:12px;padding:10px 12px;background:var(--k);color:#F4F0E4;font-family:'Space Mono',monospace;font-size:10px;line-height:1.6;overflow-x:auto;white-space:pre-wrap;word-break:break-all} @media (max-width:980px){ .embed-grid{grid-template-columns:1fr} .embed-card{border-right:0} .hero{grid-template-columns:1fr} .hero .head{border-right:0;border-bottom:1px solid var(--line)} .mani{grid-template-columns:1fr} .mani .txt{border-right:0;border-bottom:1px solid var(--line)} .phead{grid-template-columns:1fr} .phead .pic{border-right:0;border-bottom:1px solid var(--line)} .phead .pic img{width:100%;height:260px} .phead .quote{border-left:0;border-top:1px solid var(--line)} .glance{grid-template-columns:1fr 1fr 1fr} .glance div{border-bottom:1px solid rgba(255,255,255,.28)} .rev{grid-template-columns:1fr} .rev .chart{border-right:0;border-bottom:1px solid var(--line)} .prods{grid-template-columns:1fr} .prod{border-right:0;border-bottom:1px solid rgba(18,16,13,.14)} .duo{grid-template-columns:1fr} .duo>div:first-child{border-right:0;border-bottom:1px solid var(--line)} .product-grid,.cemetery-grid{grid-template-columns:1fr} .product-card,.cemetery-card{border-right:0} .vshead{grid-template-columns:1fr} .vsside{border:0!important;border-bottom:1px solid var(--line)!important} .rows2 td.lab{width:auto} .subscribe-strip{flex-direction:column;align-items:flex-start} .subscribe-strip .sub-form{width:100%} .subscribe-strip input[type=email]{flex:1} } /* ==== public intake forms: claim / add profile / correction ==== */ .formshell{max-width:560px;padding:26px 24px 70px} .formshell .lede{font-size:15px;line-height:1.6;color:var(--g);margin-bottom:26px} .formshell .field{margin-bottom:18px} .formshell label{display:block;font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--g);margin-bottom:6px} .formshell input[type=text],.formshell input[type=email],.formshell textarea{width:100%;border:1px solid var(--line);background:#fff;font-family:'Archivo',sans-serif;font-size:14px;padding:11px 12px} .formshell input:focus,.formshell textarea:focus{outline:2px solid var(--blue);outline-offset:1px} .formshell textarea{min-height:110px;resize:vertical} .formshell .hp-field{position:absolute;left:-9999px;width:1px;height:1px;opacity:0} .formshell .submitrow{display:flex;align-items:center;gap:16px;margin-top:8px} .formshell .msg{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.04em} .formshell .msg.err{color:var(--red)} .formshell .msg.ok{color:var(--up)} /* ==== guestbook ==== */ .gbwall{max-width:640px;padding:26px 24px 70px} .gbpost{border:1px solid var(--line);background:#fff;padding:18px 18px 20px;margin-bottom:26px} .gbentry{border:1px solid var(--line);background:#fff;padding:14px 16px;margin-bottom:12px} .gbentry .gbhead{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-family:'Space Mono',monospace;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--g)} .gbentry .gbname{font-weight:800;color:var(--k);text-transform:none;letter-spacing:0;font-family:'Archivo',sans-serif;font-size:14px} .gbentry .gburl{color:var(--blue)} .gbentry p{margin-top:8px;font-size:14px;line-height:1.55;white-space:pre-wrap}