/* ═══════════════════════════════════════════════════════════════
   DARJA RIHLA · PHILOSOPHY & LEGACY · THEME PAGE v2
   Full redesign: scroll choreography, cluster moods, light/dark,
   spring reveals, progress spine, completion rings, entry gate
   ═══════════════════════════════════════════════════════════════ */

/* ── ROOT VARIABLES ── */
:root {
  --dr-ph-bg: var(--dr-core-bg);
  --dr-ph-surface: rgba(18, 12, 28, 0.92);
  --dr-ph-surface-soft: rgba(17, 11, 22, 0.72);

  --dr-ph-purple-deep: #1a0a2e;
  --dr-ph-purple-royal: #4a1f8a;
  --dr-ph-purple-muted: #a78bfa;

  --dr-ph-gold: var(--dr-semantic-accent-2);

  --dr-ph-text: var(--dr-core-text);
  --dr-ph-text-muted: var(--dr-core-text-muted);
  --dr-ph-border: var(--dr-core-border);

  --dr-ph-glow-purple: 0 0 0 1px rgba(167, 139, 250, 0.14), 0 0 34px rgba(167, 139, 250, 0.08);
  --dr-ph-glow-gold: var(--dr-glow-gold);

  --dr-ph-section-overlay: rgba(15, 8, 25, 0.52);
  --dr-ph-card-overlay: rgba(21, 12, 29, 0.82);
  --dr-ph-quote-accent: var(--dr-ph-gold);
}

/* ── ROOT VARIABLES ── */
:root{
  /* -- dark mode (default) -- */
  --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;

  /* cluster mood accents */
  --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);

  /* scroll-driven properties (set by JS) */
  --dr-scrollY:0;
  --dr-scrollP:0;
  --dr-ph-temp-h:38;
  --dr-ph-temp-s:62%;
  --dr-ph-temp-l:8%;

  /* card surface */
  --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);

  /* node surface */
  --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);

  /* toggle */
  --dr-ph-toggle-bg:rgba(201,168,76,0.10);
  --dr-ph-toggle-border:rgba(201,168,76,0.24);
  --dr-ph-toggle-icon:"☾";
}

/* ── HIDE VISUAL ENGINE DUPLICATES ──
   PHILOSOPHY & LEGACY has its own progress spine and cursor systems.
   Hide the global visual-engine versions to prevent overlay conflicts. */
.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;
}

/* ── LIGHT MODE ── */
.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:"☀";
}

/* ── PAGE ── */
/* page title from wp:post-title */
::selection{
  background:rgba(169, 128, 183,0.18);
  color:#fff;
}
.dr-light ::selection{
  background:rgba(138,110,47,0.18);
  color:#1a1208;
}

/* ── ENTRY GATE ── */
.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; }

/* ── LIGHT/DARK TOGGLE ── */
.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);
}

/* ── SCROLL PROGRESS SPINE ── */
.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);
}

/* ── BUILD STATUS COUNTER ── */
.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; }

/* ── WRAP (main container) ── */
.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%); }

/* ── GRAIN / SCANLINE ── */
.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;}
}

/* ── OCEAN ── */
.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; }

/* ── AMBIENT SVGs ── */
.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;}}

/* ── HERO / THRESHOLD ── */
.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;
}

/* ── LIVING SCRIPT HEADER ── */
.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;
}

/* ── VISUAL / ATLAS FRAME ── */
.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;
}

/* constellation */
@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;}}

/* pillar visual */
.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;
}

/* ── ATLAS FRAME ── */
.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;
}

/* ── TICKER ── */
.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%);}
}

/* ── BODY ── */
.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;
}

/* ── REVEAL SYSTEM (spring-driven via JS, CSS fallback) ── */
.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;}

/* fallback: auto-reveal after 2s if JS fails */
.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); }
}

/* ── INTRO CARDS ── */
.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);
}

/* ── SIGNAL ── */
.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;
}

/* ── SECTIONS ── */
.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;
}

/* ── CLUSTERS ── */
.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;
}

/* ── CLUSTER MOODS ── */

/* Tunisia / Civilization — warm stone */
.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));
}

/* Maritime Borderlands — sea chart */
.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));
}

/* Diaspora / Belonging — warm textile */
.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));
}

/* Bridge essays — connecting threads */
.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));
}

/* cluster hover (all moods) */
.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);
}

/* ── COMPLETION RINGS ── */
.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;
}

/* ── BUILD PULSE BEACON ── */
.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); }
}

/* ── NODES ── */
.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);
}

/* ── STREAMS ── */
.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);
}

/* ── ARTICLE CARDS ── */
.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;
}

/* ── ANIMATED ALINK HEADER SYSTEM ── */
.dr-ph-wrap .dr-alink-top {
  position: relative;
  height: 220px;
  overflow: hidden;
  border-bottom: 1px solid var(--dr-ph-line);
  background:
    radial-gradient(circle at 30% 20%, rgba(176, 123, 51, 0.08), transparent 40%),
    radial-gradient(circle at 70% 80%, rgba(201, 168, 76, 0.06), transparent 35%),
    radial-gradient(circle at 50% 50%, rgba(139, 31, 46, 0.05), transparent 50%),
    linear-gradient(135deg, rgba(12, 9, 6, 0.9), rgba(20, 16, 13, 0.95));
  animation: dr-ph-grid-drift 20s linear infinite;
}

.dr-ph-wrap .dr-alink-top::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 120px;
  height: 120px;
  border: 1px solid rgba(201, 168, 76, 0.2);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: dr-ph-orbit 8s linear infinite;
  pointer-events: none;
}

.dr-ph-wrap .dr-alink-top::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 80px;
  height: 80px;
  border: 1px solid rgba(176, 123, 51, 0.15);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: dr-ph-orbit-reverse 12s linear infinite;
  pointer-events: none;
}

.dr-ph-wrap .dr-alink {
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.26), 0 0 20px rgba(139, 107, 159, 0.06);
  transition: box-shadow 0.4s ease, transform 0.4s ease;
}

.dr-ph-wrap .dr-alink:hover {
  box-shadow: 0 28px 56px rgba(0, 0, 0, 0.32), 0 0 28px rgba(201, 168, 76, 0.08);
  transform: translateY(-2px);
}

.dr-ph-wrap .dr-alink:hover .dr-alink-top::before {
  border-color: rgba(201, 168, 76, 0.3);
  animation-duration: 6s;
}

.dr-ph-wrap .dr-alink:hover .dr-alink-top::after {
  border-color: rgba(176, 123, 51, 0.25);
  animation-duration: 9s;
}

/* Keyframes */
@keyframes dr-ph-grid-drift {
  0% { background-position: 0 0; }
  100% { background-position: 20px 20px; }
}

@keyframes dr-ph-orbit {
  0% { transform: translate(-50%, -50%) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes dr-ph-orbit-reverse {
  0% { transform: translate(-50%, -50%) rotate(360deg); }
  100% { transform: translate(-50%, -50%) rotate(0deg); }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .dr-ph-wrap .dr-alink-top {
    animation: none;
  }
  .dr-ph-wrap .dr-alink-top::before,
  .dr-ph-wrap .dr-alink-top::after {
    animation: none;
  }
  .dr-ph-wrap .dr-alink {
    transition: none;
  }
  .dr-ph-wrap .dr-alink:hover {
    transform: none;
  }
}

/* Responsive adjustments */
@media (max-width: 680px) {
  .dr-ph-wrap .dr-alink-top {
    height: 190px;
    animation-duration: 30s;
  }
  .dr-ph-wrap .dr-alink-top::before {
    width: 100px;
    height: 100px;
    animation-duration: 12s;
  }
  .dr-ph-wrap .dr-alink-top::after {
    width: 70px;
    height: 70px;
    animation-duration: 18s;
  }
}

/* ── DIVIDER / FOOTER ── */
.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;
}

/* ═══ REDUCED MOTION ═══ */
@media (prefers-reduced-motion: reduce){
.dr-rev{
    opacity:1 !important;
    transform:none !important;
  }
  .dr-gate{ display:none !important; }
}

/* ═══ RESPONSIVE ═══ */

/* tablet */
@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){
}

/* mobile */
@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;}

  /* spine becomes top bar on mobile */
  .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; }

  /* toggle repositioned */
  .dr-mode-toggle{
    top:auto;
    bottom:20px;
    right:16px;
  }

  /* atlas nodes smaller */
  .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;}

  /* entry gate faster on mobile */
  .dr-gate-l,.dr-gate-r{
    transition-duration:.6s;
  }
}

/* small mobile */
@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;}
}

/* ── Z-INDEX STACK ── */
.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; }