:root { --dr-bg: #071019;
--dr-bg-alt: #0b1622;
--dr-bg-soft: #0f1d2c;
--dr-panel: rgba(14, 24, 37, 0.92);
--dr-panel-strong: rgba(10, 18, 28, 0.96);
--dr-surface: rgba(255, 255, 255, 0.04);
--dr-surface-2: rgba(255, 255, 255, 0.06);
--dr-border: rgba(124, 234, 255, 0.12);
--dr-border-soft: rgba(255, 255, 255, 0.08); --dr-cyan: #7ceaff;
--dr-cyan-2: #57d8ff;
--dr-gold: #c6a768;
--dr-gold-2: #dfc07e;
--dr-red: #ff7a7a;
--dr-green: #77d6a4; --dr-text: #ecf5fb;
--dr-text-soft: #c9d7e3;
--dr-text-muted: #8fa4b7;
--dr-text-faint: #6f8293; --dr-font-display: "Playfair Display", serif;
--dr-font-ui: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
--dr-font-mono: "DM Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --dr-container: 1200px;
--dr-container-wide: 1360px;
--dr-reading: 74ch;
--dr-radius-xs: 10px;
--dr-radius-sm: 14px;
--dr-radius-md: 20px;
--dr-radius-lg: 28px;
--dr-radius-xl: 36px; --dr-space-1: 0.25rem;
--dr-space-2: 0.5rem;
--dr-space-3: 0.75rem;
--dr-space-4: 1rem;
--dr-space-5: 1.25rem;
--dr-space-6: 1.5rem;
--dr-space-7: 2rem;
--dr-space-8: 2.5rem;
--dr-space-9: 3rem;
--dr-space-10: 4rem;
--dr-space-11: 5rem;
--dr-space-12: 6rem; --dr-shadow-sm: 0 10px 30px rgba(0, 0, 0, 0.18);
--dr-shadow-md: 0 18px 50px rgba(0, 0, 0, 0.24);
--dr-shadow-lg: 0 25px 80px rgba(0, 0, 0, 0.32);
--dr-glow-cyan: 0 0 0 1px rgba(124, 234, 255, 0.16), 0 0 30px rgba(124, 234, 255, 0.08);
--dr-glow-gold: 0 0 0 1px rgba(198, 167, 104, 0.18), 0 0 30px rgba(198, 167, 104, 0.08); --dr-ease: cubic-bezier(.22, .61, .36, 1);
--dr-speed-fast: 180ms;
--dr-speed-base: 280ms;
--dr-speed-slow: 480ms; --dr-accent: var(--dr-cyan);
--dr-accent-2: var(--dr-gold);
--dr-page-glow: rgba(124, 234, 255, 0.08);
} html {
scroll-behavior: smooth;
}
body {
background:
radial-gradient(circle at top, rgba(124, 234, 255, 0.06), transparent 30%),
linear-gradient(180deg, #071019 0%, #0b1622 100%);
color: var(--dr-text);
font-family: var(--dr-font-ui);
line-height: 1.65;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
}
body.admin-bar {
scroll-padding-top: 40px;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
img,
svg,
video {
max-width: 100%;
height: auto;
display: block;
}
a {
color: var(--dr-accent);
text-decoration: none;
transition: color var(--dr-speed-fast) var(--dr-ease), opacity var(--dr-speed-fast) var(--dr-ease);
}
a:hover,
a:focus-visible {
color: var(--dr-accent-2);
}
::selection {
background: rgba(124, 234, 255, 0.18);
color: #fff;
} .wp-site-blocks,
.wp-block-group,
main.wp-block-group {
position: relative;
}
main.wp-block-group {
width: 100%;
}
.wp-block-post-content {
width: 100%;
}
.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
max-width: var(--dr-container);
}
.alignfull {
width: 100%;
max-width: 100%;
}
.wp-block-image img {
border-radius: var(--dr-radius-md);
}
.wp-block-separator {
border-color: rgba(255,255,255,0.08);
} h1, h2, h3, h4, h5, h6 {
margin: 0 0 var(--dr-space-4);
color: #f6fbff;
line-height: 1.14;
letter-spacing: -0.02em;
}
h1 {
font-family: var(--dr-font-display);
font-size: clamp(2.4rem, 5vw, 4.8rem);
font-weight: 800;
}
h2 {
font-family: var(--dr-font-display);
font-size: clamp(1.85rem, 3vw, 3rem);
font-weight: 700;
}
h3 {
font-size: clamp(1.3rem, 2vw, 1.8rem);
font-weight: 700;
}
h4 {
font-size: 1.1rem;
font-weight: 700;
}
p,
ul,
ol,
blockquote {
margin: 0 0 var(--dr-space-5);
}
p,
li {
color: var(--dr-text-soft);
}
ul,
ol {
padding-left: 1.25rem;
}
small,
.dr-small {
font-size: 0.875rem;
color: var(--dr-text-muted);
}
.dr-kicker {
display: inline-flex;
align-items: center;
gap: 0.45rem;
font-size: 0.78rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.16em;
color: var(--dr-accent);
margin-bottom: var(--dr-space-4);
}
.dr-lead {
font-size: clamp(1.05rem, 1.45vw, 1.22rem);
color: var(--dr-text);
max-width: var(--dr-reading);
}
.dr-muted {
color: var(--dr-text-muted);
}
.dr-faint {
color: var(--dr-text-faint);
}
.dr-mono {
font-family: var(--dr-font-mono);
} .dr-container {
width: min(100% - 2rem, var(--dr-container));
margin-inline: auto;
}
.dr-container-wide {
width: min(100% - 2rem, var(--dr-container-wide));
margin-inline: auto;
}
.dr-reading {
width: min(100%, var(--dr-reading));
}
.dr-section {
position: relative;
padding-block: clamp(3rem, 6vw, 6rem);
}
.dr-section-tight {
padding-block: clamp(2rem, 4vw, 3.25rem);
}
.dr-grid-2 {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--dr-space-7);
}
.dr-grid-3 {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--dr-space-6);
}
.dr-stack > * + * {
margin-top: var(--dr-space-5);
}
.dr-flex {
display: flex;
gap: var(--dr-space-4);
}
.dr-flex-wrap {
display: flex;
flex-wrap: wrap;
gap: var(--dr-space-4);
} .dr-card,
.dr-panel,
.dr-surface {
position: relative;
background: linear-gradient(180deg, rgba(18, 30, 46, 0.88), rgba(11, 20, 31, 0.94));
border: 1px solid var(--dr-border-soft);
border-radius: var(--dr-radius-md);
box-shadow: var(--dr-shadow-sm);
backdrop-filter: blur(14px);
}
.dr-card {
padding: clamp(1rem, 2vw, 1.4rem);
}
.dr-panel {
padding: clamp(1.2rem, 2vw, 1.8rem);
}
.dr-card:hover,
.dr-panel:hover {
border-color: var(--dr-border);
transform: translateY(-2px);
transition: transform var(--dr-speed-base) var(--dr-ease),
border-color var(--dr-speed-base) var(--dr-ease),
box-shadow var(--dr-speed-base) var(--dr-ease);
}
.dr-outline {
border: 1px solid var(--dr-border);
}
.dr-glow-cyan {
box-shadow: var(--dr-shadow-md), var(--dr-glow-cyan);
}
.dr-glow-gold {
box-shadow: var(--dr-shadow-md), var(--dr-glow-gold);
} .dr-btn,
.wp-element-button,
.wp-block-button__link {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.55rem;
min-height: 46px;
padding: 0.8rem 1.1rem;
border-radius: 999px;
border: 1px solid rgba(124, 234, 255, 0.18);
background: linear-gradient(180deg, rgba(124, 234, 255, 0.12), rgba(124, 234, 255, 0.06));
color: #f6fbff;
font-weight: 600;
line-height: 1;
box-shadow: var(--dr-shadow-sm);
transition: transform var(--dr-speed-fast) var(--dr-ease),
border-color var(--dr-speed-fast) var(--dr-ease),
background var(--dr-speed-fast) var(--dr-ease);
}
.dr-btn:hover,
.wp-element-button:hover,
.wp-block-button__link:hover {
transform: translateY(-1px);
border-color: rgba(124, 234, 255, 0.34);
background: linear-gradient(180deg, rgba(124, 234, 255, 0.18), rgba(124, 234, 255, 0.08));
}
.dr-btn--gold {
border-color: rgba(198, 167, 104, 0.22);
background: linear-gradient(180deg, rgba(198, 167, 104, 0.16), rgba(198, 167, 104, 0.08));
}
.dr-chip {
display: inline-flex;
align-items: center;
gap: 0.4rem;
min-height: 32px;
padding: 0.35rem 0.75rem;
border-radius: 999px;
border: 1px solid var(--dr-border-soft);
background: rgba(255,255,255,0.03);
color: var(--dr-text-soft);
font-size: 0.78rem;
font-weight: 600;
} .dr-learning-box,
.dr-explainer,
.dr-system-box,
.dr-why-it-matters {
padding: clamp(1rem, 2vw, 1.5rem);
border-radius: var(--dr-radius-md);
background: linear-gradient(180deg, rgba(10, 22, 34, 0.96), rgba(9, 17, 27, 0.96));
border: 1px solid rgba(124, 234, 255, 0.14);
box-shadow: var(--dr-shadow-sm);
}
.dr-learning-box > :last-child,
.dr-explainer > :last-child,
.dr-system-box > :last-child,
.dr-why-it-matters > :last-child {
margin-bottom: 0;
}
.dr-learning-label {
display: inline-block;
margin-bottom: var(--dr-space-3);
color: var(--dr-gold);
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.dr-glossary-term {
color: #fff;
font-weight: 700;
}
.dr-compare-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--dr-space-5);
} .dr-cta {
padding: clamp(1.4rem, 2.5vw, 2rem);
border-radius: var(--dr-radius-lg);
background:
radial-gradient(circle at top right, rgba(124, 234, 255, 0.1), transparent 34%),
linear-gradient(180deg, rgba(11, 22, 34, 0.98), rgba(8, 14, 22, 0.98));
border: 1px solid rgba(124, 234, 255, 0.15);
box-shadow: var(--dr-shadow-md);
}
.dr-cta h2,
.dr-cta h3 {
margin-bottom: var(--dr-space-3);
}
.dr-trust-row {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
margin-top: var(--dr-space-4);
} .dr-reveal {
opacity: 0;
transform: translateY(24px);
transition:
opacity var(--dr-speed-slow) var(--dr-ease),
transform var(--dr-speed-slow) var(--dr-ease);
will-change: opacity, transform;
}
.dr-reveal.is-visible {
opacity: 1;
transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
.dr-reveal {
opacity: 1;
transform: none;
transition: none;
}
.dr-card:hover,
.dr-panel:hover,
.dr-btn:hover {
transform: none;
}
html {
scroll-behavior: auto;
}
} body.dr-family-brand {
--dr-accent: var(--dr-cyan);
--dr-accent-2: var(--dr-gold);
}
body.dr-family-theme {
--dr-accent: var(--dr-cyan);
--dr-accent-2: var(--dr-gold);
}
body.dr-family-service {
--dr-accent: var(--dr-gold);
--dr-accent-2: var(--dr-cyan);
}
body.dr-family-post {
--dr-accent: var(--dr-cyan);
--dr-accent-2: var(--dr-gold);
} body.dr-cluster-culture {
--dr-accent: #d7b06a;
--dr-accent-2: #7ceaff;
--dr-page-glow: rgba(215, 176, 106, 0.08);
}
body.dr-cluster-culture .dr-kicker,
body.dr-cluster-culture a {
color: #d7b06a;
}
body.dr-cluster-cyber {
--dr-accent: #7ceaff;
--dr-accent-2: #a8c7ff;
--dr-page-glow: rgba(124, 234, 255, 0.1);
}
body.dr-cluster-systems {
--dr-accent: #9bd0ff;
--dr-accent-2: #c6a768;
--dr-page-glow: rgba(155, 208, 255, 0.08);
}
body.dr-cluster-philosophy {
--dr-accent: #d9bb8a;
--dr-accent-2: #f4d7a1;
--dr-page-glow: rgba(217, 187, 138, 0.08);
}
body.dr-cluster-health {
--dr-accent: #77d6a4;
--dr-accent-2: #7ceaff;
--dr-page-glow: rgba(119, 214, 164, 0.08);
}
body.dr-cluster-lifestyle {
--dr-accent: #ffb28c;
--dr-accent-2: #ffd27e;
--dr-page-glow: rgba(255, 178, 140, 0.08);
}
body.dr-cluster-education {
--dr-accent: #9ad8ff;
--dr-accent-2: #ffd27e;
--dr-page-glow: rgba(154, 216, 255, 0.08);
} body.dr-family-post .wp-block-post-content,
body.dr-family-page .wp-block-post-content {
width: min(100% - 2rem, var(--dr-container));
margin-inline: auto;
}
body.dr-family-post .wp-block-post-content > * {
max-width: var(--dr-reading);
}
body.dr-family-post .wp-block-post-content > .alignwide,
body.dr-family-post .wp-block-post-content > .alignfull {
max-width: 100%;
}
body.dr-family-post .wp-block-post-content blockquote {
padding: 1rem 1.2rem;
border-left: 3px solid var(--dr-accent);
background: rgba(255,255,255,0.03);
border-radius: 0 var(--dr-radius-sm) var(--dr-radius-sm) 0;
}
body.dr-family-post .wp-block-post-content code {
font-family: var(--dr-font-mono);
padding: 0.15rem 0.4rem;
border-radius: 8px;
background: rgba(255,255,255,0.06);
color: #fff;
} header,
footer {
position: relative;
z-index: 20;
}
footer {
border-top: 1px solid rgba(255,255,255,0.06);
background: rgba(7, 16, 25, 0.7);
backdrop-filter: blur(12px);
} @media (max-width: 980px) {
.dr-grid-2,
.dr-grid-3,
.dr-compare-grid {
grid-template-columns: 1fr;
}
.dr-section {
padding-block: clamp(2.4rem, 8vw, 4.2rem);
}
}
@media (max-width: 640px) {
.dr-container,
.dr-container-wide {
width: min(100% - 1.1rem, var(--dr-container));
}
.dr-card,
.dr-panel,
.dr-cta,
.dr-learning-box,
.dr-explainer,
.dr-system-box,
.dr-why-it-matters {
padding: 1rem;
}
.dr-btn,
.wp-element-button,
.wp-block-button__link {
width: 100%;
}
}.dr-progress-spine {
position: fixed;
left: 0;
top: 0;
width: 3px;
height: 100svh;
background: rgba(255, 255, 255, 0.04);
z-index: 800;
pointer-events: none;
}
.dr-progress-fill {
width: 100%;
height: 0%;
background: linear-gradient(
180deg,
var(--dr-accent-2) 0%,
var(--dr-accent) 100%
);
transition: height 80ms linear;
box-shadow:
0 0 10px color-mix(in srgb, var(--dr-accent-2) 70%, transparent),
0 0 28px color-mix(in srgb, var(--dr-accent) 40%, transparent);
} .dr-section-nav {
position: fixed;
right: 0.55rem;
top: 50%;
transform: translateY(-50%);
display: none;
flex-direction: column;
gap: 10px;
z-index: 800;
pointer-events: auto;
}
.dr-section-dot {
width: 7px;
height: 7px;
border-radius: 999px;
background: var(--dr-text-faint);
border: 1px solid transparent;
cursor: pointer;
transition:
width var(--dr-speed-base) var(--dr-ease-out),
height var(--dr-speed-base) var(--dr-ease-out),
background var(--dr-speed-base) var(--dr-ease-out),
box-shadow var(--dr-speed-base) var(--dr-ease-out);
position: relative;
}
.dr-section-dot::after {
content: attr(data-label);
position: absolute;
right: 18px;
top: 50%;
transform: translateY(-50%);
font-family: var(--dr-font-mono);
font-size: 0.65rem;
color: var(--dr-text-muted);
white-space: nowrap;
opacity: 0;
transition: opacity var(--dr-speed-fast) var(--dr-ease);
pointer-events: none;
padding: 0.25rem 0.5rem;
border-radius: 999px;
background: rgba(4, 9, 16, 0.82);
border: 1px solid var(--dr-border-soft);
backdrop-filter: blur(12px);
}
.dr-section-dot:hover::after,
.dr-section-dot.active::after {
opacity: 1;
}
.dr-section-dot.active {
width: 10px;
height: 10px;
background: var(--dr-accent-2);
box-shadow:
0 0 12px color-mix(in srgb, var(--dr-accent-2) 72%, transparent),
0 0 28px color-mix(in srgb, var(--dr-accent) 30%, transparent);
}
.dr-section-dot:hover {
background: var(--dr-accent);
box-shadow: 0 0 18px color-mix(in srgb, var(--dr-accent) 60%, transparent);
}
@media (min-width: 760px) {
.dr-section-nav {
display: flex;
right: 1rem;
}
}
@media (min-width: 1180px) {
.dr-section-nav { right: 1.4rem; }
.dr-progress-spine { width: 4px; }
} .dr-cursor-dot,
.dr-cursor-ring,
.dr-cursor-glow {
display: none;
}
@media (pointer: fine) and (min-width: 980px) {
.dr-cursor-dot {
display: block;
width: 8px;
height: 8px;
background: var(--dr-accent-2);
border-radius: 50%;
position: fixed;
transform: translate(-50%, -50%);
transition:
width var(--dr-speed-base) var(--dr-ease),
height var(--dr-speed-base) var(--dr-ease),
background var(--dr-speed-base) var(--dr-ease);
z-index: 9999;
pointer-events: none;
box-shadow: 0 0 18px color-mix(in srgb, var(--dr-accent-2) 65%, transparent);
}
.dr-cursor-ring {
display: block;
width: 38px;
height: 38px;
border: 1.5px solid var(--dr-accent-2);
border-radius: 50%;
position: fixed;
transform: translate(-50%, -50%);
transition:
width 420ms var(--dr-ease-out),
height 420ms var(--dr-ease-out),
border-color var(--dr-speed-base) var(--dr-ease),
opacity var(--dr-speed-base) var(--dr-ease);
z-index: 9998;
pointer-events: none;
opacity: 0.62;
}
.dr-cursor-ring.is-hovering {
width: 64px;
height: 64px;
border-color: var(--dr-accent);
opacity: 1;
}
.dr-cursor-dot.is-hovering {
background: var(--dr-accent);
width: 4px;
height: 4px;
}
.dr-cursor-glow {
display: block;
position: fixed;
width: 440px;
height: 440px;
border-radius: 50%;
background: radial-gradient(
circle,
color-mix(in srgb, var(--dr-accent-2) 7%, transparent) 0%,
transparent 70%
);
pointer-events: none;
z-index: 1;
transform: translate(-50%, -50%);
mix-blend-mode: screen;
}
} .dr-grain {
position: fixed;
inset: 0;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.88' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='1'/%3E%3C/svg%3E");
opacity: 0.032;
pointer-events: none;
z-index: 990;
animation: dr-grain-shift 0.55s steps(2) infinite;
mix-blend-mode: overlay;
}
@keyframes dr-grain-shift {
0%   { transform: translate(0, 0); }
25%  { transform: translate(-2px, 1px); }
50%  { transform: translate(1px, -2px); }
75%  { transform: translate(2px, 1px); }
100% { transform: translate(-1px, 2px); }
} [data-dr-reveal].dr-revealed {
opacity: 1;
transform: translateY(0);
}
[data-dr-reveal="clip"] {
clip-path: inset(0 100% 0 0);
opacity: 1;
transform: none;
transition: clip-path 950ms cubic-bezier(0.77, 0, 0.175, 1);
}
[data-dr-reveal="clip"].dr-revealed,
[data-dr-reveal="clip"].is-visible {
clip-path: inset(0 0% 0 0);
}
[data-dr-reveal="wipe"] {
clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
opacity: 1;
transform: none;
transition: clip-path 1050ms var(--dr-ease-out);
}
[data-dr-reveal="wipe"].dr-revealed,
[data-dr-reveal="wipe"].is-visible {
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
[data-dr-reveal="scale"] {
opacity: 0;
transform: scale(0.92);
transition:
opacity 760ms var(--dr-ease-out),
transform 760ms var(--dr-ease-out);
}
[data-dr-reveal="scale"].dr-revealed,
[data-dr-reveal="scale"].is-visible {
opacity: 1;
transform: scale(1);
}
[data-dr-reveal="left"] {
opacity: 0;
transform: translateX(-42px);
transition:
opacity var(--dr-speed-cinematic) var(--dr-ease-out),
transform var(--dr-speed-cinematic) var(--dr-ease-out);
}
[data-dr-reveal="left"].dr-revealed,
[data-dr-reveal="left"].is-visible {
opacity: 1;
transform: translateX(0);
}
[data-dr-reveal="right"] {
opacity: 0;
transform: translateX(42px);
transition:
opacity var(--dr-speed-cinematic) var(--dr-ease-out),
transform var(--dr-speed-cinematic) var(--dr-ease-out);
}
[data-dr-reveal="right"].dr-revealed,
[data-dr-reveal="right"].is-visible {
opacity: 1;
transform: translateX(0);
} [data-dr-stagger] > * {
opacity: 0;
transform: translateY(26px);
transition:
opacity 780ms var(--dr-ease-out),
transform 780ms var(--dr-ease-out);
}
[data-dr-stagger] > *.dr-revealed,
[data-dr-stagger].is-visible > * {
opacity: 1;
transform: translateY(0);
} .dr-shimmer-line {
height: 1px;
width: 100%;
background: linear-gradient(
90deg,
transparent 0%,
var(--dr-accent-2) 22%,
var(--dr-accent) 50%,
var(--dr-accent-2) 78%,
transparent 100%
);
background-size: 220% 100%;
animation: dr-shimmer-move 3.2s linear infinite;
margin-block: clamp(1.8rem, 6vw, 3rem);
box-shadow: 0 0 20px color-mix(in srgb, var(--dr-accent) 32%, transparent);
border: none;
}
@keyframes dr-shimmer-move {
from { background-position: 110% 0; }
to   { background-position: -110% 0; }
} .dr-glow-orb {
width: clamp(140px, 34vw, 260px);
height: clamp(140px, 34vw, 260px);
border-radius: 50%;
background: radial-gradient(
circle,
color-mix(in srgb, var(--dr-accent-2) 32%, transparent) 0%,
color-mix(in srgb, var(--dr-accent-2) 8%, transparent) 48%,
transparent 72%
);
animation: dr-breathe 4.4s var(--dr-ease) infinite;
position: relative;
filter: blur(0.5px);
}
.dr-glow-orb::after {
content: "";
position: absolute;
inset: 22%;
border-radius: 50%;
background: radial-gradient(
circle,
color-mix(in srgb, var(--dr-accent) 40%, transparent) 0%,
transparent 72%
);
animation: dr-breathe 4.4s var(--dr-ease) infinite 2.2s;
}
@keyframes dr-breathe {
0%, 100% { transform: scale(1);    opacity: 0.62; }
50%       { transform: scale(1.2); opacity: 1; }
} .dr-card::after,
.dr-post-card::after {
content: "";
position: absolute;
inset: auto 0 0 0;
height: 2px;
width: 0%;
background: linear-gradient(
90deg,
var(--dr-accent-2),
var(--dr-accent),
var(--dr-accent-2)
);
transition: width 560ms var(--dr-ease-out);
box-shadow: 0 0 22px color-mix(in srgb, var(--dr-accent) 48%, transparent);
border-radius: 0 0 var(--dr-radius-md) var(--dr-radius-md);
}
.dr-card:hover::after,
.dr-post-card:hover::after {
width: 100%;
}
.dr-card:hover,
.dr-post-card:hover {
border-color: color-mix(in srgb, var(--dr-accent) 36%, transparent);
box-shadow:
var(--dr-shadow-lg),
0 0 0 1px color-mix(in srgb, var(--dr-accent-2) 16%, transparent),
0 0 48px color-mix(in srgb, var(--dr-accent) 12%, transparent);
} .dr-takeaway {
position: relative;
margin-block: clamp(2rem, 6vw, 3.4rem);
padding: clamp(1.2rem, 5vw, 2rem);
border-left: 3px solid var(--dr-accent-2);
border-radius: 0 var(--dr-radius-lg) var(--dr-radius-lg) 0;
background:
radial-gradient(circle at top right,
color-mix(in srgb, var(--dr-accent-2) 14%, transparent),
transparent 40%),
linear-gradient(135deg,
color-mix(in srgb, var(--dr-accent-2) 8%, transparent),
rgba(255, 255, 255, 0.018));
backdrop-filter: blur(14px) saturate(160%);
box-shadow: var(--dr-shadow-sm);
}
.dr-takeaway::before {
content: "KEY TAKEAWAY";
font-family: var(--dr-font-mono);
font-size: 0.58rem;
letter-spacing: 0.32em;
color: var(--dr-accent-2);
position: absolute;
top: -10px;
left: clamp(1rem, 4vw, 1.8rem);
background: var(--dr-bg);
padding: 0 0.55rem;
} .dr-why-matters {
position: relative;
padding-block: clamp(1.8rem, 6vw, 2.8rem);
margin-block: clamp(2rem, 7vw, 3.6rem);
border-top: 1px solid color-mix(in srgb, var(--dr-accent) 22%, transparent);
border-bottom: 1px solid color-mix(in srgb, var(--dr-accent) 22%, transparent);
}
.dr-why-matters::before {
content: "";
position: absolute;
top: -1px;
left: 0;
width: min(160px, 38vw);
height: 2px;
background: linear-gradient(90deg, var(--dr-accent), transparent);
box-shadow: 0 0 20px color-mix(in srgb, var(--dr-accent) 55%, transparent);
} .dr-quote {
position: relative;
padding: clamp(1.5rem, 6vw, 3rem);
font-family: var(--dr-font-display);
font-size: clamp(1.25rem, 5vw, 2.4rem);
font-style: italic;
color: var(--dr-heading);
line-height: 1.35;
border-left: none;
border-radius: var(--dr-radius-xl);
background:
radial-gradient(circle at top left,
color-mix(in srgb, var(--dr-accent-2) 14%, transparent),
transparent 40%),
linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.018));
border: 1px solid color-mix(in srgb, var(--dr-accent-2) 18%, transparent);
box-shadow: var(--dr-shadow-md);
overflow: hidden;
}
.dr-quote::before {
content: "\201C";
font-family: var(--dr-font-display);
font-size: clamp(6rem, 24vw, 13rem);
color: var(--dr-accent-2);
opacity: 0.1;
position: absolute;
top: -0.22em;
left: 0.08em;
line-height: 1;
pointer-events: none;
}
.dr-quote cite {
display: block;
font-family: var(--dr-font-mono);
font-size: 0.68rem;
letter-spacing: 0.2em;
color: var(--dr-accent-2);
font-style: normal;
margin-top: 1rem;
text-transform: uppercase;
} [data-dr-tilt] {
transform-style: preserve-3d;
will-change: transform;
transition: box-shadow var(--dr-speed-base) var(--dr-ease-out);
position: relative;
overflow: hidden;
}
[data-dr-tilt]::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(
circle at var(--tilt-x, 50%) var(--tilt-y, 50%),
color-mix(in srgb, var(--dr-accent-2) 14%, transparent) 0%,
transparent 60%
);
pointer-events: none;
opacity: 0;
transition: opacity var(--dr-speed-base) var(--dr-ease);
z-index: 0;
}
[data-dr-tilt]:hover::before {
opacity: 1;
}
[data-dr-tilt] > * {
position: relative;
z-index: 1;
} [data-dr-magnetic] {
will-change: transform;
transition: transform var(--dr-speed-slow) var(--dr-ease-out);
} [data-dr-scramble] {
font-family: var(--dr-font-mono);
color: var(--dr-accent);
letter-spacing: -0.02em;
} @supports (animation-timeline: scroll()) {
.dr-scroll-fade-header,
.dr-post-header {
animation: dr-header-fade linear both;
animation-timeline: view();
animation-range: exit 0% exit 42%;
}
@keyframes dr-header-fade {
to {
opacity: 0.3;
transform: translateY(-22px) scale(0.984);
filter: blur(2px);
}
}
.dr-scroll-parallax {
animation: dr-parallax linear both;
animation-timeline: scroll();
}
@keyframes dr-parallax {
from { transform: translateY(0); }
to   { transform: translateY(-70px); }
}
} .dr-btn--shimmer {
overflow: hidden;
}
.dr-btn--shimmer::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
105deg,
transparent 30%,
rgba(255, 255, 255, 0.18) 50%,
transparent 70%
);
transform: translateX(-100%);
transition: transform 600ms var(--dr-ease-out);
}
.dr-btn--shimmer:hover::after {
transform: translateX(100%);
} .dr-gradient-text-animate {
background: linear-gradient(
90deg,
var(--dr-accent),
var(--dr-accent-2),
var(--dr-accent)
);
background-size: 200% 100%;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
animation: dr-gradient-shift 4s linear infinite;
}
@keyframes dr-gradient-shift {
0%   { background-position: 0% 50%; }
50%  { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
} .dr-scanlines {
position: relative;
overflow: hidden;
}
.dr-scanlines::after {
content: "";
position: absolute;
inset: 0;
background: repeating-linear-gradient(
0deg,
transparent,
transparent 2px,
rgba(0, 0, 0, 0.055) 2px,
rgba(0, 0, 0, 0.055) 4px
);
pointer-events: none;
z-index: 2;
} @media (prefers-reduced-motion: reduce) {
.dr-grain,
.dr-glow-orb,
.dr-glow-orb::after,
.dr-shimmer-line,
.dr-gradient-text-animate,
.dr-progress-fill {
animation: none !important;
}
.dr-cursor-dot,
.dr-cursor-ring,
.dr-cursor-glow {
display: none !important;
}
[data-dr-reveal],
[data-dr-reveal="clip"],
[data-dr-reveal="wipe"],
[data-dr-reveal="scale"],
[data-dr-reveal="left"],
[data-dr-reveal="right"] {
opacity: 1 !important;
transform: none !important;
clip-path: none !important;
transition: none !important;
}
[data-dr-stagger] > * {
opacity: 1 !important;
transform: none !important;
}
[data-dr-tilt] {
transform: none !important;
}
}body.dr-family-page .wp-block-post-content {
width: 100%;
max-width: 100%;
padding-block: 0 3rem;
padding-inline: 0;
}
body.dr-family-page .wp-block-post-content > * {
max-width: none;
}
body.dr-family-page .is-layout-constrained
> :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
max-width: min(100% - 2rem, var(--dr-container, 1200px));
margin-inline: auto;
}
body.dr-family-page .wp-block-post-content > .alignfull,
body.dr-family-page .wp-block-post-content > .wp-block-group.alignfull {
width: 100%;
max-width: 100%;
} body.dr-family-page {
--dr-page-top-pad: clamp(2.5rem, 6vw, 5rem);
}
body.dr-family-page main.wp-block-group,
body.dr-family-page .site-main {
min-height: 60vh;
} .dr-page-top {
padding-top: var(--dr-page-top-pad, clamp(2.5rem, 6vw, 5rem));
}
.dr-page-section {
position: relative;
padding-block: clamp(2.5rem, 5.5vw, 5rem);
}
.dr-page-section--tight {
padding-block: clamp(1.5rem, 3vw, 2.75rem);
}
.dr-page-section--large {
padding-block: clamp(3.5rem, 8vw, 7rem);
}
.dr-page-inner {
width: min(100% - 2rem, var(--dr-container-wide, 1360px));
margin-inline: auto;
}
.dr-page-inner--narrow {
width: min(100% - 2rem, 960px);
margin-inline: auto;
} body.dr-family-page.admin-bar {
scroll-padding-top: 46px;
} @media (min-width: 768px) {
body.dr-family-page .wp-block-post-content {
padding-block: 0 4rem;
}
}
@media (min-width: 1200px) {
body.dr-family-page .wp-block-post-content {
padding-block: 0 5rem;
}
} body.dr-family-page {
background-color: var(--dr-bg, #071019);
color: var(--dr-text, #ecf5fb);
}body.dr-family-theme .wp-block-post-content,
body.dr-page-culture-identity .wp-block-post-content,
body.dr-page-cybersecurity-tech .wp-block-post-content,
body.dr-page-systems-thinking-strategy .wp-block-post-content,
body.dr-page-philosophy-legacy .wp-block-post-content,
body.dr-page-health-performance .wp-block-post-content,
body.dr-page-lifestyle-travel .wp-block-post-content,
body.dr-page-nederlandse-lessen .wp-block-post-content {
width: 100%;
max-width: 100%;
padding-block: 0 4rem;
}
body.dr-family-theme .wp-block-post-content > * {
max-width: none;
} .dr-theme-section {
position: relative;
padding-block: clamp(3rem, 7vw, 6rem);
}
.dr-theme-section + .dr-theme-section {
border-top: 1px solid rgba(255,255,255,0.05);
}
.dr-theme-shell {
width: min(100% - 2rem, var(--dr-container-wide));
margin-inline: auto;
}
.dr-theme-shell--narrow {
width: min(100% - 2rem, 980px);
margin-inline: auto;
} .dr-theme-hero {
position: relative;
overflow: clip;
padding-block: clamp(4rem, 9vw, 8rem) clamp(3rem, 6vw, 5rem);
background:
radial-gradient(circle at top right, var(--dr-page-glow), transparent 34%),
radial-gradient(circle at left center, rgba(255,255,255,0.025), transparent 28%);
}
.dr-theme-hero::before {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(180deg, rgba(255,255,255,0.02), transparent 40%),
repeating-linear-gradient(
90deg,
transparent 0,
transparent 79px,
rgba(255,255,255,0.02) 80px
);
opacity: 0.5;
pointer-events: none;
}
.dr-theme-hero__inner {
position: relative;
z-index: 2;
width: min(100% - 2rem, var(--dr-container-wide));
margin-inline: auto;
display: grid;
grid-template-columns: minmax(0, 1.3fr) minmax(280px, 0.7fr);
gap: clamp(1.5rem, 4vw, 3rem);
align-items: end;
}
.dr-theme-hero__copy {
max-width: 840px;
}
.dr-theme-hero__title {
max-width: 12ch;
margin-bottom: var(--dr-space-4);
text-wrap: balance;
}
.dr-theme-hero__lead {
max-width: 70ch;
margin-bottom: var(--dr-space-6);
}
.dr-theme-hero__actions {
display: flex;
flex-wrap: wrap;
gap: 0.85rem;
margin-top: var(--dr-space-5);
}
.dr-theme-hero__meta {
display: grid;
gap: 0.9rem;
align-self: stretch;
}
.dr-theme-stat {
padding: 1rem 1rem 0.95rem;
border-radius: var(--dr-radius-md);
background: linear-gradient(180deg, rgba(15, 27, 42, 0.94), rgba(10, 18, 28, 0.96));
border: 1px solid rgba(255,255,255,0.08);
box-shadow: var(--dr-shadow-sm);
}
.dr-theme-stat__label {
display: block;
margin-bottom: 0.35rem;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--dr-text-muted);
}
.dr-theme-stat__value {
display: block;
color: #fff;
font-size: 1.15rem;
font-weight: 700;
}
.dr-theme-stat__sub {
display: block;
margin-top: 0.3rem;
color: var(--dr-text-muted);
font-size: 0.9rem;
} .dr-theme-thesis {
position: relative;
}
.dr-theme-thesis__grid {
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(280px, 0.95fr);
gap: clamp(1.5rem, 4vw, 3rem);
align-items: start;
}
.dr-theme-thesis__copy {
max-width: 72ch;
}
.dr-theme-thesis__cards {
display: grid;
gap: 1rem;
}
.dr-theme-thesis-card {
padding: 1.1rem 1.1rem 1rem;
border-radius: var(--dr-radius-md);
background: linear-gradient(180deg, rgba(15, 25, 39, 0.92), rgba(9, 16, 25, 0.95));
border: 1px solid rgba(255,255,255,0.08);
box-shadow: var(--dr-shadow-sm);
}
.dr-theme-thesis-card h3 {
margin-bottom: 0.45rem;
font-size: 1.02rem;
}
.dr-theme-thesis-card p:last-child {
margin-bottom: 0;
} .dr-theme-pillars__header {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 1rem;
align-items: end;
margin-bottom: clamp(1.2rem, 3vw, 2rem);
}
.dr-theme-pillars__grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(1rem, 2vw, 1.4rem);
}
.dr-pillar-card {
position: relative;
display: flex;
flex-direction: column;
min-height: 100%;
padding: clamp(1rem, 2vw, 1.35rem);
border-radius: var(--dr-radius-lg);
background:
radial-gradient(circle at top right, var(--dr-page-glow), transparent 34%),
linear-gradient(180deg, rgba(15, 27, 42, 0.94), rgba(10, 18, 28, 0.98));
border: 1px solid rgba(255,255,255,0.08);
box-shadow: var(--dr-shadow-md);
overflow: hidden;
transition:
transform var(--dr-speed-base) var(--dr-ease),
border-color var(--dr-speed-base) var(--dr-ease),
box-shadow var(--dr-speed-base) var(--dr-ease);
}
.dr-pillar-card:hover {
transform: translateY(-4px);
border-color: color-mix(in srgb, var(--dr-accent) 26%, rgba(255,255,255,0.1));
box-shadow: var(--dr-shadow-lg);
}
.dr-pillar-card__top {
display: flex;
flex-wrap: wrap;
gap: 0.6rem;
align-items: center;
margin-bottom: var(--dr-space-4);
}
.dr-pillar-card__status,
.dr-pillar-card__route {
display: inline-flex;
align-items: center;
min-height: 28px;
padding: 0.25rem 0.65rem;
border-radius: 999px;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.dr-pillar-card__status {
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.08);
color: var(--dr-text-soft);
}
.dr-pillar-card__route {
background: color-mix(in srgb, var(--dr-accent) 15%, transparent);
border: 1px solid color-mix(in srgb, var(--dr-accent) 24%, transparent);
color: var(--dr-accent);
}
.dr-pillar-card__title {
margin-bottom: 0.55rem;
}
.dr-pillar-card__title a {
color: #fff;
text-decoration: none;
}
.dr-pillar-card__title a:hover {
color: var(--dr-accent);
}
.dr-pillar-card__text {
color: var(--dr-text-soft);
margin-bottom: var(--dr-space-5);
}
.dr-pillar-card__meta {
display: flex;
flex-wrap: wrap;
gap: 0.6rem;
margin-top: auto;
padding-top: var(--dr-space-4);
}
.dr-pillar-card__meta-item {
font-size: 0.82rem;
color: var(--dr-text-muted);
} .dr-theme-lanes__header {
margin-bottom: clamp(1.2rem, 3vw, 2rem);
}
.dr-theme-lanes__grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: clamp(1rem, 2vw, 1.4rem);
}
.dr-lane-card {
padding: clamp(1rem, 2vw, 1.35rem);
border-radius: var(--dr-radius-lg);
background: linear-gradient(180deg, rgba(14, 24, 37, 0.94), rgba(9, 15, 24, 0.98));
border: 1px solid rgba(255,255,255,0.08);
box-shadow: var(--dr-shadow-sm);
}
.dr-lane-card__head {
display: flex;
justify-content: space-between;
gap: 1rem;
align-items: start;
margin-bottom: 0.85rem;
}
.dr-lane-card__title {
margin-bottom: 0.35rem;
}
.dr-lane-card__desc {
color: var(--dr-text-muted);
margin-bottom: 1rem;
}
.dr-lane-list {
display: grid;
gap: 0.7rem;
margin: 0;
padding: 0;
list-style: none;
}
.dr-lane-list li {
margin: 0;
}
.dr-lane-link {
display: flex;
justify-content: space-between;
gap: 1rem;
align-items: start;
padding: 0.85rem 0.95rem;
border-radius: var(--dr-radius-sm);
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.06);
text-decoration: none;
transition:
background var(--dr-speed-fast) var(--dr-ease),
border-color var(--dr-speed-fast) var(--dr-ease),
transform var(--dr-speed-fast) var(--dr-ease);
}
.dr-lane-link:hover {
background: rgba(255,255,255,0.05);
border-color: color-mix(in srgb, var(--dr-accent) 24%, rgba(255,255,255,0.1));
transform: translateY(-1px);
}
.dr-lane-link__title {
color: #fff;
font-weight: 600;
}
.dr-lane-link__meta {
color: var(--dr-text-muted);
font-size: 0.84rem;
white-space: nowrap;
} .dr-theme-focus__grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(260px, 0.8fr);
gap: clamp(1rem, 2vw, 1.5rem);
}
.dr-focus-panel,
.dr-next-panel {
padding: clamp(1rem, 2vw, 1.35rem);
border-radius: var(--dr-radius-lg);
border: 1px solid rgba(255,255,255,0.08);
background:
radial-gradient(circle at top right, var(--dr-page-glow), transparent 30%),
linear-gradient(180deg, rgba(12, 22, 34, 0.96), rgba(9, 15, 24, 0.98));
box-shadow: var(--dr-shadow-sm);
}
.dr-focus-label {
display: inline-block;
margin-bottom: 0.55rem;
color: var(--dr-accent);
font-size: 0.76rem;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
} .dr-theme-explainer__inner {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(280px, 0.8fr);
gap: clamp(1rem, 2vw, 1.5rem);
align-items: start;
}
.dr-theme-explainer__copy {
max-width: 70ch;
}
.dr-theme-explainer__aside {
display: grid;
gap: 1rem;
}
.dr-theme-method,
.dr-theme-reading-guide {
padding: 1rem 1rem 0.95rem;
border-radius: var(--dr-radius-md);
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.07);
}
.dr-theme-method > :last-child,
.dr-theme-reading-guide > :last-child {
margin-bottom: 0;
} .dr-theme-bridges__grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: clamp(0.9rem, 2vw, 1.2rem);
}
.dr-bridge-card {
min-height: 100%;
padding: 1rem 1rem 0.95rem;
border-radius: var(--dr-radius-md);
background: linear-gradient(180deg, rgba(15, 25, 39, 0.9), rgba(9, 16, 24, 0.96));
border: 1px solid rgba(255,255,255,0.07);
box-shadow: var(--dr-shadow-sm);
transition:
transform var(--dr-speed-base) var(--dr-ease),
border-color var(--dr-speed-base) var(--dr-ease);
}
.dr-bridge-card:hover {
transform: translateY(-2px);
border-color: color-mix(in srgb, var(--dr-accent) 22%, rgba(255,255,255,0.08));
}
.dr-bridge-card h3,
.dr-bridge-card h4 {
margin-bottom: 0.45rem;
}
.dr-bridge-card p:last-child {
margin-bottom: 0;
} .dr-theme-cta__inner {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(260px, 0.8fr);
gap: clamp(1rem, 2vw, 1.5rem);
align-items: center;
padding: clamp(1.35rem, 3vw, 2rem);
border-radius: calc(var(--dr-radius-lg) + 4px);
background:
radial-gradient(circle at right top, var(--dr-page-glow), transparent 35%),
linear-gradient(180deg, rgba(12, 22, 34, 0.98), rgba(8, 14, 22, 0.98));
border: 1px solid color-mix(in srgb, var(--dr-accent) 18%, rgba(255,255,255,0.08));
box-shadow: var(--dr-shadow-md);
}
.dr-theme-cta__copy > :last-child,
.dr-theme-cta__actions > :last-child {
margin-bottom: 0;
}
.dr-theme-cta__actions {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: 0.75rem;
} .dr-theme-route-footer {
padding-top: clamp(1rem, 2vw, 1.5rem);
}
.dr-theme-route-footer__grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1rem;
}
.dr-route-link {
display: block;
padding: 1rem 1rem 0.95rem;
border-radius: var(--dr-radius-md);
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.06);
text-decoration: none;
transition:
transform var(--dr-speed-fast) var(--dr-ease),
border-color var(--dr-speed-fast) var(--dr-ease),
background var(--dr-speed-fast) var(--dr-ease);
}
.dr-route-link:hover {
transform: translateY(-2px);
background: rgba(255,255,255,0.05);
border-color: color-mix(in srgb, var(--dr-accent) 24%, rgba(255,255,255,0.08));
}
.dr-route-link__label {
display: inline-block;
margin-bottom: 0.35rem;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--dr-text-muted);
}
.dr-route-link__title {
display: block;
color: #fff;
font-weight: 700;
}
.dr-route-link__text {
display: block;
margin-top: 0.35rem;
color: var(--dr-text-muted);
font-size: 0.92rem;
} .dr-theme-section__head {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 1rem;
align-items: end;
margin-bottom: clamp(1rem, 2vw, 1.6rem);
}
.dr-theme-section__copy {
max-width: 70ch;
}
.dr-theme-section__copy > :last-child {
margin-bottom: 0;
} .dr-theme-section.dr-reveal {
opacity: 0;
transform: translateY(26px);
transition:
opacity var(--dr-speed-slow) var(--dr-ease),
transform var(--dr-speed-slow) var(--dr-ease);
}
.dr-theme-section.dr-reveal.is-visible {
opacity: 1;
transform: translateY(0);
} @media (max-width: 1100px) {
.dr-theme-pillars__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.dr-theme-bridges__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 900px) {
.dr-theme-hero__inner,
.dr-theme-thesis__grid,
.dr-theme-focus__grid,
.dr-theme-explainer__inner,
.dr-theme-cta__inner {
grid-template-columns: 1fr;
}
.dr-theme-hero__meta {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.dr-theme-cta__actions {
justify-content: flex-start;
}
}
@media (max-width: 760px) {
.dr-theme-lanes__grid,
.dr-theme-route-footer__grid,
.dr-theme-pillars__grid,
.dr-theme-bridges__grid {
grid-template-columns: 1fr;
}
.dr-theme-hero__meta {
grid-template-columns: 1fr;
}
.dr-theme-hero {
padding-block: clamp(3rem, 10vw, 5rem) clamp(2.2rem, 6vw, 3rem);
}
}
@media (max-width: 640px) {
.dr-theme-shell,
.dr-theme-shell--narrow {
width: min(100% - 1.1rem, var(--dr-container-wide));
}
.dr-pillar-card,
.dr-lane-card,
.dr-focus-panel,
.dr-next-panel,
.dr-bridge-card,
.dr-route-link,
.dr-theme-cta__inner {
padding: 1rem;
}
.dr-theme-hero__actions .dr-btn,
.dr-theme-cta__actions .dr-btn {
width: 100%;
}
}:root {
--dr-cluster-accent: var(--dr-cyan, #7ceaff);
--dr-cluster-accent-2: var(--dr-gold, #c6a768);
--dr-cluster-glow: rgba(124, 234, 255, 0.08);
--dr-cluster-border: rgba(124, 234, 255, 0.12);
--dr-cluster-surface: rgba(255, 255, 255, 0.04);
}  body.dr-page-culture-identity .wp-block-post-content,
body.dr-page-culture-and-identity .wp-block-post-content, body.dr-page-cybersecurity-tech .wp-block-post-content,
body.dr-page-cybersecurity-and-tech .wp-block-post-content, body.dr-page-systems-thinking-strategy .wp-block-post-content,
body.dr-page-systems-strategy .wp-block-post-content,
body.dr-page-systems-and-strategy .wp-block-post-content, body.dr-page-philosophy-legacy .wp-block-post-content,
body.dr-page-philosophy-and-legacy .wp-block-post-content, body.dr-page-health-performance .wp-block-post-content,
body.dr-page-health-and-performance .wp-block-post-content, body.dr-page-nederlandse-lessen .wp-block-post-content {
width: 100%;
max-width: 100%;
padding-block: 0 4rem;
} .dr-cluster-section {
position: relative;
padding-block: clamp(2.5rem, 5.5vw, 5rem);
}
.dr-cluster-section--hero {
padding-block: clamp(3.5rem, 8vw, 7rem) clamp(2rem, 5vw, 4rem);
}
.dr-cluster-section--tight {
padding-block: clamp(1.5rem, 3vw, 2.75rem);
}
.dr-cluster-section + .dr-cluster-section {
border-top: 1px solid rgba(255, 255, 255, 0.05);
} .dr-cluster-shell {
width: min(100% - 2rem, var(--dr-container-wide, 1360px));
margin-inline: auto;
}
.dr-cluster-shell--narrow {
width: min(100% - 2rem, 980px);
margin-inline: auto;
} .dr-cluster-header {
margin-bottom: clamp(1.5rem, 4vw, 3rem);
}
.dr-cluster-header__kicker {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-size: 0.76rem;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--dr-cluster-accent);
margin-bottom: var(--dr-space-4, 1rem);
}
.dr-cluster-header__kicker::before {
content: "";
width: 0.5rem;
height: 0.5rem;
border-radius: 999px;
background: var(--dr-cluster-accent);
box-shadow: 0 0 14px color-mix(in oklch, var(--dr-cluster-accent) 55%, transparent);
}
.dr-cluster-header__title {
margin-bottom: var(--dr-space-4, 1rem);
text-wrap: balance;
}
.dr-cluster-header__lead {
max-width: 70ch;
color: var(--dr-text-soft, #c9d7e3);
} .dr-cluster-card {
position: relative;
padding: clamp(1rem, 2vw, 1.35rem);
border-radius: var(--dr-radius-lg, 28px);
background: rgba(255, 255, 255, 0.04);
border: 1px solid var(--dr-cluster-border);
box-shadow: var(--dr-shadow-sm, 0 10px 30px rgba(0, 0, 0, 0.18));
transition:
transform 280ms cubic-bezier(.22, .61, .36, 1),
border-color 280ms cubic-bezier(.22, .61, .36, 1),
box-shadow 280ms cubic-bezier(.22, .61, .36, 1);
}
.dr-cluster-card:hover {
transform: translateY(-3px);
border-color: color-mix(in srgb, var(--dr-cluster-accent) 24%, rgba(255, 255, 255, 0.1));
box-shadow: var(--dr-shadow-md, 0 18px 50px rgba(0, 0, 0, 0.24));
} .dr-cluster-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
gap: clamp(1rem, 2vw, 1.5rem);
}
.dr-cluster-grid--2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.dr-cluster-grid--3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
} body.dr-cluster-culture,
body.dr-cluster-cyber,
body.dr-cluster-systems,
body.dr-cluster-philosophy {
--dr-cluster-glow: rgba(124, 234, 255, 0.06);
} @media (min-width: 768px) {
.dr-cluster-grid--2,
.dr-cluster-grid--3 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 1024px) {
.dr-cluster-grid--3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}:root{ --dr-ph-bg:#0d0b09;
--dr-ph-bg-2:#15110d;
--dr-ph-bg-3:#0f1722;
--dr-ph-sand:#eadcc7;
--dr-ph-cream:#f5efe3;
--dr-ph-gold:#c9a84c;
--dr-ph-bronze:#b07b33;
--dr-ph-olive:#6d6a3f;
--dr-ph-cyan:#a980b7;
--dr-ph-ink:#2b1f11;
--dr-ph-muted:#a89478;
--dr-ph-line:rgba(201,168,76,0.14);
--dr-ph-line-strong:rgba(201,168,76,0.24);
--dr-ph-glow:rgba(201,168,76,0.12);
--dr-ph-sea-deep:#0a1628;
--dr-ph-sea-mid:#1a3a5c;
--dr-ph-sea-teal:#0e4d5c;
--dr-ph-sea-foam:rgba(169, 128, 183,0.15);
--dr-ph-sea-wave:#8b6b9f;
--dr-ph-sea-storm:#2a5d7a;
--dr-ph-panel:rgba(17,24,33,0.86);
--dr-ph-panel-strong:rgba(12,18,26,0.94);
--dr-ph-text:#e9f1f7;
--dr-ph-soft:#cbbca4;
--dr-ph-muted-ui:#92a3b3;
--dr-ph-shadow:0 24px 64px rgba(0,0,0,0.32);
--dr-ph-shadow-soft:0 16px 36px rgba(0,0,0,0.22);
--dr-ph-radius:20px;
--dr-ph-radius-sm:14px;
--dr-ph-content-width:860px;
--dr-ph-transition:.28s ease; --dr-ph-mood-gold:rgba(201,168,76,0.14);
--dr-ph-mood-teal:rgba(139, 107, 159,0.14);
--dr-ph-mood-warm:rgba(186,156,120,0.10);
--dr-ph-mood-bridge:rgba(140,160,180,0.08); --dr-scrollY:0;
--dr-scrollP:0;
--dr-ph-temp-h:38;
--dr-ph-temp-s:62%;
--dr-ph-temp-l:8%; --dr-ph-card-bg:linear-gradient(180deg,rgba(24,18,13,0.94),rgba(18,13,9,0.95));
--dr-ph-card-border:rgba(201,168,76,0.14);
--dr-ph-card-hover:rgba(139, 107, 159,0.30); --dr-ph-node-bg:linear-gradient(180deg,rgba(18,14,10,0.90),rgba(20, 12, 30,0.20));
--dr-ph-node-border:rgba(201,168,76,0.12); --dr-ph-toggle-bg:rgba(201,168,76,0.10);
--dr-ph-toggle-border:rgba(201,168,76,0.24);
--dr-ph-toggle-icon:"☾";
} .dr-ph-js .dr-progress-spine,
.dr-ph-js .dr-cursor-dot,
.dr-ph-js .dr-cursor-ring,
.dr-ph-js .dr-cursor-glow {
display: none !important;
} .dr-light{
--dr-ph-bg:#f4efe6;
--dr-ph-bg-2:#ebe4d8;
--dr-ph-bg-3:#e2dcd0;
--dr-ph-sand:#2b1f11;
--dr-ph-cream:#1a1208;
--dr-ph-gold:#8a6e2f;
--dr-ph-bronze:#7a5520;
--dr-ph-cyan:#1a7a86;
--dr-ph-ink:#f5efe3;
--dr-ph-muted:#7a6b58;
--dr-ph-line:rgba(42,31,17,0.10);
--dr-ph-line-strong:rgba(42,31,17,0.18);
--dr-ph-glow:rgba(138,110,47,0.08);
--dr-ph-sea-wave:#14707c;
--dr-ph-sea-deep:#e8e2d6;
--dr-ph-sea-teal:#1a7a86;
--dr-ph-panel:rgba(244,239,230,0.92);
--dr-ph-panel-strong:rgba(235,228,216,0.96);
--dr-ph-text:#1a1208;
--dr-ph-soft:#4a3d2e;
--dr-ph-muted-ui:#6a5d4e;
--dr-ph-shadow:0 24px 64px rgba(42,31,17,0.10);
--dr-ph-shadow-soft:0 16px 36px rgba(42,31,17,0.06);
--dr-ph-mood-gold:rgba(138,110,47,0.08);
--dr-ph-mood-teal:rgba(26,122,134,0.08);
--dr-ph-mood-warm:rgba(122,107,88,0.06);
--dr-ph-mood-bridge:rgba(100,120,140,0.06);
--dr-ph-card-bg:linear-gradient(180deg,rgba(255,252,246,0.96),rgba(244,239,230,0.98));
--dr-ph-card-border:rgba(42,31,17,0.10);
--dr-ph-card-hover:rgba(26,122,134,0.18);
--dr-ph-node-bg:linear-gradient(180deg,rgba(255,252,246,0.94),rgba(244,239,230,0.96));
--dr-ph-node-border:rgba(42,31,17,0.08);
--dr-ph-toggle-bg:rgba(42,31,17,0.06);
--dr-ph-toggle-border:rgba(42,31,17,0.14);
--dr-ph-toggle-icon:"☀";
}  ::selection{
background:rgba(169, 128, 183,0.18);
color:#fff;
}
.dr-light ::selection{
background:rgba(138,110,47,0.18);
color:#1a1208;
} .dr-gate{
position:fixed;
inset:0;
z-index:9999;
pointer-events:none;
display:flex;
}
.dr-gate-l,
.dr-gate-r{
flex:1;
background:var(--dr-ph-bg);
transition:transform 1s cubic-bezier(0.76, 0, 0.24, 1);
}
.dr-gate-l{ transform-origin:left center; }
.dr-gate-r{ transform-origin:right center; }
.dr-gate.dr-gate-open .dr-gate-l{ transform:translateX(-100%); }
.dr-gate.dr-gate-open .dr-gate-r{ transform:translateX(100%); }
.dr-gate.dr-gate-done{ display:none; }
.dr-gate-mark{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
font-family:"Playfair Display", Georgia, serif;
font-size:clamp(1.2rem,2.4vw,1.8rem);
letter-spacing:4px;
text-transform:uppercase;
color:var(--dr-ph-gold);
opacity:1;
transition:opacity .4s ease;
white-space:nowrap;
}
.dr-gate.dr-gate-open .dr-gate-mark{ opacity:0; } .dr-mode-toggle{
position:fixed;
top:80px;
right:20px;
z-index:1000;
width:44px;
height:44px;
border-radius:50%;
border:1px solid var(--dr-ph-toggle-border);
background:var(--dr-ph-toggle-bg);
backdrop-filter:blur(12px);
-webkit-backdrop-filter:blur(12px);
cursor:pointer;
display:flex;
align-items:center;
justify-content:center;
font-size:18px;
color:var(--dr-ph-gold);
transition:border-color .3s, background .3s, transform .25s, box-shadow .3s;
box-shadow:0 4px 16px rgba(0,0,0,0.12);
}
.dr-mode-toggle:hover{
transform:scale(1.08);
border-color:var(--dr-ph-gold);
box-shadow:0 4px 20px rgba(201,168,76,0.15);
}
.dr-mode-toggle::after{
content:var(--dr-ph-toggle-icon);
} .dr-spine{
position:fixed;
left:20px;
top:50%;
transform:translateY(-50%);
width:3px;
height:min(320px, 40vh);
background:var(--dr-ph-line);
border-radius:4px;
z-index:900;
overflow:hidden;
opacity:0;
transition:opacity .4s ease;
}
.dr-spine.dr-spine-vis{ opacity:1; }
.dr-spine-fill{
position:absolute;
bottom:0;
left:0;
width:100%;
height:0%;
background:linear-gradient(180deg, var(--dr-ph-cyan), var(--dr-ph-gold));
border-radius:4px;
transition:height .1s linear;
}
.dr-spine-nodes{
position:absolute;
inset:0;
display:flex;
flex-direction:column;
justify-content:space-between;
align-items:center;
padding:2px 0;
}
.dr-spine-node{
width:9px;
height:9px;
border-radius:50%;
border:2px solid var(--dr-ph-line-strong);
background:var(--dr-ph-bg);
transition:border-color .3s, background .3s, box-shadow .3s;
position:relative;
z-index:2;
}
.dr-spine-node.dr-spine-active{
border-color:var(--dr-ph-gold);
background:var(--dr-ph-gold);
box-shadow:0 0 10px var(--dr-ph-glow);
} .dr-build-status{
display:inline-flex;
align-items:center;
gap:16px;
padding:10px 18px;
border-radius:999px;
border:1px solid var(--dr-ph-line);
background:var(--dr-ph-panel);
backdrop-filter:blur(8px);
-webkit-backdrop-filter:blur(8px);
font-family:"Playfair Display", Georgia, serif;
font-size:11px;
letter-spacing:1.5px;
text-transform:uppercase;
color:var(--dr-ph-muted);
margin:18px auto 0;
display:flex;
justify-content:center;
}
.dr-build-status span{
display:flex;
align-items:center;
gap:6px;
}
.dr-build-dot{
width:6px;
height:6px;
border-radius:50%;
}
.dr-build-dot-live{ background:var(--dr-ph-cyan); box-shadow:0 0 8px rgba(169, 128, 183,0.3); }
.dr-build-dot-wip{ background:var(--dr-ph-gold); animation:drPulse 2.8s ease-in-out infinite; }
.dr-build-dot-plan{ background:var(--dr-ph-muted); opacity:.5; } .dr-ph-wrap{
position:relative;
overflow:hidden;
border-radius:16px;
background:
radial-gradient(circle at top right, var(--dr-ph-mood-gold), transparent 26%),
radial-gradient(circle at 80% 60%, rgba(20, 12, 30,0.35), transparent 40%),
radial-gradient(circle at bottom left, var(--dr-ph-mood-teal), transparent 30%),
linear-gradient(180deg, var(--dr-ph-bg) 0%, var(--dr-ph-bg-2) 100%);
color:var(--dr-ph-sand);
box-shadow:var(--dr-ph-shadow);
margin:0 0 46px 0;
isolation:isolate;
transition:background .6s ease, box-shadow .6s ease, color .4s ease;
}
.dr-light .dr-ph-wrap{
background:
radial-gradient(circle at top right, rgba(138,110,47,0.06), transparent 26%),
linear-gradient(180deg, var(--dr-ph-bg) 0%, var(--dr-ph-bg-2) 100%);
box-shadow:0 8px 40px rgba(42,31,17,0.08);
}
.dr-ph-wrap::before{
content:'';
position:absolute;
inset:0;
background:
linear-gradient(rgba(201,168,76,0.025) 1px, transparent 1px),
linear-gradient(90deg, rgba(201,168,76,0.025) 1px, transparent 1px);
background-size:42px 42px;
pointer-events:none;
opacity:.45;
mask-image:linear-gradient(180deg, rgba(0,0,0,.95), rgba(0,0,0,.38));
-webkit-mask-image:linear-gradient(180deg, rgba(0,0,0,.95), rgba(0,0,0,.38));
}
.dr-ph-wrap::after{
content:'';
position:absolute;
inset:0;
pointer-events:none;
background:radial-gradient(circle at center, transparent 58%, rgba(0,0,0,0.12) 100%);
}
.dr-light .dr-ph-wrap::before{ opacity:.15; }
.dr-light .dr-ph-wrap::after{ background:radial-gradient(circle at center, transparent 58%, rgba(42,31,17,0.04) 100%); } .dr-grain{
position:absolute;
inset:0;
pointer-events:none;
z-index:60;
opacity:.038;
mix-blend-mode:overlay;
background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
background-size:180px 180px;
}
.dr-light .dr-grain{ opacity:.02; mix-blend-mode:multiply; }
.dr-scanline{
position:absolute;
inset:0;
pointer-events:none;
z-index:55;
overflow:hidden;
}
.dr-scanline::before{
content:'';
position:absolute;
left:0;
right:0;
height:1px;
background:linear-gradient(90deg, transparent, rgba(139, 107, 159,0.12) 20%, rgba(201,168,76,0.10) 50%, rgba(139, 107, 159,0.12) 80%, transparent);
box-shadow:0 0 24px 4px rgba(139, 107, 159,0.06);
animation:drScan 8s ease-in-out infinite;
}
.dr-light .dr-scanline{ display:none; }
@keyframes drScan{
0%{top:-2px;opacity:0;}
8%{opacity:1;}
92%{opacity:1;}
100%{top:100%;opacity:0;}
} .dr-ocean{
position:absolute;
inset:0;
pointer-events:none;
z-index:1;
overflow:hidden;
}
.dr-ocean-wave{
position:absolute;
width:200%;
left:-50%;
height:120px;
opacity:.08;
}
.dr-ocean-wave.w1{
bottom:18%;
background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120'%3E%3Cpath d='M0,60 C180,20 360,100 540,60 C720,20 900,100 1080,60 C1260,20 1440,80 1440,60 L1440,120 L0,120Z' fill='rgba(139, 107, 159,0.3)'/%3E%3C/svg%3E") repeat-x;
background-size:720px 120px;
animation:drWaveDrift 12s linear infinite;
}
.dr-ocean-wave.w2{
bottom:14%;
background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120'%3E%3Cpath d='M0,70 C200,30 400,110 600,70 C800,30 1000,100 1200,70 C1350,45 1440,80 1440,70 L1440,120 L0,120Z' fill='rgba(60, 40, 80,0.25)'/%3E%3C/svg%3E") repeat-x;
background-size:820px 120px;
animation:drWaveDrift 16s linear infinite reverse;
opacity:.06;
}
.dr-ocean-wave.w3{
bottom:10%;
background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120'%3E%3Cpath d='M0,50 C240,90 480,10 720,50 C960,90 1200,10 1440,50 L1440,120 L0,120Z' fill='rgba(42,93,122,0.2)'/%3E%3C/svg%3E") repeat-x;
background-size:660px 120px;
animation:drWaveDrift 20s linear infinite;
opacity:.05;
}
.dr-light .dr-ocean{ opacity:.3; }
@keyframes drWaveDrift{
from{transform:translateX(0);}
to{transform:translateX(50%);}
}
.dr-sea-glow{
position:absolute;
width:600px;
height:600px;
border-radius:50%;
background:radial-gradient(circle, rgba(60, 40, 80,0.14), rgba(139, 107, 159,0.06), transparent 70%);
pointer-events:none;
z-index:1;
right:-120px;
bottom:20%;
transform:translateY(calc(var(--dr-scrollY) * -0.12px));
transition:transform .08s linear;
mix-blend-mode:screen;
}
.dr-light .dr-sea-glow{ opacity:.2; }
.dr-scroll-overlay{
position:absolute;
inset:-12% -6%;
pointer-events:none;
z-index:1;
opacity:.55;
transform:translateY(calc(var(--dr-scrollY) * 0.14px));
transition:transform .08s linear;
background:
radial-gradient(circle at 18% 24%, rgba(169, 128, 183,0.06), transparent 18%),
radial-gradient(circle at 78% 16%, rgba(201,168,76,0.06), transparent 20%),
radial-gradient(circle at 70% 72%, rgba(60, 40, 80,0.08), transparent 20%);
mix-blend-mode:screen;
}
.dr-light .dr-scroll-overlay{ opacity:.15; mix-blend-mode:normal; } .dr-ambient{
position:absolute;
inset:0;
pointer-events:none;
overflow:hidden;
z-index:1;
}
.dr-ambient svg{
position:absolute;
opacity:.32;
filter:drop-shadow(0 0 18px rgba(201,168,76,0.08));
transition:transform .08s linear;
}
.dr-light .dr-ambient svg{ opacity:.12; }
.dr-amb-map{top:78px;right:-20px;width:360px;height:360px;transform:translateY(calc(var(--dr-scrollY)*0.10px));}
.dr-amb-arch{top:760px;left:-30px;width:320px;height:340px;transform:translateY(calc(var(--dr-scrollY)*0.06px));}
.dr-amb-orbit{bottom:150px;right:18px;width:380px;height:260px;transform:translateY(calc(var(--dr-scrollY)*-0.08px));}
.dr-amb-net{top:420px;right:8%;width:300px;height:220px;opacity:.22;transform:translateY(calc(var(--dr-scrollY)*0.12px));}
.dr-sl{stroke:rgba(201,168,76,0.34);stroke-width:1.8;fill:none;}
.dr-ss{stroke:rgba(201,168,76,0.14);stroke-width:1;fill:none;}
.dr-sc{stroke:rgba(139, 107, 159,0.22);stroke-width:1.1;fill:none;stroke-dasharray:8 12;animation:drDash 4s linear infinite;}
@keyframes drDash{to{stroke-dashoffset:-40;}}
.dr-sd{fill:var(--dr-ph-gold);filter:drop-shadow(0 0 10px rgba(201,168,76,0.35));}
.dr-sdc{fill:var(--dr-ph-cyan);filter:drop-shadow(0 0 10px rgba(169, 128, 183,0.28));}
.dr-fd{fill:var(--dr-ph-gold);filter:drop-shadow(0 0 10px rgba(201,168,76,0.35));}
.dr-fd.f1{animation:drM1 5.1s linear infinite;}
.dr-fd.f2{animation:drM2 5.8s linear infinite;}
.dr-fd.f3{animation:drM3 5s linear infinite;}
.dr-fd.fc1{fill:var(--dr-ph-cyan);animation:drM4 4.8s linear infinite;filter:drop-shadow(0 0 10px rgba(169, 128, 183,0.28));}
@keyframes drM1{0%{transform:translate(0,0);opacity:0;}12%{opacity:1;}55%{transform:translate(60px,-48px);opacity:1;}100%{transform:translate(122px,-92px);opacity:0;}}
@keyframes drM2{0%{transform:translate(0,0);opacity:0;}15%{opacity:1;}55%{transform:translate(-76px,0);opacity:1;}100%{transform:translate(-136px,0);opacity:0;}}
@keyframes drM3{0%{transform:translate(0,0);opacity:0;}12%{opacity:1;}55%{transform:translate(0,-56px);opacity:1;}100%{transform:translate(0,-118px);opacity:0;}}
@keyframes drM4{0%{transform:translate(0,0);opacity:0;}15%{opacity:1;}55%{transform:translate(80px,24px);opacity:1;}100%{transform:translate(146px,42px);opacity:0;}} .dr-hero{
position:relative;
padding:0;
overflow:hidden;
border-bottom:1px solid var(--dr-ph-line);
z-index:2;
}
.dr-hero-grid{
display:grid;
grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
align-items:stretch;
min-height:580px;
}
.dr-copy,.dr-visual,.dr-vframe{min-width:0;}
.dr-copy{
position:relative;
z-index:2;
padding:74px 38px 60px;
display:flex;
flex-direction:column;
justify-content:center;
}
.dr-copy::after{
content:'';
position:absolute;
top:36px;
bottom:36px;
right:0;
width:1px;
background:linear-gradient(180deg,transparent,var(--dr-ph-line-strong),transparent);
}
.dr-kicker{
font-family:"Playfair Display", Georgia, serif;
font-size:11px;
letter-spacing:4px;
text-transform:uppercase;
color:var(--dr-ph-gold);
margin-bottom:18px;
font-weight:700;
} .dr-title{
margin:0 0 16px;
font-family:"Playfair Display", Georgia, serif;
font-size:clamp(2.3rem,4.7vw,4rem);
line-height:1.04;
font-weight:800;
max-width:760px;
color:var(--dr-ph-sand);
position:relative;
}
.dr-title-main{
background:linear-gradient(105deg,var(--dr-ph-sand) 0%,var(--dr-ph-sand) 38%,rgba(139, 107, 159,0.7) 44%,var(--dr-ph-cream) 50%,rgba(201,168,76,0.92) 56%,var(--dr-ph-sand) 62%,var(--dr-ph-sand) 100%);
background-size:250% 100%;
-webkit-background-clip:text;
background-clip:text;
-webkit-text-fill-color:transparent;
animation:drShimmer 6s ease-in-out infinite;
}
.dr-title-script{
position:absolute;
inset:0;
display:flex;
align-items:center;
font-family:"Playfair Display", Georgia, serif;
font-size:clamp(2.3rem,4.7vw,4rem);
font-weight:800;
line-height:1.04;
opacity:0;
transition:opacity .35s ease;
pointer-events:none;
color:var(--dr-ph-gold);
}
.dr-title-script.dr-script-vis{ opacity:1; }
@keyframes drShimmer{
0%,100%{background-position:100% 50%;}
50%{background-position:0% 50%;}
}
.dr-sub{
max-width:760px;
margin:0 0 22px;
color:var(--dr-ph-soft);
font-size:1.08rem;
line-height:1.9;
}
.dr-meta{
display:inline-block;
font-family:"Playfair Display", Georgia, serif;
font-size:11px;
letter-spacing:2px;
text-transform:uppercase;
color:var(--dr-ph-muted);
padding:10px 14px;
border:1px solid var(--dr-ph-line);
border-radius:999px;
background:var(--dr-ph-panel);
backdrop-filter:blur(8px);
-webkit-backdrop-filter:blur(8px);
}
.dr-fstrip{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:12px;
margin-top:28px;
max-width:780px;
}
.dr-feat{
background:var(--dr-ph-card-bg);
border:1px solid var(--dr-ph-card-border);
border-radius:12px;
padding:14px;
box-shadow:var(--dr-ph-shadow-soft);
transition:border-color .3s, box-shadow .3s, transform .25s;
}
.dr-feat:hover{
border-color:var(--dr-ph-card-hover);
transform:translateY(-2px);
}
.dr-feat-label{
font-family:"Playfair Display", Georgia, serif;
font-size:9px;
letter-spacing:2px;
text-transform:uppercase;
color:var(--dr-ph-gold);
margin-bottom:6px;
}
.dr-feat strong{
display:block;
color:var(--dr-ph-sand);
font-weight:600;
line-height:1.5;
font-size:14px;
} .dr-visual{
position:relative;
min-height:100%;
display:flex;
align-items:center;
justify-content:center;
padding:34px 28px;
overflow:hidden;
}
.dr-visual::before{
content:'';
position:absolute;
inset:0;
background:
radial-gradient(circle at 70% 18%, var(--dr-ph-mood-gold), transparent 24%),
radial-gradient(circle at 40% 78%, var(--dr-ph-mood-teal), transparent 22%);
pointer-events:none;
}
.dr-vframe{
position:relative;
width:min(100%,520px);
max-width:520px;
aspect-ratio:1/1.08;
border-radius:18px;
background:linear-gradient(180deg,rgba(20,15,11,0.94),rgba(20, 12, 30,0.60));
border:1px solid var(--dr-ph-line);
box-shadow:inset 0 1px 0 rgba(255,255,255,0.02), var(--dr-ph-shadow-soft);
overflow:hidden;
}
.dr-light .dr-vframe{
background:linear-gradient(180deg,rgba(244,239,230,0.94),rgba(226,220,208,0.80));
}
.dr-vframe::before{
content:'';
position:absolute;
inset:0;
background:linear-gradient(135deg,rgba(201,168,76,0.05),transparent 42%), radial-gradient(circle at center,rgba(139, 107, 159,0.04),transparent 55%);
pointer-events:none;
}
.dr-vframe::after{
content:'';
position:absolute;
inset:16px;
border:1px solid var(--dr-ph-line);
border-radius:12px;
pointer-events:none;
} @keyframes drSpin{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}
@keyframes drPulse{0%,100%{transform:scale(1);opacity:.45;}50%{transform:scale(1.7);opacity:1;}} .dr-vcap{
position:absolute;
left:20px;right:20px;bottom:18px;
z-index:3;
display:flex;
justify-content:space-between;
align-items:flex-start;
gap:14px;
flex-wrap:wrap;
padding-top:14px;
border-top:1px solid var(--dr-ph-line);
background:linear-gradient(180deg,rgba(12,9,6,0),rgba(12,9,6,0.72) 30%,rgba(12,9,6,0.92));
}
.dr-light .dr-vcap{
background:linear-gradient(180deg,rgba(244,239,230,0),rgba(244,239,230,0.72) 30%,rgba(244,239,230,0.92));
}
.dr-vcap strong{
display:block;
flex:0 0 100%;
font-family:"Playfair Display", Georgia, serif;
font-size:10px;
letter-spacing:3px;
text-transform:uppercase;
color:var(--dr-ph-gold);
}
.dr-vcap span{
display:block;
color:var(--dr-ph-soft);
font-size:13px;
line-height:1.55;
} .dr-atlas-frame{
background:linear-gradient(180deg, rgba(10,12,16,0.18), rgba(10,12,16,0.72)),
linear-gradient(135deg, rgba(20, 12, 30,0.82), rgba(22,14,8,0.92));
}
.dr-atlas-bg{
position:absolute;
inset:0;
z-index:0;
background:
radial-gradient(circle at 18% 22%, rgba(201,168,76,0.16), transparent 18%),
radial-gradient(circle at 72% 18%, rgba(169, 128, 183,0.12), transparent 16%),
radial-gradient(circle at 72% 66%, rgba(201,168,76,0.10), transparent 18%),
radial-gradient(circle at 28% 72%, rgba(169, 128, 183,0.08), transparent 16%),
linear-gradient(180deg, rgba(6,10,18,0.24), rgba(6,10,18,0.74)),
url(https://darjarihla.com/wp-content/uploads/2026/04/History-of-Tunisia-Featured-Image-%E2%80%93-Carthage-Ruins-at-Sunset-1.png) center/cover no-repeat;
filter:saturate(.82) brightness(.58);
transform:scale(1.03);
}
.dr-light .dr-atlas-bg{ filter:saturate(.72) brightness(.75); }
.dr-atlas-overlay{
position:absolute;
inset:0;
z-index:1;
background:
linear-gradient(135deg, rgba(201,168,76,0.06), transparent 28%),
linear-gradient(225deg, rgba(169, 128, 183,0.08), transparent 34%),
radial-gradient(circle at 50% 50%, transparent 34%, rgba(0,0,0,0.24) 100%);
pointer-events:none;
}
.dr-atlas-routes{
position:absolute;
inset:0;
width:100%;height:100%;
z-index:2;
pointer-events:none;
}
.dr-route{
fill:none;
stroke-width:2.2;
stroke-linecap:round;
stroke-dasharray:8 12;
animation:drAtlasFlow 8s linear infinite;
opacity:.9;
}
.dr-route-gold{ stroke:url(#drRouteGold); }
.dr-route-cyan{ stroke:url(#drRouteCyan); animation-duration:10s; }
@keyframes drAtlasFlow{
from{ stroke-dashoffset:0; }
to{ stroke-dashoffset:-120; }
}
.dr-route-pulse{
fill:var(--dr-ph-cyan);
filter:drop-shadow(0 0 10px rgba(169, 128, 183,0.42));
animation:drAtlasPulse 3.4s ease-in-out infinite;
}
.dr-route-pulse.p2{ animation-delay:.8s; }
.dr-route-pulse.p3{ animation-delay:1.6s; }
@keyframes drAtlasPulse{
0%,100%{ transform:scale(1); opacity:.45; }
50%{ transform:scale(1.85); opacity:1; }
}
.dr-atlas-node{
position:absolute;
z-index:3;
min-width:110px;max-width:150px;
padding:10px 12px 9px;
border-radius:14px;
background:rgba(10,14,22,0.62);
border:1px solid var(--dr-ph-line);
box-shadow:var(--dr-ph-shadow-soft);
backdrop-filter:blur(7px);
-webkit-backdrop-filter:blur(7px);
animation:drAtlasFloat 7s ease-in-out infinite;
}
.dr-atlas-node strong{
display:block;
color:var(--dr-ph-cream);
font-family:"Playfair Display", Georgia, serif;
font-size:14px;
line-height:1.2;
margin-bottom:4px;
}
.dr-atlas-node em{
display:block;
font-style:normal;
color:var(--dr-ph-soft);
font-size:11px;
line-height:1.35;
}
.dr-atlas-node-dot{
position:absolute;
top:-6px;left:12px;
width:10px;height:10px;
border-radius:50%;
background:var(--dr-ph-gold);
box-shadow:0 0 14px rgba(201,168,76,0.34);
}
.dr-node-carthage{ top:88px; left:54px; }
.dr-node-kairouan{ top:96px; right:52px; animation-delay:.7s; }
.dr-node-dougga{ bottom:122px; left:90px; animation-delay:1.4s; }
.dr-node-sale{ bottom:86px; right:42px; animation-delay:2s; }
.dr-node-murad{ top:226px; left:50%; transform:translateX(-50%); animation-delay:1.1s; }
@keyframes drAtlasFloat{
0%,100%{ transform:translateY(0); }
50%{ transform:translateY(-8px); }
}
.dr-node-murad{animation-name:drAtlasFloatCenter;}
@keyframes drAtlasFloatCenter{
0%,100%{ transform:translateX(-50%) translateY(0); }
50%{ transform:translateX(-50%) translateY(-8px); }
}
.dr-atlas-tags{
position:absolute;
left:24px;right:24px;bottom:84px;
z-index:3;
display:flex;
gap:10px;
flex-wrap:wrap;
}
.dr-atlas-tags span{
display:inline-flex;
align-items:center;
padding:8px 11px;
border-radius:999px;
border:1px solid rgba(169, 128, 183,0.18);
background:rgba(20, 12, 30,0.34);
color:#d8ebf5;
font-family:"Playfair Display", Georgia, serif;
font-size:10px;
letter-spacing:1.6px;
text-transform:uppercase;
backdrop-filter:blur(6px);
-webkit-backdrop-filter:blur(6px);
}
.dr-atlas-tags span:nth-child(2n){
border-color:rgba(201,168,76,0.18);
color:#e6d7bf;
} .dr-ticker{
position:relative;
z-index:3;
overflow:hidden;
border-top:1px solid rgba(139, 107, 159,0.10);
border-bottom:1px solid var(--dr-ph-line);
background:linear-gradient(90deg,rgba(20, 12, 30,0.4),rgba(13,11,9,0.6),rgba(20, 12, 30,0.4));
backdrop-filter:blur(6px);
-webkit-backdrop-filter:blur(6px);
padding:11px 0;
}
.dr-light .dr-ticker{
background:linear-gradient(90deg,rgba(235,228,216,0.6),rgba(244,239,230,0.8),rgba(235,228,216,0.6));
}
.dr-ticker-track{
display:flex;
width:max-content;
animation:drTick 32s linear infinite;
}
.dr-ticker-track span{
flex-shrink:0;
font-family:"Playfair Display", Georgia, serif;
font-size:12px;
letter-spacing:3px;
text-transform:uppercase;
color:var(--dr-ph-muted);
padding:0 28px;
white-space:nowrap;
}
.dr-ticker-track span::after{
content:'â—†';
margin-left:28px;
color:var(--dr-ph-sea-wave);
opacity:.35;
font-size:6px;
vertical-align:middle;
}
.dr-ticker:hover .dr-ticker-track{ animation-play-state:paused; }
@keyframes drTick{
from{transform:translateX(0);}
to{transform:translateX(-50%);}
} .dr-body{
max-width:1180px;
margin:0 auto;
padding:42px 26px 64px;
position:relative;
z-index:2;
}
.dr-intro{
max-width:960px;
margin:0 auto 34px;
text-align:center;
color:var(--dr-ph-soft);
font-size:1.02rem;
line-height:1.95;
} .dr-rev{
opacity:0;
transform:translateY(28px);
transition:opacity .65s cubic-bezier(0.34, 1.56, 0.64, 1), transform .65s cubic-bezier(0.34, 1.56, 0.64, 1);
will-change:opacity, transform;
}
.dr-rev.dr-vis{
opacity:1;
transform:translateY(0);
}
.dr-d1{transition-delay:.06s;}
.dr-d2{transition-delay:.14s;}
.dr-d3{transition-delay:.22s;}
.dr-d4{transition-delay:.30s;} .dr-ph-wrap .dr-body .dr-rev{
animation:drRevFallback 0s 2s forwards;
}
.dr-ph-wrap .dr-body .dr-rev.dr-vis{
animation:none;
}
@keyframes drRevFallback{
to{ opacity:1; transform:translateY(0); }
} .dr-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:16px;
margin:0 0 40px;
}
.dr-card{
background:var(--dr-ph-card-bg);
border:1px solid var(--dr-ph-card-border);
border-radius:12px;
padding:22px 20px;
box-shadow:inset 0 1px 0 rgba(255,255,255,0.02), var(--dr-ph-shadow-soft);
position:relative;
overflow:hidden;
transition:border-color .35s, box-shadow .35s, transform .25s, background .5s;
}
.dr-card:hover{
border-color:var(--dr-ph-card-hover);
box-shadow:inset 0 1px 0 rgba(255,255,255,0.02), 0 16px 36px rgba(0,0,0,0.22), 0 0 24px rgba(139, 107, 159,0.06);
transform:translateY(-3px);
}
.dr-card::before{
content:'';
position:absolute;
inset:0;
background:linear-gradient(135deg,rgba(201,168,76,0.05),transparent 45%);
pointer-events:none;
transition:background .5s;
}
.dr-card:hover::before{
background:linear-gradient(135deg,rgba(139, 107, 159,0.06),transparent 45%);
}
.dr-card::after{
content:'';
position:absolute;
top:8px;left:8px;
width:18px;height:18px;
border-top:1px solid rgba(201,168,76,0.35);
border-left:1px solid rgba(201,168,76,0.35);
pointer-events:none;
opacity:.6;
transition:opacity .3s, border-color .3s;
}
.dr-card:hover::after{
opacity:1;
border-color:rgba(139, 107, 159,0.5);
}
.dr-card-label{
position:relative;z-index:2;
font-family:"Playfair Display", Georgia, serif;
font-size:10px;
letter-spacing:3px;
text-transform:uppercase;
color:var(--dr-ph-gold);
margin-bottom:10px;
}
.dr-card h3{
position:relative;z-index:2;
margin:0 0 10px;
font-family:"Playfair Display", Georgia, serif;
font-size:1.2rem;
line-height:1.35;
color:var(--dr-ph-sand);
}
.dr-card p{
position:relative;z-index:2;
margin:0;
font-size:15px;
line-height:1.8;
color:var(--dr-ph-soft);
} .dr-signal{
margin:34px 0 10px;
background:linear-gradient(135deg,var(--dr-ph-mood-gold),var(--dr-ph-mood-teal));
border:1px solid var(--dr-ph-line-strong);
border-left:3px solid var(--dr-ph-gold);
border-radius:12px;
padding:24px;
position:relative;
overflow:hidden;
}
.dr-signal::before{
content:'';
position:absolute;
top:0;left:-100%;width:100%;height:100%;
background:linear-gradient(90deg,transparent,rgba(139, 107, 159,0.04),transparent);
animation:drSweep 5s ease-in-out infinite;
pointer-events:none;
}
@keyframes drSweep{
0%{left:-100%;}
50%{left:100%;}
100%{left:100%;}
}
.dr-signal strong{
display:block;
font-family:"Playfair Display", Georgia, serif;
font-size:10px;
letter-spacing:3px;
text-transform:uppercase;
color:var(--dr-ph-gold);
margin-bottom:10px;
position:relative;
}
.dr-signal p{
margin:0;
color:var(--dr-ph-sand);
font-family:"Playfair Display", Georgia, serif;
font-size:1.08rem;
line-height:1.85;
position:relative;
} .dr-section{margin-top:46px;}
.dr-sec-label{
display:inline-block;
font-family:"Playfair Display", Georgia, serif;
font-size:10px;
letter-spacing:3px;
text-transform:uppercase;
color:var(--dr-ph-gold);
margin-bottom:12px;
border-top:1px solid rgba(201,168,76,0.28);
padding-top:9px;
}
.dr-section h2{
margin:0 0 14px;
font-family:"Playfair Display", Georgia, serif;
font-size:2rem;
line-height:1.25;
color:var(--dr-ph-sand);
}
.dr-sec-intro{
max-width:900px;
color:var(--dr-ph-soft);
line-height:1.9;
margin-bottom:24px;
} .dr-clusters{
display:grid;
gap:18px;
margin-top:10px;
}
.dr-cluster{
position:relative;
background:linear-gradient(180deg,rgba(22,16,11,0.96),rgba(12,10,8,0.98));
border:1px solid var(--dr-ph-card-border);
border-radius:14px;
padding:22px;
box-shadow:var(--dr-ph-shadow-soft);
overflow:hidden;
transition:border-color .35s ease, box-shadow .35s ease, transform .25s ease;
}
.dr-light .dr-cluster{
background:linear-gradient(180deg,rgba(255,252,246,0.96),rgba(244,239,230,0.98));
}
.dr-cluster::before{
content:'';
position:absolute;
inset:0;
pointer-events:none;
background:linear-gradient(135deg,rgba(201,168,76,0.05),transparent 45%);
transition:background .6s ease;
}  .dr-cluster-tunisia{
background:linear-gradient(180deg,rgba(32,24,14,0.96),rgba(18,14,10,0.98));
}
.dr-cluster-tunisia::before{
background:
linear-gradient(135deg,rgba(201,168,76,0.08),transparent 45%),
radial-gradient(circle at 90% 80%, rgba(176,123,51,0.06), transparent 30%);
}
.dr-cluster-tunisia .dr-cluster-kicker{ color:var(--dr-ph-gold); }
.dr-cluster-tunisia .dr-node-label{ color:var(--dr-ph-gold); }
.dr-cluster-tunisia .dr-node::before{
background:linear-gradient(90deg,rgba(201,168,76,0.6),rgba(176,123,51,0.4),transparent);
}
.dr-light .dr-cluster-tunisia{
background:linear-gradient(180deg,rgba(255,252,246,0.96),rgba(248,242,232,0.98));
} .dr-cluster-maritime{
background:linear-gradient(180deg,rgba(14,24,36,0.96),rgba(10,18,28,0.98));
}
.dr-cluster-maritime::before{
background:
linear-gradient(135deg,rgba(139, 107, 159,0.06),transparent 45%),
radial-gradient(circle at 80% 70%, rgba(60, 40, 80,0.08), transparent 30%);
}
.dr-cluster-maritime .dr-cluster-kicker{ color:var(--dr-ph-sea-wave); }
.dr-cluster-maritime .dr-node-label{ color:var(--dr-ph-sea-wave); }
.dr-cluster-maritime .dr-node::before{
background:linear-gradient(90deg,rgba(139, 107, 159,0.6),rgba(60, 40, 80,0.4),transparent);
}
.dr-cluster-maritime .dr-cluster-badge{
border-color:rgba(139, 107, 159,0.28);
}
.dr-light .dr-cluster-maritime{
background:linear-gradient(180deg,rgba(240,248,252,0.96),rgba(232,244,248,0.98));
} .dr-cluster-diaspora{
background:linear-gradient(180deg,rgba(28,22,18,0.96),rgba(22,18,14,0.98));
}
.dr-cluster-diaspora::before{
background:
linear-gradient(135deg,rgba(186,156,120,0.06),transparent 45%),
radial-gradient(circle at 70% 60%, rgba(166,140,108,0.05), transparent 30%);
}
.dr-cluster-diaspora .dr-cluster-kicker{ color:#c8a878; }
.dr-cluster-diaspora .dr-node-label{ color:#c8a878; }
.dr-cluster-diaspora .dr-node::before{
background:linear-gradient(90deg,rgba(186,156,120,0.5),rgba(166,140,108,0.3),transparent);
}
.dr-light .dr-cluster-diaspora{
background:linear-gradient(180deg,rgba(252,248,242,0.96),rgba(248,244,236,0.98));
} .dr-cluster-bridge{
background:linear-gradient(180deg,rgba(20,22,28,0.96),rgba(14,16,22,0.98));
}
.dr-cluster-bridge::before{
background:
linear-gradient(135deg,rgba(140,160,180,0.05),transparent 45%);
}
.dr-cluster-bridge .dr-cluster-kicker{ color:var(--dr-ph-muted-ui); }
.dr-cluster-bridge .dr-node-label{ color:var(--dr-ph-muted-ui); }
.dr-cluster-bridge .dr-node::before{
background:linear-gradient(90deg,rgba(140,160,180,0.4),rgba(120,140,160,0.2),transparent);
}
.dr-light .dr-cluster-bridge{
background:linear-gradient(180deg,rgba(246,248,252,0.96),rgba(240,244,248,0.98));
} .dr-cluster:hover{
border-color:var(--dr-ph-card-hover);
box-shadow:0 18px 36px rgba(0,0,0,0.22), 0 0 22px rgba(139, 107, 159,0.04);
transform:translateY(-2px);
}
.dr-cluster-head{
position:relative;z-index:2;
display:flex;
justify-content:space-between;
align-items:flex-start;
gap:14px;
margin-bottom:12px;
flex-wrap:wrap;
}
.dr-cluster-kicker{
font-family:"Playfair Display", Georgia, serif;
font-size:10px;
letter-spacing:3px;
text-transform:uppercase;
color:var(--dr-ph-cyan);
margin-bottom:8px;
}
.dr-cluster h3{
margin:0;
font-family:"Playfair Display", Georgia, serif;
font-size:1.5rem;
line-height:1.25;
color:var(--dr-ph-text);
} .dr-completion{
position:relative;
width:38px;
height:38px;
flex-shrink:0;
}
.dr-completion svg{
width:100%;
height:100%;
transform:rotate(-90deg);
}
.dr-completion-bg{
fill:none;
stroke:var(--dr-ph-line);
stroke-width:3;
}
.dr-completion-fill{
fill:none;
stroke:var(--dr-ph-gold);
stroke-width:3;
stroke-linecap:round;
transition:stroke-dashoffset 1.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.dr-cluster-maritime .dr-completion-fill{ stroke:var(--dr-ph-sea-wave); }
.dr-cluster-diaspora .dr-completion-fill{ stroke:#c8a878; }
.dr-cluster-bridge .dr-completion-fill{ stroke:var(--dr-ph-muted-ui); }
.dr-completion-label{
position:absolute;
inset:0;
display:flex;
align-items:center;
justify-content:center;
font-family:"Playfair Display", Georgia, serif;
font-size:10px;
font-weight:700;
color:var(--dr-ph-text);
}
.dr-cluster-badge{
display:inline-flex;
align-items:center;
gap:8px;
padding:8px 12px;
border-radius:999px;
font-family:"Playfair Display", Georgia, serif;
font-size:10px;
letter-spacing:2px;
text-transform:uppercase;
color:var(--dr-ph-text);
border:1px solid rgba(139, 107, 159,0.22);
background:rgba(20, 12, 30,0.44);
backdrop-filter:blur(6px);
-webkit-backdrop-filter:blur(6px);
}
.dr-cluster-badge-wip{
border-color:rgba(201,168,76,0.22);
background:rgba(40,26,10,0.34);
}
.dr-light .dr-cluster-badge{
background:rgba(226,220,208,0.6);
}
.dr-cluster-intro{
position:relative;z-index:2;
color:var(--dr-ph-soft);
line-height:1.9;
margin-bottom:18px;
max-width:980px;
}
.dr-cluster-grid{
position:relative;z-index:2;
display:grid;
grid-template-columns:repeat(2,1fr);
gap:14px;
} .dr-beacon{
position:relative;
}
.dr-beacon::after{
content:'';
position:absolute;
top:12px;
right:12px;
width:10px;
height:10px;
border-radius:50%;
background:var(--dr-ph-gold);
box-shadow:0 0 12px rgba(201,168,76,0.4);
animation:drBeacon 2s ease-in-out infinite;
}
@keyframes drBeacon{
0%,100%{ box-shadow:0 0 12px rgba(201,168,76,0.4); transform:scale(1); }
50%{ box-shadow:0 0 22px rgba(201,168,76,0.6); transform:scale(1.3); }
} .dr-node{
position:relative;
background:var(--dr-ph-node-bg);
border:1px solid var(--dr-ph-node-border);
border-radius:12px;
padding:18px;
min-height:150px;
overflow:hidden;
transition:border-color .3s ease, box-shadow .3s ease, transform .25s ease;
}
.dr-node:hover{
border-color:var(--dr-ph-card-hover);
box-shadow:0 0 16px rgba(139, 107, 159,0.04);
transform:translateY(-2px);
}
.dr-node::before{
content:'';
position:absolute;
top:0;left:0;right:0;height:2px;
background:linear-gradient(90deg,rgba(139, 107, 159,0.6),rgba(201,168,76,0.5),transparent);
}
.dr-node-pillar{
border-color:rgba(139, 107, 159,0.22);
box-shadow:0 0 18px rgba(139, 107, 159,0.05);
}
.dr-node-planned{ opacity:.88; }
.dr-node-label{
font-family:"Playfair Display", Georgia, serif;
font-size:9px;
letter-spacing:2.5px;
text-transform:uppercase;
color:var(--dr-ph-gold);
margin-bottom:10px;
}
.dr-node-title,
.dr-node span.dr-node-title{
display:block;
margin:0 0 10px;
font-family:"Playfair Display", Georgia, serif;
font-size:1.08rem;
line-height:1.35;
color:var(--dr-ph-text);
text-decoration:none;
transition:color .25s ease;
border-bottom:none;
}
a.dr-node-title:hover{
color:var(--dr-ph-cream);
border-bottom:none;
}
.dr-node p{
margin:0 0 14px;
color:var(--dr-ph-soft);
line-height:1.75;
font-size:14px;
}
.dr-node-status{
display:inline-block;
padding:6px 10px;
border-radius:999px;
font-family:"Playfair Display", Georgia, serif;
font-size:9px;
letter-spacing:2px;
text-transform:uppercase;
color:var(--dr-ph-muted-ui);
border:1px solid var(--dr-ph-line);
background:rgba(12,9,6,0.4);
}
.dr-light .dr-node-status{
background:rgba(244,239,230,0.6);
} .dr-streams{
display:grid;
grid-template-columns:1.15fr .85fr;
gap:18px;
margin-top:28px;
}
.dr-sbox{
background:var(--dr-ph-card-bg);
border:1px solid var(--dr-ph-card-border);
border-radius:12px;
padding:22px;
min-height:100%;
transition:border-color .3s, box-shadow .3s;
}
.dr-sbox:hover{
border-color:var(--dr-ph-card-hover);
box-shadow:0 0 16px rgba(139, 107, 159,0.04);
}
.dr-sbox h3{
margin:0 0 12px;
font-family:"Playfair Display", Georgia, serif;
font-size:1.28rem;
color:var(--dr-ph-sand);
}
.dr-sbox p{
color:var(--dr-ph-soft);
line-height:1.85;
margin:0 0 12px;
}
.dr-list{
margin:0;
padding-left:18px;
color:var(--dr-ph-sand);
}
.dr-list li{
margin:0 0 10px;
line-height:1.75;
}
.dr-list a{
color:var(--dr-ph-sea-wave);
text-decoration:none;
border-bottom:1px solid rgba(139, 107, 159,0.25);
transition:border-color .2s, color .2s;
}
.dr-list a:hover{
color:var(--dr-ph-cream);
border-color:rgba(139, 107, 159,0.55);
} .dr-qwrap{margin-top:34px;padding-top:8px;}
.dr-qhead{
display:flex;
justify-content:space-between;
align-items:flex-end;
gap:16px;
margin-bottom:18px;
flex-wrap:wrap;
}
.dr-qhead h3{
margin:0;
font-family:"Playfair Display", Georgia, serif;
font-size:1.5rem;
color:var(--dr-ph-sand);
}
.dr-qhead p{
margin:0;
color:var(--dr-ph-muted);
line-height:1.8;
max-width:640px;
}
.dr-archive{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:16px;
margin-top:12px;
}
.dr-alink{
display:block;
text-decoration:none;
color:inherit;
background:var(--dr-ph-card-bg);
border:1px solid var(--dr-ph-card-border);
border-radius:12px;
overflow:hidden;
box-shadow:var(--dr-ph-shadow-soft);
transition:transform .25s, border-color .25s, box-shadow .25s;
position:relative;
}
.dr-alink:hover{
transform:translateY(-4px);
border-color:var(--dr-ph-card-hover);
box-shadow:0 20px 40px rgba(0,0,0,0.26), 0 0 20px rgba(139, 107, 159,0.06);
}
.dr-alink-top{
position:relative;
height:220px;
overflow:hidden;
border-bottom:1px solid var(--dr-ph-line);
background:var(--dr-ph-bg);
}
.dr-alink-top img{
width:100%;height:100%;
object-fit:cover;
display:block;
transform:scale(1.01);
transition:transform .45s, filter .45s;
filter:saturate(.95) brightness(.86);
}
.dr-alink:hover .dr-alink-top img{
transform:scale(1.06);
filter:saturate(1.02) brightness(.95);
}
.dr-alink-top::after{
content:'';
position:absolute;
inset:0;
background:linear-gradient(180deg,rgba(12,9,6,0.10),rgba(12,9,6,0.18) 36%,rgba(12,9,6,0.78)),
linear-gradient(135deg,rgba(139, 107, 159,0.06),transparent 46%);
pointer-events:none;
transition:background .4s;
}
.dr-alink:hover .dr-alink-top::after{
background:linear-gradient(180deg,rgba(20, 12, 30,0.15),rgba(12,9,6,0.18) 36%,rgba(12,9,6,0.78)),
linear-gradient(135deg,rgba(139, 107, 159,0.10),transparent 46%);
}
.dr-light .dr-alink-top::after{
background:linear-gradient(180deg,rgba(244,239,230,0.05),rgba(244,239,230,0.10) 36%,rgba(244,239,230,0.60));
}
.dr-alink-badge{
position:absolute;left:14px;top:14px;z-index:2;
font-family:"Playfair Display", Georgia, serif;
font-size:10px;
letter-spacing:2px;
text-transform:uppercase;
color:#f5efe3;
background:rgba(20, 12, 30,0.62);
border:1px solid rgba(139, 107, 159,0.22);
backdrop-filter:blur(6px);
-webkit-backdrop-filter:blur(6px);
padding:8px 10px;
border-radius:999px;
}
.dr-alink-body{padding:18px 18px 20px;}
.dr-alink-kicker{
font-family:"Playfair Display", Georgia, serif;
font-size:10px;
letter-spacing:2px;
text-transform:uppercase;
color:var(--dr-ph-sea-wave);
margin-bottom:10px;
}
.dr-alink h3{
margin:0 0 10px;
font-family:"Playfair Display", Georgia, serif;
font-size:1.22rem;
line-height:1.35;
color:var(--dr-ph-sand);
}
.dr-alink p{
margin:0;
color:var(--dr-ph-soft);
line-height:1.8;
font-size:14px;
}
.dr-alink-date{
margin-top:14px;
color:var(--dr-ph-muted);
font-family:"Playfair Display", Georgia, serif;
font-size:11px;
letter-spacing:1.5px;
text-transform:uppercase;
} .dr-divider{
display:flex;
align-items:center;
gap:16px;
margin:48px 0 8px;
}
.dr-divider::before,
.dr-divider::after{
content:'';
flex:1;
height:1px;
background:linear-gradient(90deg,transparent,rgba(139, 107, 159,0.18),transparent);
}
.dr-divider-dot{
width:6px;height:6px;
border-radius:50%;
background:var(--dr-ph-sea-wave);
box-shadow:0 0 10px rgba(139, 107, 159,0.25);
}
.dr-footer{
margin-top:34px;
text-align:center;
color:var(--dr-ph-muted);
font-family:"Playfair Display", Georgia, serif;
font-size:11px;
letter-spacing:2px;
text-transform:uppercase;
} @media (prefers-reduced-motion: reduce){
.dr-rev{
opacity:1 !important;
transform:none !important;
}
.dr-gate{ display:none !important; }
}  @media (max-width:1080px){
.dr-hero-grid{grid-template-columns:1fr;}
.dr-copy::after{display:none;}
.dr-visual{padding:0 24px 30px;}
.dr-vframe{width:min(100%,560px);max-width:560px;}
.dr-fstrip{grid-template-columns:1fr;}
}
@media (max-width:1000px){
.dr-grid{grid-template-columns:1fr;}
.dr-streams{grid-template-columns:1fr;}
.dr-cluster-grid{grid-template-columns:1fr;}
.dr-amb-map,.dr-amb-arch,.dr-amb-orbit,.dr-amb-net{opacity:.18;transform:scale(.82);}
}
@media (max-width:960px){
} @media (max-width:680px){
.dr-copy{padding:56px 22px 34px;}
.dr-body{padding:34px 18px 54px;}
.dr-title{font-size:2.15rem;}
.dr-visual{padding:0 18px 24px;}
.dr-vframe{width:100%;max-width:none;aspect-ratio:1/1.08;}
.dr-vcap{left:16px;right:16px;bottom:14px;}
.dr-vcap span{font-size:12px;line-height:1.5;}
.dr-alink-top{height:190px;}
.dr-ticker-track span{font-size:11px;letter-spacing:2px;padding:0 18px;}
.dr-cluster{padding:18px;}
.dr-cluster h3{font-size:1.28rem;}
.dr-node{padding:16px;min-height:auto;} .dr-spine{
position:fixed;
left:0;
top:0;
right:0;
width:100%;
height:3px;
transform:none;
border-radius:0;
}
.dr-spine-fill{
bottom:auto;
top:0;
left:0;
width:0%;
height:100%;
transition:width .1s linear;
}
.dr-spine-nodes{ display:none; } .dr-mode-toggle{
top:auto;
bottom:20px;
right:16px;
} .dr-atlas-node{min-width:92px;max-width:112px;padding:8px 9px 8px;}
.dr-atlas-node strong{font-size:12px;}
.dr-atlas-node em{font-size:10px;}
.dr-node-carthage{top:72px;left:24px;}
.dr-node-kairouan{top:74px;right:20px;}
.dr-node-dougga{bottom:128px;left:30px;}
.dr-node-sale{bottom:96px;right:18px;}
.dr-node-murad{top:212px;}
.dr-atlas-tags{left:16px;right:16px;bottom:78px;gap:8px;}
.dr-atlas-tags span{font-size:9px;padding:7px 9px;} .dr-gate-l,.dr-gate-r{
transition-duration:.6s;
}
} @media (max-width:400px){
.dr-copy{padding:48px 16px 28px;}
.dr-title{font-size:1.9rem;}
.dr-sub{font-size:1rem;}
.dr-cluster{padding:14px;}
.dr-node{padding:14px;}
.dr-body{padding:28px 14px 44px;}
} .dr-atlas-bg{ z-index:0; }
.dr-atlas-overlay{ z-index:1; }
.dr-atlas-routes{ z-index:2; }
.dr-atlas-node,
.dr-atlas-tags,
.dr-vcap{ z-index:3; }