/* DJ Durepoxy - blog surface. Same tokens as the React app (tokens.css) so /blog reads as the same site: obsidian canvas, self-hosted BankGothic display + Gobold body, amber signal, violet accent. None of this is loaded on SPA routes. */ @font-face{font-family:'BankGothic';src:url('/fonts/BankGothic-Bold.woff2') format('woff2'),url('/fonts/BankGothic-Bold.ttf') format('truetype');font-weight:700;font-display:swap} @font-face{font-family:'Gobold';src:url('/fonts/gobold.thin-light.woff2') format('woff2'),url('/fonts/gobold.thin-light.otf') format('opentype');font-weight:100 700;font-display:swap} :root{ --dj-paper:#0a0a0c; --dj-paper-2:oklch(17% 0.026 305); --dj-paper-3:oklch(22% 0.032 305); --dj-ink:oklch(96% 0.008 78); --dj-ink-2:rgba(255,255,255,.78); --dj-muted:oklch(67% 0.018 305); --dj-rule:oklch(29% 0.035 305); --dj-rule-2:oklch(39% 0.055 305); --dj-accent:oklch(70% 0.18 302); --dj-signal:oklch(77% 0.16 72); --dj-display:"BankGothic","Gobold",sans-serif; --dj-body:"Gobold","Arial Narrow",sans-serif; /* Full-width article: the body now spans the same 82rem container as the header, footer and blog index instead of a 42rem reading column. */ --dj-measure:82rem; --dj-gutter:clamp(1.25rem,5vw,2.5rem); --dj-ease:cubic-bezier(0.16,1,0.3,1); } *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}} body.djb{ margin:0;background:var(--dj-paper);color:var(--dj-ink-2); -webkit-font-smoothing:antialiased; /* clip, not hidden: overflow-x:hidden on turns the body into its own scroll container, which pins window.scrollY at 0 and kills the reading-progress bar. clip does not scroll. */ overflow-x:clip; } #djb-main{font-family:var(--dj-body);font-size:1.1875rem;line-height:1.75;text-rendering:optimizeLegibility;color:var(--dj-ink-2)} #djb-main img{max-width:100%;height:auto;display:block} #djb-main a{color:inherit} #djb-main :focus-visible{outline:2px solid var(--dj-signal);outline-offset:3px;border-radius:2px} .djb-skip{position:absolute;left:-9999px} .djb-skip:focus{left:1rem;top:1rem;z-index:200;background:var(--dj-signal);color:#111;padding:.6rem 1rem;font-family:var(--dj-display);letter-spacing:.08em} /* ---------- reading progress ---------- */ .djb-progress{position:fixed;inset:0 auto auto 0;height:2px;width:100%;transform:scaleX(0);transform-origin:0 50%;background:var(--dj-signal);z-index:120;will-change:transform} /* ---------- header ---------- */ .djb-head{position:sticky;top:0;z-index:100;background:rgba(10,10,12,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--dj-rule)} .djb-head__in{max-width:82rem;margin:0 auto;padding:.85rem var(--dj-gutter);display:flex;align-items:center;gap:clamp(1rem,3vw,2.25rem)} .djb-logo{flex:0 0 auto;display:block} .djb-logo img{height:clamp(34px,4.4vw,46px);width:auto} .djb-nav{display:none;flex:0 1 auto;min-width:0;gap:clamp(.75rem,1.6vw,1.5rem);align-items:center} .djb-nav a{font-family:var(--dj-display);font-size:.8125rem;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;color:rgba(255,255,255,.72);white-space:nowrap;transition:color .22s var(--dj-ease)} .djb-nav a:hover,.djb-nav a[aria-current="page"]{color:var(--dj-ink)} .djb-head__end{margin-left:auto;display:flex;align-items:center;gap:1rem} .djb-tel{display:none;font-family:var(--dj-display);font-size:.8125rem;letter-spacing:.12em;text-decoration:none;color:rgba(255,255,255,.72)} .djb-tel:hover{color:var(--dj-signal)} .djb-cta-btn{font-family:var(--dj-display);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;padding:.62rem 1.15rem;border:1px solid var(--dj-rule-2);color:var(--dj-ink);white-space:nowrap;transition:background .22s var(--dj-ease),border-color .22s var(--dj-ease)} .djb-cta-btn:hover{background:var(--dj-paper-3);border-color:var(--dj-signal)} /* The 7 nav labels are tracked at .16em, so logo + nav + phone + CTA only clear a 1280px viewport once the phone number steps out. Nav appears at 62rem, phone waits for 84rem. */ @media (min-width:62rem){.djb-nav{display:flex}} @media (min-width:84rem){.djb-tel{display:inline}} /* ---------- article ---------- */ /* width:min() rather than max-width+padding: a child that sets its own `padding` shorthand (the CTA panel does) would otherwise wipe the gutter and put its border on the screen edge. */ .djb-wrap{width:min(var(--dj-measure),calc(100% - 2*var(--dj-gutter)));margin-inline:auto} .djb-hero{padding-block:clamp(3rem,8vw,5.5rem) clamp(1.75rem,4vw,2.75rem)} .djb-back{display:inline-block;font-family:var(--dj-display);font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;color:var(--dj-muted);margin-bottom:clamp(1.5rem,4vw,2.5rem);transition:color .22s var(--dj-ease)} .djb-back:hover{color:var(--dj-signal)} .djb-eyebrow{margin:0 0 1.1rem;font-family:var(--dj-display);font-size:.75rem;letter-spacing:.28em;text-transform:uppercase;color:var(--dj-signal)} .djb-title{ margin:0;font-family:var(--dj-display);font-weight:700;text-transform:uppercase; font-size:clamp(2.05rem,5.4vw,3.4rem);line-height:1.04;letter-spacing:-.01em;color:#fff; text-wrap:balance; } .djb-standfirst{margin:1.6rem 0 0;font-size:clamp(1.15rem,2.4vw,1.35rem);line-height:1.62;color:rgba(255,255,255,.86)} .djb-meta{margin-top:1.9rem;padding-top:1.15rem;border-top:1px solid var(--dj-rule);display:flex;flex-wrap:wrap;gap:.45rem .95rem;font-family:var(--dj-display);font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;color:var(--dj-muted)} .djb-meta span+span::before{content:"\00b7";margin-right:.95rem;color:var(--dj-rule-2)} .djb-figure{width:min(var(--dj-measure),calc(100% - 2*var(--dj-gutter)));margin:clamp(1.5rem,4vw,2.5rem) auto 0} .djb-figure img{width:100%;aspect-ratio:16/9;object-fit:cover} /* ---------- body copy ---------- */ .djb-body{padding-block:clamp(2rem,5vw,3rem) clamp(2.5rem,6vw,4rem);padding-inline:var(--dj-gutter)} .djb-body>*{max-width:var(--dj-measure);margin-inline:auto} .djb-body p{margin-block:0 1.5rem;color:var(--dj-ink-2)} .djb-body>p:first-of-type{font-size:1.3125rem;line-height:1.66;color:rgba(255,255,255,.9)} .djb-body h2{ margin-block:clamp(2.75rem,6vw,3.75rem) 1.15rem;font-family:var(--dj-display);font-weight:700; text-transform:uppercase;font-size:clamp(1.35rem,3vw,1.85rem);line-height:1.16;letter-spacing:.005em; color:var(--dj-ink);text-wrap:balance; } .djb-body h2::before{content:"";display:block;width:2.25rem;height:2px;background:var(--dj-signal);margin-bottom:1.15rem} .djb-body h3{margin-block:2.25rem .85rem;font-family:var(--dj-display);font-weight:700;text-transform:uppercase;font-size:1.0625rem;letter-spacing:.05em;line-height:1.3;color:var(--dj-ink)} .djb-body ul,.djb-body ol{margin-block:0 1.5rem;padding-left:1.35rem} .djb-body li{margin-bottom:.6rem} .djb-body li::marker{color:var(--dj-signal)} .djb-body a{color:var(--dj-accent);text-decoration:underline;text-underline-offset:.22em;text-decoration-thickness:1px;transition:color .2s var(--dj-ease)} .djb-body a:hover{color:var(--dj-signal)} .djb-body strong{color:var(--dj-ink);font-weight:700} .djb-body hr{border:0;border-top:1px solid var(--dj-rule);margin-block:clamp(2.5rem,6vw,3.5rem)} /* Short declarative lines ("It does." / "It melts.") read as beats, not orphan paragraphs. */ .djb-body p.djb-beat{font-family:var(--dj-display);text-transform:uppercase;letter-spacing:.1em;font-size:1rem;color:var(--dj-signal);margin-block:0 1.5rem} /* ---------- FAQ ---------- */ .djb-faq{padding-block:clamp(1rem,3vw,2rem) clamp(2.5rem,6vw,3.5rem)} .djb-faq__title{margin:0 0 1.75rem;font-family:var(--dj-display);font-weight:700;text-transform:uppercase;font-size:clamp(1.35rem,3vw,1.85rem);letter-spacing:.005em;color:var(--dj-ink)} .djb-faq__title::before{content:"";display:block;width:2.25rem;height:2px;background:var(--dj-signal);margin-bottom:1.15rem} .djb-q{border-top:1px solid var(--dj-rule)} .djb-q:last-of-type{border-bottom:1px solid var(--dj-rule)} .djb-q>summary{ list-style:none;cursor:pointer;padding:1.15rem 2.5rem 1.15rem 0;position:relative; font-family:var(--dj-display);text-transform:uppercase;font-size:.9375rem;letter-spacing:.045em; line-height:1.4;color:var(--dj-ink);transition:color .2s var(--dj-ease); } .djb-q>summary::-webkit-details-marker{display:none} .djb-q>summary:hover{color:var(--dj-signal)} .djb-q>summary::after{content:"";position:absolute;right:.35rem;top:50%;width:.7rem;height:.7rem;margin-top:-.45rem;border-right:1.5px solid var(--dj-signal);border-bottom:1.5px solid var(--dj-signal);transform:rotate(45deg);transform-origin:60% 60%;transition:transform .28s var(--dj-ease)} .djb-q[open]>summary::after{transform:rotate(225deg)} .djb-q__a{padding:0 0 1.35rem;color:var(--dj-ink-2)} .djb-q__a p{margin:0} /* ---------- CTA ---------- */ .djb-cta{margin-block:clamp(1rem,3vw,1.5rem) clamp(3rem,7vw,4.5rem);border:1px solid var(--dj-rule);background:linear-gradient(180deg,var(--dj-paper-2),var(--dj-paper));padding:clamp(1.75rem,5vw,2.75rem)} .djb-cta h2{margin:0 0 .85rem;font-family:var(--dj-display);font-weight:700;text-transform:uppercase;font-size:clamp(1.25rem,2.8vw,1.6rem);line-height:1.18;color:#fff} .djb-cta p{margin:0 0 1.6rem;color:rgba(255,255,255,.8)} .djb-cta__row{display:flex;flex-wrap:wrap;gap:.85rem;align-items:center} .djb-btn{display:inline-block;font-family:var(--dj-display);font-size:.8125rem;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;padding:.85rem 1.6rem;transition:background .22s var(--dj-ease),color .22s var(--dj-ease),border-color .22s var(--dj-ease)} .djb-btn--solid{background:var(--dj-signal);color:#14100a;border:1px solid var(--dj-signal)} .djb-btn--solid:hover{background:transparent;color:var(--dj-signal)} .djb-btn--ghost{border:1px solid var(--dj-rule-2);color:var(--dj-ink)} .djb-btn--ghost:hover{border-color:var(--dj-signal);color:var(--dj-signal)} .djb-warranty{margin-top:1.35rem;font-family:var(--dj-display);font-size:.6875rem;letter-spacing:.2em;text-transform:uppercase;color:var(--dj-muted)} /* ---------- prev / next ---------- */ .djb-pager{border-top:1px solid var(--dj-rule);padding-block:clamp(2rem,5vw,3rem);display:grid;gap:1.5rem} @media (min-width:48rem){.djb-pager{grid-template-columns:1fr 1fr;gap:2.5rem}} .djb-pager a{text-decoration:none;display:block} .djb-pager__k{display:block;font-family:var(--dj-display);font-size:.6875rem;letter-spacing:.2em;text-transform:uppercase;color:var(--dj-muted);margin-bottom:.6rem} .djb-pager__t{font-family:var(--dj-display);text-transform:uppercase;font-size:1rem;line-height:1.32;letter-spacing:.03em;color:var(--dj-ink);transition:color .22s var(--dj-ease)} .djb-pager a:hover .djb-pager__t{color:var(--dj-signal)} @media (min-width:48rem){.djb-pager__next{text-align:right}} /* ---------- index ---------- */ .djb-index-hero{max-width:82rem;margin:0 auto;padding:clamp(3.5rem,9vw,6rem) var(--dj-gutter) clamp(2rem,5vw,3rem)} .djb-index-hero h1{margin:0;font-family:var(--dj-display);font-weight:700;text-transform:uppercase;font-size:clamp(2.4rem,7vw,4.5rem);line-height:1.02;letter-spacing:-.015em;color:#fff} .djb-index-hero p{margin:1.4rem 0 0;max-width:38rem;font-size:clamp(1.05rem,2.2vw,1.25rem);color:rgba(255,255,255,.8)} .djb-list{max-width:82rem;margin:0 auto;padding:0 var(--dj-gutter) clamp(3rem,8vw,5rem)} .djb-card{display:grid;gap:1.25rem;padding-block:clamp(1.75rem,4vw,2.5rem);border-top:1px solid var(--dj-rule);align-items:start} .djb-card:last-child{border-bottom:1px solid var(--dj-rule)} @media (min-width:52rem){.djb-card{grid-template-columns:minmax(0,15rem) minmax(0,1fr);gap:2.5rem}} .djb-card__media{overflow:hidden;background:var(--dj-paper-2)} .djb-card__media img{width:100%;aspect-ratio:16/10;object-fit:cover;transition:transform .5s var(--dj-ease)} .djb-card:hover .djb-card__media img{transform:scale(1.04)} .djb-card__k{font-family:var(--dj-display);font-size:.6875rem;letter-spacing:.22em;text-transform:uppercase;color:var(--dj-signal);margin-bottom:.7rem} .djb-card__t{margin:0 0 .8rem;font-family:var(--dj-display);font-weight:700;text-transform:uppercase;font-size:clamp(1.2rem,2.6vw,1.55rem);line-height:1.18;letter-spacing:.005em} .djb-card__t a{color:var(--dj-ink);text-decoration:none;transition:color .22s var(--dj-ease)} .djb-card:hover .djb-card__t a{color:var(--dj-signal)} .djb-card__x{margin:0 0 .9rem;color:var(--dj-ink-2);font-size:1.0625rem} .djb-card__m{font-family:var(--dj-display);font-size:.6875rem;letter-spacing:.18em;text-transform:uppercase;color:var(--dj-muted)} .djb-empty{max-width:82rem;margin:0 auto;padding:clamp(2rem,5vw,3rem) var(--dj-gutter) clamp(4rem,9vw,6rem);color:var(--dj-muted)} .djb-pagination{max-width:82rem;margin:0 auto;padding:0 var(--dj-gutter) clamp(3rem,8vw,5rem);display:flex;gap:.6rem;flex-wrap:wrap} .djb-pagination .page-numbers{font-family:var(--dj-display);font-size:.8125rem;letter-spacing:.1em;text-decoration:none;color:var(--dj-muted);border:1px solid var(--dj-rule);padding:.5rem .85rem} .djb-pagination .page-numbers.current,.djb-pagination .page-numbers:hover{color:var(--dj-signal);border-color:var(--dj-signal)} /* ---------- footer ---------- */ .djb-foot{border-top:1px solid var(--dj-rule);background:var(--dj-paper)} .djb-foot__in{max-width:82rem;margin:0 auto;padding:clamp(2.5rem,6vw,3.5rem) var(--dj-gutter) 2rem;display:grid;gap:2rem} @media (min-width:52rem){.djb-foot__in{grid-template-columns:1fr auto;align-items:center}} .djb-foot__nav{display:flex;flex-wrap:wrap;gap:.85rem 1.6rem} .djb-foot__nav a{font-family:var(--dj-display);font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;color:rgba(255,255,255,.68)} .djb-foot__nav a:hover{color:var(--dj-signal)} .djb-foot__note{margin:1.2rem 0 0;font-size:.9375rem;color:var(--dj-muted)} .djb-foot__legal{border-top:1px solid var(--dj-rule);max-width:82rem;margin:0 auto;padding:1.25rem var(--dj-gutter) 2.5rem;font-family:var(--dj-display);font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;color:var(--dj-muted);display:flex;flex-wrap:wrap;gap:.6rem 1.5rem;justify-content:space-between}