/* =============================================================================== DATAGUY | THE AI ECONOMY EXCLUSIVE EDITORIAL DESIGN SYSTEM Version 1.0 Namespace: dgr1 =============================================================================== PURPOSE ------- A new visual layer for Articles 1–7 of The AI Economy series. The existing HTML architecture remains intact. This system is deliberately built as an enhancement layer over the existing dgr-* structure. ACTIVATION ---------- Add dgr1-article to the existing article element:
Optional article-specific marker:
Available: dgr1-article-01 dgr1-article-02 dgr1-article-03 dgr1-article-04 dgr1-article-05 dgr1-article-06 dgr1-article-07 DESIGN PHILOSOPHY ----------------- The page remains white. The article becomes a restrained editorial object built from: BLACK WHITE GREY A single muted complementary accent is reserved for exceptional emphasis. The visual identity is intentionally closer to a premium institutional journal than to a technology publication. No gradients. No glassmorphism. No neon. No decorative UI. No excessive rounded cards. No visual clutter. No forced animation. The system is designed around: hierarchy rhythm negative space editorial contrast conceptual frameworks architectural SVGs image-led openings precise captions restrained metadata */ /* ========================================================================== 01. DESIGN TOKENS ========================================================================== */ :root{ /* ---------------------------------------------------------------------- Core palette ---------------------------------------------------------------------- */ --dgr1-black:#0a0a0a; --dgr1-black-soft:#151515; --dgr1-charcoal:#242424; --dgr1-grey-900:#303030; --dgr1-grey-700:#575757; --dgr1-grey-500:#858585; --dgr1-grey-300:#bdbdbd; --dgr1-grey-200:#d8d8d8; --dgr1-grey-100:#ededed; --dgr1-white:#ffffff; --dgr1-paper:#fbfbfa; /* ---------------------------------------------------------------------- Complementary accent Used very sparingly. This is intentionally muted rather than bright. It preserves the restrained monochrome identity established by the hero imagery while giving the editorial system one recognisable signal. ---------------------------------------------------------------------- */ --dgr1-accent:#8b7561; --dgr1-accent-dark:#675344; --dgr1-accent-light:#d7cdc3; /* ---------------------------------------------------------------------- Semantic colours ---------------------------------------------------------------------- */ --dgr1-text:var(--dgr1-black); --dgr1-text-soft:var(--dgr1-grey-700); --dgr1-text-muted:var(--dgr1-grey-500); --dgr1-border:var(--dgr1-grey-200); --dgr1-border-light:var(--dgr1-grey-100); --dgr1-border-dark:var(--dgr1-grey-300); /* ---------------------------------------------------------------------- Typography Serif carries argument and hierarchy. Sans-serif carries metadata, labels and systems language. ---------------------------------------------------------------------- */ --dgr1-font-editorial: Georgia, "Times New Roman", serif; --dgr1-font-ui: Inter, "Helvetica Neue", Arial, sans-serif; --dgr1-font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace; /* ---------------------------------------------------------------------- Layout ---------------------------------------------------------------------- */ --dgr1-content:860px; --dgr1-wide:1120px; --dgr1-hero-wide:1180px; --dgr1-gutter:clamp(24px,5vw,72px); /* ---------------------------------------------------------------------- Geometry ---------------------------------------------------------------------- */ --dgr1-radius:0; --dgr1-radius-small:2px; /* ---------------------------------------------------------------------- Shadows Kept almost invisible. The design relies on contrast, not elevation. ---------------------------------------------------------------------- */ --dgr1-shadow: 0 14px 40px rgba(0,0,0,.06); /* ---------------------------------------------------------------------- Timing ---------------------------------------------------------------------- */ --dgr1-transition: 180ms ease; } /* ========================================================================== 02. ARTICLE CANVAS ========================================================================== */ /* The surrounding WordPress page remains white. The article itself is the editorial canvas. */ .dgr1-article{ --dgr-heading:var(--dgr1-black); --dgr-text:var(--dgr1-text); --dgr-text-soft:var(--dgr1-text-soft); --dgr-text-muted:var(--dgr1-text-muted); --dgr-border:var(--dgr1-border); --dgr-border-light:var(--dgr1-border-light); --dgr-surface:var(--dgr1-white); --dgr-bg:var(--dgr1-paper); --dgr-accent:var(--dgr1-accent); position:relative; width:min( calc(100% - 32px), 1180px ); margin:48px auto 80px; padding:clamp(28px,6vw,88px); background:var(--dgr1-white); color:var(--dgr1-text); border:1px solid var(--dgr1-border-light); box-shadow:none; overflow:hidden; } /* ========================================================================== 03. REMOVE LEGACY VISUAL LANGUAGE INSIDE NEW SYSTEM ========================================================================== */ /* The existing system uses navy, burgundy, coloured semantic cards, rounded containers and soft shadows. The new series layer replaces those visual signals without requiring the underlying HTML to be rewritten. */ .dgr1-article .dgr-card, .dgr1-article .dgr-related-card, .dgr1-article .dgr-next, .dgr1-article .dgr-series-footer, .dgr1-article .dgr-callout, .dgr1-article .dgr-sidebar, .dgr1-article .dgr-summary, .dgr1-article .dgr-evidence-base, .dgr1-article .dgr-principle, .dgr1-article .dgr-matrix-cell, .dgr1-article .dgr-comparison-column{ border-radius:var(--dgr1-radius); box-shadow:none; } /* ========================================================================== 04. PUBLICATION MARKER ========================================================================== */ .dgr1-article .dgr-publication{ display:inline-flex; align-items:center; gap:12px; margin-bottom:22px; color:var(--dgr1-black); font-family:var(--dgr1-font-ui); font-size:.68rem; font-weight:700; letter-spacing:.22em; text-transform:uppercase; } .dgr1-article .dgr-publication::before{ content:""; display:block; width:28px; height:1px; background:var(--dgr1-black); } /* ========================================================================== 05. SERIES MARKER ========================================================================== */ .dgr1-article .dgr-series{ display:flex; align-items:center; gap:10px; margin-bottom:18px; color:var(--dgr1-grey-500); font-family:var(--dgr1-font-ui); font-size:.67rem; font-weight:600; letter-spacing:.20em; text-transform:uppercase; } .dgr1-article .dgr-series::before{ content:""; width:18px; height:1px; background:var(--dgr1-grey-500); } /* ========================================================================== 06. HEADER ========================================================================== */ .dgr1-article .dgr-header{ margin-bottom:64px; position:relative; } .dgr1-article .dgr-title{ max-width:11ch; margin:0; color:var(--dgr1-black); font-family:var(--dgr1-font-editorial); font-size:clamp( 3.2rem, 8vw, 6.8rem ); font-weight:400; line-height:.88; letter-spacing:-.055em; text-wrap:balance; } /* Editorial title marker. It provides a small visual signature without adding another decorative object to the composition. */ .dgr1-article .dgr-title::after{ content:""; display:block; width:56px; height:3px; margin-top:34px; background:var(--dgr1-black); } /* ========================================================================== 07. SUBTITLE / DEK ========================================================================== */ .dgr1-article .dgr-subtitle{ max-width:720px; margin:28px 0 34px; color:var(--dgr1-grey-700); font-family:var(--dgr1-font-editorial); font-size:clamp( 1.25rem, 2.4vw, 1.7rem ); font-style:normal; line-height:1.48; letter-spacing:-.01em; } /* ========================================================================== 08. META ========================================================================== */ .dgr1-article .dgr-meta{ display:flex; flex-wrap:wrap; gap:0; margin-top:30px; padding-top:18px; border-top:1px solid var(--dgr1-black); color:var(--dgr1-grey-500); font-family:var(--dgr1-font-ui); font-size:.68rem; letter-spacing:.10em; text-transform:uppercase; } .dgr1-article .dgr-meta-item{ min-height:24px; padding-right:18px; margin-right:18px; border-right:1px solid var(--dgr1-border); } .dgr1-article .dgr-meta-item:last-child{ border-right:0; } .dgr1-article .dgr-meta-label{ color:var(--dgr1-black); font-weight:700; } /* ========================================================================== 09. HERO IMAGE ========================================================================== */ .dgr1-article .dgr-hero-image, .dgr1-article .dgr-figure:first-of-type{ width:calc(100% + clamp(32px,10vw,140px)); margin-top:72px; margin-bottom:76px; margin-left:calc(clamp(32px,5vw,70px) * -1); transform:translateX(0); } .dgr1-article .dgr-hero-image img, .dgr1-article .dgr-figure:first-of-type img{ width:100%; border-radius:0; border:0; box-shadow:none; } .dgr1-article .dgr-hero-caption, .dgr1-article .dgr-caption{ max-width:760px; margin:14px auto 0; color:var(--dgr1-grey-500); font-family:var(--dgr1-font-ui); font-size:.72rem; line-height:1.55; letter-spacing:.015em; text-align:left; } /* ========================================================================== 10. HERO IMAGE PLACEHOLDER ========================================================================== */ .dgr1-hero-placeholder{ position:relative; min-height:420px; display:grid; place-items:center; background:var(--dgr1-paper); border-top:1px solid var(--dgr1-black); border-bottom:1px solid var(--dgr1-black); overflow:hidden; } .dgr1-hero-placeholder::before{ content:"HERO IMAGE"; font-family:var(--dgr1-font-ui); font-size:.66rem; font-weight:700; letter-spacing:.22em; color:var(--dgr1-grey-500); } .dgr1-hero-placeholder::after{ content:"16:9"; position:absolute; right:18px; bottom:14px; font-family:var(--dgr1-font-mono); font-size:.62rem; color:var(--dgr1-grey-500); } /* ========================================================================== 11. INTRODUCTION ========================================================================== */ .dgr1-article .dgr-intro{ max-width:820px; margin-bottom:88px; padding-top:8px; } .dgr1-article .dgr-lead{ margin-bottom:28px; color:var(--dgr1-black); font-family:var(--dgr1-font-editorial); font-size:clamp( 1.55rem, 3vw, 2.15rem ); font-weight:400; line-height:1.42; letter-spacing:-.018em; } .dgr1-article .dgr-standfirst{ max-width:720px; color:var(--dgr1-grey-700); font-family:var(--dgr1-font-editorial); font-size:1.08rem; line-height:1.82; } /* ========================================================================== 12. BODY TYPOGRAPHY ========================================================================== */ .dgr1-article .dgr-body{ max-width:var(--dgr1-content); margin-inline:auto; } .dgr1-article .dgr-body p{ color:var(--dgr1-text); font-family:var(--dgr1-font-editorial); font-size:1.12rem; line-height:1.88; letter-spacing:-.003em; } .dgr1-article .dgr-body p strong{ color:var(--dgr1-black); font-weight:700; } .dgr1-article .dgr-body a{ color:var(--dgr1-black); text-decoration-line:underline; text-decoration-thickness:1px; text-underline-offset:3px; } .dgr1-article .dgr-body a:hover{ color:var(--dgr1-accent-dark); } /* ========================================================================== 13. SECTION ARCHITECTURE ========================================================================== */ .dgr1-article .dgr-body>section, .dgr1-article .dgr-section{ margin-bottom:104px; scroll-margin-top:80px; } /* ========================================================================== 14. SECTION NUMBER ========================================================================== */ .dgr1-article .dgr-section-number{ display:flex; align-items:center; gap:14px; margin-bottom:18px; color:var(--dgr1-grey-500); font-family:var(--dgr1-font-mono); font-size:.67rem; font-weight:500; letter-spacing:.08em; text-transform:uppercase; } .dgr1-article .dgr-section-number::after{ content:""; width:40px; height:1px; background:var(--dgr1-grey-300); } /* ========================================================================== 15. SECTION HEADINGS ========================================================================== */ .dgr1-article .dgr-section-title, .dgr1-article h2{ max-width:780px; margin-top:0; margin-bottom:26px; padding:0; border:0; color:var(--dgr1-black); font-family:var(--dgr1-font-editorial); font-size:clamp( 2rem, 4.5vw, 3.45rem ); font-weight:400; line-height:.98; letter-spacing:-.045em; } .dgr1-article h3{ margin-top:42px; margin-bottom:14px; color:var(--dgr1-black); font-family:var(--dgr1-font-editorial); font-size:1.55rem; font-weight:700; line-height:1.15; } /* ========================================================================== 16. SECTION INTRO ========================================================================== */ .dgr1-article .dgr-section-intro{ max-width:700px; margin-bottom:34px; color:var(--dgr1-grey-700); font-family:var(--dgr1-font-editorial); font-size:1.12rem; line-height:1.75; } /* ========================================================================== 17. CHAPTER DIVIDER ========================================================================== */ .dgr1-article .dgr-divider{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:20px; margin:110px 0; } .dgr1-article .dgr-divider::before, .dgr1-article .dgr-divider::after{ content:""; height:1px; background:var(--dgr1-black); } .dgr1-article .dgr-divider span{ color:var(--dgr1-grey-500); font-family:var(--dgr1-font-ui); font-size:.62rem; font-weight:700; letter-spacing:.20em; text-transform:uppercase; } /* ========================================================================== 18. PULL QUOTE ========================================================================== */ .dgr1-article .dgr-pullquote{ position:relative; max-width:780px; margin:110px auto; padding:38px 0 38px 36px; text-align:left; border-left:2px solid var(--dgr1-black); } .dgr1-article .dgr-pullquote blockquote{ margin:0; padding:0; border:0; color:var(--dgr1-black); font-family:var(--dgr1-font-editorial); font-size:clamp( 1.7rem, 3.2vw, 2.45rem ); font-style:normal; line-height:1.32; letter-spacing:-.025em; } .dgr1-article .dgr-pullquote cite{ margin-top:18px; color:var(--dgr1-grey-500); font-family:var(--dgr1-font-ui); font-size:.68rem; letter-spacing:.10em; text-transform:uppercase; } /* ========================================================================== 19. INSIGHT / FRAMEWORK CARDS ========================================================================== */ /* Cards are no longer "cards" in the conventional web-design sense. They become editorial plates. */ .dgr1-article .dgr-card{ margin:72px 0; padding:34px 0 38px; background:transparent; border:0; border-top:1px solid var(--dgr1-black); border-bottom:1px solid var(--dgr1-border); border-left:0; } .dgr1-article .dgr-card-label{ margin-bottom:18px; color:var(--dgr1-grey-500); font-family:var(--dgr1-font-mono); font-size:.63rem; font-weight:500; letter-spacing:.12em; text-transform:uppercase; } .dgr1-article .dgr-card-title{ margin:0 0 18px; color:var(--dgr1-black); font-family:var(--dgr1-font-editorial); font-size:1.8rem; font-weight:700; line-height:1.1; } .dgr1-article .dgr-card-body{ max-width:720px; } .dgr1-article .dgr-card-body p{ margin-bottom:1rem; } /* ========================================================================== 20. SEMANTIC CARD VARIANTS ========================================================================== */ .dgr1-article .dgr-card-insight, .dgr1-article .dgr-card-framework, .dgr1-article .dgr-card-model, .dgr1-article .dgr-card-definition, .dgr1-article .dgr-card-evidence, .dgr1-article .dgr-card-takeaway, .dgr1-article .dgr-card-warning, .dgr1-article .dgr-card-observation{ border-left:0; } .dgr1-article .dgr-card-insight .dgr-card-label, .dgr1-article .dgr-card-framework .dgr-card-label, .dgr1-article .dgr-card-model .dgr-card-label, .dgr1-article .dgr-card-definition .dgr-card-label, .dgr1-article .dgr-card-evidence .dgr-card-label, .dgr1-article .dgr-card-takeaway .dgr-card-label, .dgr1-article .dgr-card-warning .dgr-card-label, .dgr1-article .dgr-card-observation .dgr-card-label{ color:var(--dgr1-grey-500); } /* ========================================================================== 21. DEFINING FRAMEWORK ========================================================================== */ .dgr1-framework{ position:relative; margin:96px calc(clamp(32px,6vw,80px) * -1); padding:64px clamp(28px,6vw,88px); background:var(--dgr1-black); color:var(--dgr1-white); overflow:hidden; } .dgr1-framework::before{ content:"FRAMEWORK"; position:absolute; top:24px; right:28px; color:#777; font-family:var(--dgr1-font-mono); font-size:.60rem; letter-spacing:.16em; } .dgr1-framework h2, .dgr1-framework h3{ color:var(--dgr1-white); border:0; } .dgr1-framework p{ color:#d2d2d2; } .dgr1-framework .dgr-editorial-svg{ margin-bottom:0; } /* ========================================================================== 22. EDITORIAL SVG ========================================================================== */ .dgr1-article .dgr-editorial-svg{ margin:72px 0 92px; } .dgr1-article .dgr-editorial-svg svg{ width:100%; padding:32px; background:var(--dgr1-white); border:1px solid var(--dgr1-black); border-radius:0; box-shadow:none; } .dgr1-article .dgr-editorial-svg figcaption{ margin-top:14px; color:var(--dgr1-grey-500); font-family:var(--dgr1-font-ui); font-size:.72rem; line-height:1.55; } /* ========================================================================== 23. SVG VISUAL LANGUAGE ========================================================================== */ .dgr1-article .dgr-svg-title{ fill:var(--dgr1-black); font-family:var(--dgr1-font-ui); font-size:30px; font-weight:700; letter-spacing:-.02em; } .dgr1-article .dgr-svg-subtitle{ fill:var(--dgr1-grey-700); font-family:var(--dgr1-font-ui); font-size:15px; } .dgr1-article .dgr-svg-layer{ fill:var(--dgr1-white); stroke:var(--dgr1-black); stroke-width:1.5; } .dgr1-article .dgr-svg-layer-primary{ fill:var(--dgr1-grey-100); stroke:var(--dgr1-black); stroke-width:1.5; } .dgr1-article .dgr-svg-node{ fill:var(--dgr1-white); stroke:var(--dgr1-black); stroke-width:1.5; } .dgr1-article .dgr-svg-node-primary{ fill:var(--dgr1-black); stroke:var(--dgr1-black); stroke-width:1.5; } .dgr1-article .dgr-svg-label{ fill:var(--dgr1-black); font-family:var(--dgr1-font-ui); font-size:17px; font-weight:600; } .dgr1-article .dgr-svg-note{ fill:var(--dgr1-grey-500); font-family:var(--dgr1-font-ui); font-size:14px; } .dgr1-article .dgr-svg-caption{ fill:var(--dgr1-grey-700); font-family:var(--dgr1-font-ui); font-size:12px; } .dgr1-article .dgr-svg-connector{ fill:none; stroke:var(--dgr1-black); stroke-width:2; } .dgr1-article .dgr-svg-arrow{ fill:none; stroke:var(--dgr1-grey-700); stroke-width:1.5; } .dgr1-article .dgr-svg-highlight{ fill:var(--dgr1-accent); } .dgr1-article .dgr-svg-border{ fill:none; stroke:var(--dgr1-grey-300); stroke-width:1; } /* ========================================================================== 24. PROCESS COMPONENT ========================================================================== */ .dgr1-article .dgr-process{ margin:80px 0; gap:0; border-top:1px solid var(--dgr1-black); border-bottom:1px solid var(--dgr1-black); } .dgr1-article .dgr-process-step{ display:grid; grid-template-columns:72px 1fr; gap:24px; padding:28px 0; border-bottom:1px solid var(--dgr1-border); } .dgr1-article .dgr-process-step:last-child{ border-bottom:0; } .dgr1-article .dgr-process-number{ width:48px; height:48px; border-radius:0; background:var(--dgr1-black); color:var(--dgr1-white); font-family:var(--dgr1-font-mono); font-size:.75rem; } .dgr1-article .dgr-process-content h3{ margin-top:0; } /* ========================================================================== 25. COMPARISON ========================================================================== */ .dgr1-article .dgr-comparison{ gap:0; margin:80px 0; border-top:1px solid var(--dgr1-black); border-bottom:1px solid var(--dgr1-black); } .dgr1-article .dgr-comparison-column{ padding:34px; background:var(--dgr1-white); border:0; border-right:1px solid var(--dgr1-border); } .dgr1-article .dgr-comparison-column:last-child{ border-right:0; } .dgr1-article .dgr-comparison-title{ margin:0 0 18px; color:var(--dgr1-black); font-family:var(--dgr1-font-ui); font-size:.70rem; letter-spacing:.16em; text-transform:uppercase; } /* ========================================================================== 26. TIMELINE ========================================================================== */ .dgr1-article .dgr-timeline{ margin:80px 0; padding-left:42px; } .dgr1-article .dgr-timeline::before{ width:1px; left:10px; background:var(--dgr1-black); } .dgr1-article .dgr-timeline-item{ margin-bottom:48px; } .dgr1-article .dgr-timeline-item::before{ left:-37px; top:4px; width:10px; height:10px; border-radius:0; background:var(--dgr1-black); } .dgr1-article .dgr-timeline-date{ color:var(--dgr1-grey-500); font-family:var(--dgr1-font-mono); font-size:.66rem; letter-spacing:.08em; } /* ========================================================================== 27. KEY QUESTION ========================================================================== */ .dgr1-article .dgr-question{ margin:96px 0; padding:64px 24px; border-top:1px solid var(--dgr1-black); border-bottom:1px solid var(--dgr1-black); text-align:left; } .dgr1-article .dgr-question h2{ margin-top:0; } .dgr1-article .dgr-question-text{ max-width:760px; margin:0; color:var(--dgr1-black); font-family:var(--dgr1-font-editorial); font-size:clamp( 1.8rem, 3.8vw, 3rem ); line-height:1.25; letter-spacing:-.03em; } /* ========================================================================== 28. HIGHLIGHT BOX ========================================================================== */ .dgr1-article .dgr-highlight-box{ margin:88px 0; padding:48px; background:var(--dgr1-black); color:var(--dgr1-white); border-radius:0; } .dgr1-article .dgr-highlight-box h2, .dgr1-article .dgr-highlight-box h3, .dgr1-article .dgr-highlight-box h4{ color:var(--dgr1-white); border:0; } .dgr1-article .dgr-highlight-box p{ color:#d8d8d8; } /* ========================================================================== 29. SUMMARY ========================================================================== */ .dgr1-article .dgr-summary{ margin:88px 0; padding:40px 0; background:transparent; border-top:1px solid var(--dgr1-black); border-bottom:1px solid var(--dgr1-border); } .dgr1-article .dgr-summary-title{ color:var(--dgr1-black); font-family:var(--dgr1-font-ui); font-size:.70rem; letter-spacing:.18em; text-transform:uppercase; } /* ========================================================================== 30. NOTE / SIDEBAR / CALLOUT ========================================================================== */ .dgr1-article .dgr-note, .dgr1-article .dgr-callout, .dgr1-article .dgr-sidebar{ margin:64px 0; padding:28px 32px; background:var(--dgr1-paper); border:1px solid var(--dgr1-border); border-left:2px solid var(--dgr1-black); border-radius:0; } .dgr1-article .dgr-callout-title, .dgr1-article .dgr-sidebar-title{ color:var(--dgr1-black); font-family:var(--dgr1-font-editorial); } /* ========================================================================== 31. STATS ========================================================================== */ .dgr1-article .dgr-stat{ margin:80px 0; padding:44px 20px; border-top:1px solid var(--dgr1-black); border-bottom:1px solid var(--dgr1-black); text-align:left; } .dgr1-article .dgr-stat-value{ color:var(--dgr1-black); font-family:var(--dgr1-font-editorial); font-size:clamp( 3.5rem, 8vw, 6rem ); font-weight:400; letter-spacing:-.055em; } .dgr1-article .dgr-stat-label{ color:var(--dgr1-grey-500); font-family:var(--dgr1-font-ui); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; } /* ========================================================================== 32. TABLES ========================================================================== */ .dgr1-article .dgr-table, .dgr1-article .dgr-data-table{ margin:72px 0; overflow-x:auto; } .dgr1-article table{ margin:0; background:var(--dgr1-white); border-top:1px solid var(--dgr1-black); border-bottom:1px solid var(--dgr1-black); } .dgr1-article th{ padding:16px 14px; background:var(--dgr1-black); color:var(--dgr1-white); border:0; font-family:var(--dgr1-font-ui); font-size:.66rem; font-weight:700; letter-spacing:.10em; text-transform:uppercase; } .dgr1-article td{ padding:18px 14px; color:var(--dgr1-text); border:0; border-bottom:1px solid var(--dgr1-border); font-family:var(--dgr1-font-editorial); vertical-align:top; } .dgr1-article tbody tr:nth-child(even){ background:var(--dgr1-paper); } /* ========================================================================== 33. EVIDENCE BASE ========================================================================== */ .dgr1-article .dgr-evidence-base{ margin-top:96px; padding:40px 0; background:transparent; border:0; border-top:1px solid var(--dgr1-black); border-bottom:1px solid var(--dgr1-border); border-left:0; border-radius:0; } .dgr1-article .dgr-evidence-base-title{ color:var(--dgr1-black); font-family:var(--dgr1-font-editorial); font-size:1.8rem; } .dgr1-article .dgr-evidence-list{ color:var(--dgr1-grey-700); font-family:var(--dgr1-font-ui); font-size:.82rem; line-height:1.65; } /* ========================================================================== 34. CONCLUSION ========================================================================== */ .dgr1-article .dgr-conclusion{ margin-top:120px; padding-top:54px; border-top:3px solid var(--dgr1-black); } .dgr1-article .dgr-conclusion h2{ margin-top:0; font-size:clamp( 2.4rem, 5vw, 4rem ); } .dgr1-article .dgr-conclusion p:last-child{ margin-bottom:0; } /* ========================================================================== 35. SERIES FOOTER ========================================================================== */ .dgr1-article .dgr-series-footer{ margin-top:100px; padding:42px 0; background:transparent; border:0; border-top:1px solid var(--dgr1-black); border-bottom:1px solid var(--dgr1-border); } .dgr1-article .dgr-series-footer-title{ margin:0 0 14px; color:var(--dgr1-black); font-family:var(--dgr1-font-editorial); font-size:1.8rem; } /* ========================================================================== 36. RELATED ARTICLES ========================================================================== */ .dgr1-article .dgr-related{ margin-top:96px; } .dgr1-article .dgr-related-title{ color:var(--dgr1-black); font-family:var(--dgr1-font-ui); font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; } .dgr1-article .dgr-related-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; border-top:1px solid var(--dgr1-black); border-bottom:1px solid var(--dgr1-black); } .dgr1-article .dgr-related-card{ padding:28px; border:0; border-right:1px solid var(--dgr1-border); background:var(--dgr1-white); transition: background var(--dgr1-transition), color var(--dgr1-transition); } .dgr1-article .dgr-related-card:last-child{ border-right:0; } .dgr1-article .dgr-related-card:hover{ transform:none; background:var(--dgr1-black); } .dgr1-article .dgr-related-card h3{ margin-top:0; color:var(--dgr1-black); font-size:1.25rem; } .dgr1-article .dgr-related-card p{ color:var(--dgr1-grey-700); font-size:.98rem; } .dgr1-article .dgr-related-card:hover h3, .dgr1-article .dgr-related-card:hover p{ color:var(--dgr1-white); } /* ========================================================================== 37. NEXT ARTICLE ========================================================================== */ .dgr1-article .dgr-next{ margin-top:96px; padding:42px 0; background:transparent; border:0; border-top:1px solid var(--dgr1-black); border-bottom:1px solid var(--dgr1-black); text-align:left; } .dgr1-article .dgr-next-label{ color:var(--dgr1-grey-500); font-family:var(--dgr1-font-mono); font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; } .dgr1-article .dgr-next-title{ color:var(--dgr1-black); font-family:var(--dgr1-font-editorial); font-size:clamp(1.8rem,4vw,3rem); font-weight:400; letter-spacing:-.035em; } /* ========================================================================== 38. TAGS ========================================================================== */ .dgr1-article .dgr-tags{ margin-top:44px; gap:8px; } .dgr1-article .dgr-tag{ padding:7px 10px; border:1px solid var(--dgr1-grey-300); border-radius:0; background:var(--dgr1-white); color:var(--dgr1-grey-700); font-family:var(--dgr1-font-mono); font-size:.61rem; letter-spacing:.04em; } /* ========================================================================== 39. FOOTER ========================================================================== */ .dgr1-article .dgr-footer{ margin-top:120px; padding-top:42px; border-top:2px solid var(--dgr1-black); text-align:left; } .dgr1-article .dgr-footer-publication{ color:var(--dgr1-black); font-family:var(--dgr1-font-ui); font-size:.70rem; letter-spacing:.20em; } .dgr1-article .dgr-footer-tagline{ max-width:620px; margin:0 0 18px; color:var(--dgr1-grey-700); } .dgr1-article .dgr-footer-meta, .dgr1-article .dgr-copyright{ color:var(--dgr1-grey-500); font-family:var(--dgr1-font-ui); font-size:.70rem; } /* ========================================================================== 40. END MARK ========================================================================== */ .dgr1-article .dgr-endmark{ width:42px; height:3px; margin:76px 0 0; background:var(--dgr1-black); } /* ========================================================================== 41. READING TIME ========================================================================== */ .dgr1-article .dgr-reading-time{ color:var(--dgr1-grey-500); font-family:var(--dgr1-font-mono); font-size:.66rem; letter-spacing:.06em; } .dgr1-article .dgr-reading-time::before{ content:""; } /* ========================================================================== 42. INLINE EMPHASIS ========================================================================== */ .dgr1-article .dgr-highlight{ color:var(--dgr1-black); font-weight:700; } .dgr1-article .dgr-accent{ color:var(--dgr1-accent-dark); } /* ========================================================================== 43. BLOCKQUOTE ========================================================================== */ .dgr1-article blockquote{ margin:64px 0; padding:28px 0 28px 30px; border-left:2px solid var(--dgr1-black); color:var(--dgr1-black); font-family:var(--dgr1-font-editorial); font-size:1.35rem; line-height:1.55; } /* ========================================================================== 44. LISTS ========================================================================== */ .dgr1-article ul, .dgr1-article ol{ margin:32px 0 40px; padding-left:1.35rem; } .dgr1-article li{ margin-bottom:.9rem; padding-left:.2rem; } .dgr1-article li::marker{ color:var(--dgr1-black); } /* ========================================================================== 45. HORIZONTAL RULE ========================================================================== */ .dgr1-article hr{ margin:88px 0; border:0; border-top:1px solid var(--dgr1-black); } /* ========================================================================== 46. SOURCE LINK ========================================================================== */ .dgr1-article .dgr-source{ margin-top:18px; color:var(--dgr1-grey-500); font-family:var(--dgr1-font-ui); font-size:.72rem; line-height:1.6; } .dgr1-article .dgr-source a{ color:var(--dgr1-black); } /* ========================================================================== 47. ARTICLE-SPECIFIC PROGRESSION MARKERS ========================================================================== */ /* The seven articles share one system but each receives a subtle conceptual accent. The accent is not a second colour palette. It is a tiny editorial signal used for section markers, selected SVG highlights or the article number. 01 Capability = muted stone 02 Delegation = muted olive 03 Execution = muted bronze 04 Labour = muted mauve 05 Physical = muted graphite-blue 06 Control = muted umber 07 Capital = muted copper These are intentionally close to grey and remain subordinate to black. */ .dgr1-article-01{ --dgr1-article-accent:#77736c; } .dgr1-article-02{ --dgr1-article-accent:#77786d; } .dgr1-article-03{ --dgr1-article-accent:#806f5c; } .dgr1-article-04{ --dgr1-article-accent:#786d70; } .dgr1-article-05{ --dgr1-article-accent:#667078; } .dgr1-article-06{ --dgr1-article-accent:#70685e; } .dgr1-article-07{ --dgr1-article-accent:#856f5b; } .dgr1-article [class*="section-number"]{ color:var(--dgr1-article-accent,var(--dgr1-accent)); } /* ========================================================================== 48. ARTICLE NUMBER SIGNATURE ========================================================================== */ .dgr1-article-01::before, .dgr1-article-02::before, .dgr1-article-03::before, .dgr1-article-04::before, .dgr1-article-05::before, .dgr1-article-06::before, .dgr1-article-07::before{ position:absolute; top:24px; right:28px; color:var(--dgr1-grey-300); font-family:var(--dgr1-font-mono); font-size:.62rem; letter-spacing:.08em; } .dgr1-article-01::before{content:"01 / 07";} .dgr1-article-02::before{content:"02 / 07";} .dgr1-article-03::before{content:"03 / 07";} .dgr1-article-04::before{content:"04 / 07";} .dgr1-article-05::before{content:"05 / 07";} .dgr1-article-06::before{content:"06 / 07";} .dgr1-article-07::before{content:"07 / 07";} /* ========================================================================== 49. ARTICLE-SPECIFIC VISUAL ACCENTS ========================================================================== */ .dgr1-article-01 .dgr-svg-highlight, .dgr1-article-01 .dgr-section-number{ color:var(--dgr1-article-accent); } .dgr1-article-02 .dgr-svg-highlight, .dgr1-article-02 .dgr-section-number{ color:var(--dgr1-article-accent); } .dgr1-article-03 .dgr-svg-highlight, .dgr1-article-03 .dgr-section-number{ color:var(--dgr1-article-accent); } .dgr1-article-04 .dgr-svg-highlight, .dgr1-article-04 .dgr-section-number{ color:var(--dgr1-article-accent); } .dgr1-article-05 .dgr-svg-highlight, .dgr1-article-05 .dgr-section-number{ color:var(--dgr1-article-accent); } .dgr1-article-06 .dgr-svg-highlight, .dgr1-article-06 .dgr-section-number{ color:var(--dgr1-article-accent); } .dgr1-article-07 .dgr-svg-highlight, .dgr1-article-07 .dgr-section-number{ color:var(--dgr1-article-accent); } /* ========================================================================== 50. ACCESSIBILITY ========================================================================== */ .dgr1-article a:focus-visible{ outline:2px solid var(--dgr1-black); outline-offset:4px; } .dgr1-article ::selection{ background:var(--dgr1-black); color:var(--dgr1-white); } /* ========================================================================== 51. MOBILE ========================================================================== */ @media (max-width:768px){ .dgr1-article{ width:calc(100% - 20px); margin:20px auto 48px; padding:28px 20px; } .dgr1-article .dgr-title{ font-size:clamp( 3rem, 15vw, 4.8rem ); max-width:100%; } .dgr1-article .dgr-subtitle{ font-size:1.18rem; } .dgr1-article .dgr-body p{ font-size:1.05rem; line-height:1.82; } .dgr1-article .dgr-body>section, .dgr1-article .dgr-section{ margin-bottom:76px; } .dgr1-article .dgr-hero-image, .dgr1-article .dgr-figure:first-of-type{ width:calc(100% + 40px); margin-left:-20px; margin-top:52px; margin-bottom:58px; } .dgr1-article .dgr-editorial-svg svg{ padding:14px; } .dgr1-framework{ margin-left:-20px; margin-right:-20px; padding:42px 20px; } .dgr1-article .dgr-comparison{ grid-template-columns:1fr; } .dgr1-article .dgr-comparison-column{ border-right:0; border-bottom:1px solid var(--dgr1-border); } .dgr1-article .dgr-comparison-column:last-child{ border-bottom:0; } .dgr1-article .dgr-related-grid{ grid-template-columns:1fr; } .dgr1-article .dgr-related-card{ border-right:0; border-bottom:1px solid var(--dgr1-border); } .dgr1-article .dgr-related-card:last-child{ border-bottom:0; } .dgr1-article .dgr-meta{ display:grid; gap:10px; } .dgr1-article .dgr-meta-item{ padding:0; margin:0; border:0; } .dgr1-article .dgr-question{ padding:42px 0; } .dgr1-article .dgr-highlight-box{ padding:34px 24px; } } /* ========================================================================== 52. REDUCED MOTION ========================================================================== */ @media (prefers-reduced-motion:reduce){ .dgr1-article *, .dgr1-article *::before, .dgr1-article *::after{ scroll-behavior:auto !important; transition:none !important; animation:none !important; } } /* ========================================================= DGR1 SOURCE / CTA / FOOTER ========================================================= */ .dgr1-source { margin-top: 88px; padding-top: 42px; padding-bottom: 56px; border-top: 1px solid #d5d5d5; } .dgr1-source-label { margin: 0 0 24px 0; color: #111111; font-family: Inter, Arial, sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 0.18em; line-height: 1.2; text-transform: uppercase; } .dgr1-source-label::after { content: ""; display: block; width: 46px; height: 1px; margin-top: 14px; background: #111111; } .dgr1-source-description { max-width: 720px; margin: 0 0 30px 0; color: #333333; font-family: Georgia, "Times New Roman", serif; font-size: 19px; font-weight: 400; line-height: 1.65; } /* ========================================================= CTA ========================================================= */ .dgr1-source-cta { display: inline-flex; align-items: center; justify-content: space-between; gap: 34px; min-width: 300px; min-height: 58px; box-sizing: border-box; padding: 0 22px 0 24px; background: #111111; border: 1px solid #111111; color: #ffffff !important; text-decoration: none !important; font-family: Inter, Arial, sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 0.15em; line-height: 1; text-transform: uppercase; transition: background-color 220ms ease, border-color 220ms ease, color 220ms ease; } .dgr1-source-cta:hover { background: #b18a3a; border-color: #b18a3a; color: #ffffff !important; text-decoration: none !important; } .dgr1-source-cta:focus-visible { outline: 2px solid #111111; outline-offset: 4px; } .dgr1-source-cta-arrow { font-family: Arial, sans-serif; font-size: 20px; font-weight: 300; line-height: 1; transition: transform 220ms ease; } .dgr1-source-cta:hover .dgr1-source-cta-arrow { transform: translateX(5px); } /* ========================================================= FOOTER ========================================================= */ .dgr1-footer { margin-top: 0; padding-top: 30px; padding-bottom: 60px; border-top: 1px solid #d5d5d5; } .dgr1-footer-publication { margin: 0; color: #111111; font-family: Inter, Arial, sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 0.16em; line-height: 1.4; text-transform: uppercase; } .dgr1-footer-series { margin: 10px 0 0 0; color: #777777; font-family: Inter, Arial, sans-serif; font-size: 11px; font-weight: 400; letter-spacing: 0.08em; line-height: 1.5; } .dgr1-endmark { display: none; } /* ========================================================================== END ========================================================================== */ /* ========================================================================== 53. FINAL EDITORIAL REFINEMENT ========================================================================== Final locked treatment for Articles 1–7, excluding the article-specific framework. The framework remains controlled independently by each article. ========================================================================== */ /* -------------------------------------------------------------------------- Editorial canvas -------------------------------------------------------------------------- */ .dgr1-article{ width:min(calc(100% - 32px), 1180px); margin:32px auto 64px; padding:clamp(28px,5vw,72px); background:#ffffff; border:0; box-shadow:none; } /* -------------------------------------------------------------------------- Header: remove redundant machine-like numbering and keep the hierarchy -------------------------------------------------------------------------- */ .dgr1-article::before{ content:none !important; } .dgr1-article .dgr-series{ margin-bottom:14px; } .dgr1-article .dgr-header{ margin-bottom:52px; } .dgr1-article .dgr-title{ max-width:11ch; } .dgr1-article .dgr-title::after{ width:42px; height:2px; margin-top:28px; } .dgr1-article .dgr-subtitle{ margin:24px 0 30px; } /* -------------------------------------------------------------------------- Remove section numbering and decorative opening markers. The argument itself provides the hierarchy. -------------------------------------------------------------------------- */ .dgr1-article .dgr-section-number, .dgr1-article .dgr1-section-index, .dgr1-article .dgr1-opening-marker{ display:none !important; } /* -------------------------------------------------------------------------- Metadata -------------------------------------------------------------------------- */ .dgr1-article .dgr-meta{ margin-top:26px; padding-top:15px; } /* -------------------------------------------------------------------------- Hero -------------------------------------------------------------------------- */ .dgr1-article .dgr-hero-image, .dgr1-article .dgr-figure:first-of-type{ width:calc(100% + clamp(32px,8vw,112px)); margin-top:60px; margin-bottom:56px; margin-left:calc(clamp(32px,4vw,56px) * -1); } .dgr1-article .dgr-hero-caption, .dgr1-article .dgr-caption{ max-width:760px; margin:12px auto 0; color:#777777; font-family:var(--dgr1-font-ui); font-size:.70rem; line-height:1.58; } /* -------------------------------------------------------------------------- Opening argument -------------------------------------------------------------------------- */ .dgr1-article .dgr-intro{ max-width:820px; margin:58px auto 70px; padding-top:0; } .dgr1-article .dgr-lead{ max-width:820px; margin:0 0 24px; font-size:clamp(1.55rem,2.7vw,2.05rem); line-height:1.46; } .dgr1-article .dgr-standfirst{ max-width:720px; font-size:1.06rem; line-height:1.78; } /* -------------------------------------------------------------------------- Body width and paragraph rhythm -------------------------------------------------------------------------- */ .dgr1-article .dgr-body{ max-width:860px; margin-inline:auto; } .dgr1-article .dgr-body p{ margin-top:0; margin-bottom:21px; font-size:1.10rem; line-height:1.80; } .dgr1-article .dgr-body p:last-child{ margin-bottom:0; } /* -------------------------------------------------------------------------- Sections -------------------------------------------------------------------------- */ .dgr1-article .dgr-body>section, .dgr1-article .dgr-section{ margin-bottom:68px; scroll-margin-top:72px; } .dgr1-article .dgr-section-title, .dgr1-article h2{ max-width:780px; margin:0 0 24px; padding-top:17px; border-top:1px solid #111111; font-size:clamp(1.95rem,3.5vw,3.15rem); line-height:1.04; letter-spacing:-.035em; } .dgr1-article h3{ margin-top:38px; margin-bottom:13px; font-size:1.45rem; line-height:1.18; } .dgr1-article .dgr-section-intro{ max-width:700px; margin-bottom:28px; font-size:1.08rem; line-height:1.72; } /* -------------------------------------------------------------------------- Editorial emphasis: use one quiet insight treatment rather than many cards -------------------------------------------------------------------------- */ .dgr1-article .dgr-pullquote{ max-width:760px; margin:68px auto; padding:28px 0 28px 30px; border-left:2px solid #111111; } .dgr1-article .dgr-pullquote blockquote{ font-size:clamp(1.55rem,2.8vw,2.20rem); line-height:1.38; } /* -------------------------------------------------------------------------- Generic cards become quiet editorial plates -------------------------------------------------------------------------- */ .dgr1-article .dgr-card{ margin:58px 0; padding:28px 0 30px; border-top:1px solid #111111; border-bottom:1px solid #d8d8d8; background:transparent; } .dgr1-article .dgr-card-title{ font-size:1.65rem; } /* -------------------------------------------------------------------------- Process / comparison / timeline / stats Keep their existing structures but reduce excessive vertical separation. -------------------------------------------------------------------------- */ .dgr1-article .dgr-process, .dgr1-article .dgr-comparison, .dgr1-article .dgr-timeline, .dgr1-article .dgr-stat, .dgr1-article .dgr-table, .dgr1-article .dgr-data-table{ margin-top:58px; margin-bottom:58px; } .dgr1-article .dgr-question, .dgr1-article .dgr-summary, .dgr1-article .dgr-evidence-base, .dgr1-article .dgr-series-footer, .dgr1-article .dgr-next{ margin-top:64px; margin-bottom:64px; } /* -------------------------------------------------------------------------- Conclusion: final intellectual movement -------------------------------------------------------------------------- */ .dgr1-article .dgr-conclusion{ max-width:860px; margin:88px auto 0; padding-top:34px; border-top:2px solid #111111; } .dgr1-article .dgr-conclusion h2{ max-width:820px; margin:0 0 30px; padding:0; border:0; font-size:clamp(2.25rem,4.3vw,4rem); line-height:1.03; letter-spacing:-.04em; } .dgr1-article .dgr-conclusion p{ max-width:820px; } /* -------------------------------------------------------------------------- Source: quiet editorial exit with a clearly differentiated CTA -------------------------------------------------------------------------- */ .dgr1-article .dgr-source-section, .dgr1-article .dgr1-source{ margin:68px auto 0; padding:32px 0 40px; border-top:1px solid #111111; } .dgr1-article .dgr1-source-label{ margin:0 0 20px; color:#111111; font-family:var(--dgr1-font-ui); font-size:10px; font-weight:700; letter-spacing:.18em; line-height:1.2; text-transform:uppercase; } .dgr1-article .dgr1-source-label::after{ content:""; display:block; width:36px; height:1px; margin-top:11px; background:#111111; } .dgr1-article .dgr1-source-description, .dgr1-article .dgr-source-section p{ max-width:700px; margin:0 0 22px; color:#444444; font-family:var(--dgr1-font-editorial); font-size:1rem; line-height:1.65; } .dgr1-article .dgr1-source-cta{ display:inline-flex; align-items:center; gap:16px; min-width:0; min-height:0; padding:10px 0 8px; background:transparent; border:0; border-bottom:1px solid #111111; color:#111111 !important; text-decoration:none !important; font-family:var(--dgr1-font-ui); font-size:10px; font-weight:700; letter-spacing:.14em; line-height:1.2; text-transform:uppercase; transition:color 180ms ease,border-color 180ms ease; } .dgr1-article .dgr1-source-cta:hover{ background:transparent; border-color:#8b7561; color:#8b7561 !important; } .dgr1-article .dgr1-source-cta-arrow{ font-family:Arial,sans-serif; font-size:16px; font-weight:400; line-height:1; transition:transform 180ms ease; } .dgr1-article .dgr1-source-cta:hover .dgr1-source-cta-arrow{ transform:translate(3px,-2px); } /* -------------------------------------------------------------------------- Footer / publication colophon -------------------------------------------------------------------------- */ .dgr1-article .dgr-article-footer, .dgr1-article .dgr1-footer{ margin-top:0; padding:22px 0 42px; border-top:1px solid #d5d5d5; text-align:left; } .dgr1-article .dgr1-footer-publication{ display:inline; margin:0; color:#111111; font-family:var(--dgr1-font-ui); font-size:10px; font-weight:700; letter-spacing:.15em; line-height:1.4; text-transform:uppercase; } .dgr1-article .dgr1-footer-series{ display:inline; margin:0 0 0 9px; color:#777777; font-family:var(--dgr1-font-ui); font-size:10px; font-weight:400; letter-spacing:.08em; line-height:1.4; text-transform:uppercase; } .dgr1-article .dgr1-footer-series::before{ content:"•"; margin-right:9px; color:#b5b5b5; } .dgr1-article .dgr1-endmark{ display:none; } /* -------------------------------------------------------------------------- Remove visual duplication from the old footer/source implementation -------------------------------------------------------------------------- */ .dgr1-article .dgr-source{ margin-top:0; } .dgr1-article .dgr-footer{ margin-top:0; padding-top:22px; border-top:1px solid #d5d5d5; } /* -------------------------------------------------------------------------- Tags: quiet metadata, not visual chips -------------------------------------------------------------------------- */ .dgr1-article .dgr-tags{ margin-top:36px; } .dgr1-article .dgr-tag{ padding:5px 8px; border:1px solid #d8d8d8; background:#ffffff; color:#777777; } /* -------------------------------------------------------------------------- Links -------------------------------------------------------------------------- */ .dgr1-article a{ transition:color 180ms ease,border-color 180ms ease; } /* -------------------------------------------------------------------------- Mobile refinement -------------------------------------------------------------------------- */ @media (max-width:768px){ .dgr1-article{ width:calc(100% - 20px); margin:20px auto 44px; padding:26px 20px; } .dgr1-article .dgr-header{ margin-bottom:40px; } .dgr1-article .dgr-title{ font-size:clamp(3rem,15vw,4.8rem); max-width:100%; } .dgr1-article .dgr-hero-image, .dgr1-article .dgr-figure:first-of-type{ width:calc(100% + 40px); margin-left:-20px; margin-top:44px; margin-bottom:46px; } .dgr1-article .dgr-intro{ margin-top:44px; margin-bottom:54px; } .dgr1-article .dgr-body>section, .dgr1-article .dgr-section{ margin-bottom:56px; } .dgr1-article .dgr-conclusion{ margin-top:68px; padding-top:28px; } .dgr1-article .dgr1-source, .dgr1-article .dgr-source-section{ margin-top:54px; padding-top:26px; padding-bottom:32px; } .dgr1-article .dgr1-source-cta{ width:auto; } .dgr1-article .dgr1-footer-series{ display:block; margin:7px 0 0; } .dgr1-article .dgr1-footer-series::before{ display:none; } } /* ========================================================================== 53. NEXT ARTICLE ========================================================================== */ .dgr1-next-article{ margin:72px 0 0; padding:38px 0 42px; background:transparent; border-top:1px solid var(--dgr1-black); border-bottom:1px solid var(--dgr1-grey-200); } .dgr1-next-article-label{ margin:0 0 24px; color:var(--dgr1-grey-500); font-family:var(--dgr1-font-mono); font-size:.62rem; font-weight:500; letter-spacing:.16em; line-height:1.3; text-transform:uppercase; } .dgr1-next-article-number{ margin:0 0 10px; color:var(--dgr1-grey-500); font-family:var(--dgr1-font-mono); font-size:.66rem; letter-spacing:.08em; } .dgr1-next-article-title{ max-width:760px; margin:0 0 18px; color:var(--dgr1-black); font-family:var(--dgr1-font-editorial); font-size:clamp(2rem,4vw,3.15rem); font-weight:400; line-height:1.05; letter-spacing:-.035em; } .dgr1-next-article-description{ max-width:700px; margin:0 0 26px; color:var(--dgr1-grey-700); font-family:var(--dgr1-font-editorial); font-size:1rem; line-height:1.68; } .dgr1-next-article-link{ display:inline-flex; align-items:center; gap:12px; padding:8px 0 7px; border-bottom:1px solid var(--dgr1-black); color:var(--dgr1-black) !important; font-family:var(--dgr1-font-ui); font-size:10px; font-weight:700; letter-spacing:.14em; line-height:1.2; text-decoration:none !important; text-transform:uppercase; transition: color var(--dgr1-transition), border-color var(--dgr1-transition); } .dgr1-next-article-arrow{ font-family:Arial,sans-serif; font-size:16px; font-weight:400; line-height:1; transition:transform var(--dgr1-transition); } .dgr1-next-article-link:hover{ color:var(--dgr1-accent-dark) !important; border-color:var(--dgr1-accent-dark); } .dgr1-next-article-link:hover .dgr1-next-article-arrow{ transform:translate(4px,-2px); } /* -------------------------------------------------------------------------- Final article / series completion -------------------------------------------------------------------------- */ .dgr1-next-article-complete{ border-bottom:1px solid var(--dgr1-black); } /* -------------------------------------------------------------------------- Mobile -------------------------------------------------------------------------- */ @media (max-width:768px){ .dgr1-next-article{ margin-top:56px; padding:32px 0 36px; } .dgr1-next-article-label{ margin-bottom:20px; } .dgr1-next-article-title{ font-size:2rem; line-height:1.08; } .dgr1-next-article-description{ font-size:.98rem; line-height:1.65; } } /* ========================================================================== END OF FINAL REFINEMENT ========================================================================== */