/* VelvetPixel - Variant D: Centered Two-Column (Sidebar + Content) */
/* Centers the entire layout group. Sidebar stays vertical; content column aligned right of it. */
/* Namespace: vp- */

:root{
  /* Tunable layout tokens */
  --vp-sidebar: 260px;
  --vp-gutter: 40px;
  --vp-content: 860px;
  --vp-layout: calc(var(--vp-sidebar) + var(--vp-gutter) + var(--vp-content));

  --vp-primary: #7A1B5E;        /* rich red-purple */
  --vp-ink: #F5F3F7;
  --vp-muted: #CFC7D8;
  --vp-paper: #0F0A12;
  --vp-surface: #19111E;
  --vp-line: rgba(255,255,255,0.22);
  --vp-line-dim: rgba(255,255,255,0.12);
}

*{ box-sizing: border-box }
html,body{
  margin:0; padding:0; color:var(--vp-ink);
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,0.02) 0 3px, rgba(255,255,255,0.00) 3px 8px),
    radial-gradient(1200px 800px at 10% -10%, #2a1233, var(--vp-paper));
  font-family: Georgia, Cambria, "Times New Roman", Times, serif;
  line-height: 1.85; letter-spacing: .1px;
}
img{ max-width:100%; height:auto; display:block }

/* Header: brand strip (centered width) */
.vp-header{
  position: sticky; top:0; z-index:30;
  background:#140A16; border-bottom:1px solid var(--vp-line-dim);
}
.vp-brand{ display:flex; align-items:center; gap:12px; padding:10px 18px;
  max-width: var(--vp-layout); margin: 0 auto; }
.vp-brand img{ width:210px; height:auto; filter:none }

/* === Centered LEFT SIDEBAR ===
   We position it relative to the viewport center, using the total layout width.
*/
.vp-nav{
  position: fixed;
  top: 64px;
  left: calc(50% - (var(--vp-layout) / 2)); /* centers the group */
  width: var(--vp-sidebar);
  height: calc(100vh - 64px);
  overflow:auto;
  padding: 18px;
  background: linear-gradient(180deg, #150a19, #130816);
  border-right: 1px solid var(--vp-line-dim);
  display: flex; flex-direction: column; gap: 8px;
}
.vp-nav a{
  display:block; padding:10px 12px; border-radius:0;
  background: transparent; color: var(--vp-muted);
  border:1px solid transparent;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.vp-nav a:hover{ background: rgba(255,255,255,0.06); border-color: var(--vp-line-dim); color:#fff }
.vp-nav a.vp-active{ background: var(--vp-primary); color:#fff; border-color: transparent }

/* Content container: positioned to start after centered sidebar + gutter */
.vp-container{
  max-width: var(--vp-content);
  margin: 0; /* we position via left to align to centered group */
  padding: 26px 22px;
  position: relative;
  left: calc(50% - (var(--vp-layout) / 2) + var(--vp-sidebar) + var(--vp-gutter));
}

/* Typography */
h1{ font-size:2.05rem; margin:16px 0 8px 0; letter-spacing:.15px }
.dek{ font-size:1.06rem; color:var(--vp-muted); margin:0 0 12px 0 }

/* Banner */
.vp-banner{
  border:1px solid var(--vp-line); border-radius:0; overflow:hidden;
  margin: 6px 0 14px 0; box-shadow:none;
}
.vp-banner figcaption{ font-size:.95rem; color:var(--vp-muted); padding:8px 12px; background:rgba(255,255,255,0.03) }

/* Cards */
.vp-card{
  background: var(--vp-surface);
  border:1px solid var(--vp-line-dim);
  border-radius:0;
  padding:20px; margin:18px 0; box-shadow:none;
}
.vp-card h2{ font-size:1.18rem; margin:4px 0 }
.vp-card h3{ font-size:1.0rem; margin:2px 0; color:var(--vp-muted) }

/* Rule */
.vp-rule{ height:1px; background: var(--vp-line); margin:24px 0 }

/* Footer: align with centered content column */
.vp-footer{
  border-top:1px solid var(--vp-line-dim); color:var(--vp-muted);
  text-align:left; padding:20px 22px;
  max-width: var(--vp-layout);
  margin: 24px auto 0 auto;            /* center the footer container */
  position: relative;
  padding-left: calc(var(--vp-sidebar) + var(--vp-gutter) + 22px); /* line up text under content column */
}

/* Site-wide paragraph justification */
article p, section p, main p, p {
  text-align: justify !important;
  text-justify: inter-word !important;
  -webkit-hyphens: auto !important;
  -ms-hyphens: auto !important;
  hyphens: auto !important;
}

/* Responsive: collapse to top nav when narrow */
@media (max-width: 1100px){
  .vp-nav{
    position: static; width: auto; height: auto;
    left: 0; top: 0; margin: 0 auto; max-width: var(--vp-layout);
    flex-direction: row; gap: 10px; padding: 10px 18px; border-right: none; border-top:1px solid var(--vp-line-dim);
  }
  .vp-container{
    position: static;
    max-width: min(var(--vp-layout), 92vw);
    margin: 0 auto; padding: 22px 18px;
  }
  .vp-footer{ margin:24px auto 0 auto; text-align:center; padding-left:22px }
}

/* =========================
   MEDIA PROTECTION ADD-ONS
   ========================= */
img, picture, svg, canvas, video{
  -webkit-user-drag:none !important;
  user-drag:none !important;
  -webkit-touch-callout:none !important;  /* iOS long-press save menu */
  -webkit-user-select:none !important;
  -moz-user-select:none !important;
  -ms-user-select:none !important;
  user-select:none !important;
  -webkit-tap-highlight-color:transparent;
}
/* Reduce touch callout on media wrappers as well */
figure, .vp-banner{ -webkit-touch-callout:none }

/* --- Final Footer Refinement (VelvetPixel / CultureChronicle Harmonization) --- */

/* Override global justification */
.vp-footer,
.vp-footer * {
  text-align: center !important;
}

/* Footer layout: aligned with centered content column, luminous deep-plum tone */
.vp-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 28px;
  padding-bottom: 28px;
  background: var(--vp-surface);
  border-top: 1px solid var(--vp-line-dim);
  color: var(--vp-muted);
  box-shadow: 0 -4px 18px rgba(0,0,0,0.25) inset;
  max-width: var(--vp-layout);
  margin: 26px auto 0 auto;
  padding-left: calc(var(--vp-sidebar) + var(--vp-gutter) + 22px);
}

/* Metrolagu Network (VelvetPixel / CultureChronicle palette) */
.metrolagu-network {
  background: none;
  color: var(--vp-ink);
  padding: 20px 0;
}

.network-container {
  max-width: var(--vp-content);
  margin: 0 auto;
  padding: 0 22px;
}

.metrolagu-network h3 {
  font-size: 1.15em;
  margin-bottom: 10px;
  color: #B57BA6; /* soft orchid accent */
  font-weight: 600;
  text-align: center;
  text-shadow: 0 0 4px rgba(181,123,166,0.25);
}

.metrolagu-network p {
  color: var(--vp-muted);
  margin-bottom: 10px;
  line-height: 1.7;
  text-align: center;
}

/* Network links */
.network-links {
  text-align: center;
}

.network-links a {
  color: var(--vp-ink);
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,0.15);
  transition: color 0.3s ease, border-color 0.3s ease, opacity 0.3s ease;
}

.network-links a:hover {
  color: #B57BA6;
  border-bottom-color: #B57BA6;
  opacity: 0.85;
}

/* Copyright pill refinement */
.vp-footer .copyright,
.site-footer .copyright {
  display: inline-block;
  margin: 18px auto 6px auto;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.4px;
  color: var(--vp-ink);
  background: rgba(25,17,30,0.85);
  padding: 8px 22px;
  border: 1.5px solid rgba(255,255,255,0.22);
  border-radius: 999px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.3);
  transition: all 0.3s ease;
}

/* Hover tone: soft violet bloom */
.vp-footer .copyright:hover {
  background: rgba(181,123,166,0.12);
  color: var(--vp-primary);
  border-color: rgba(181,123,166,0.45);
  box-shadow: 0 3px 16px rgba(181,123,166,0.25);
  transform: translateY(-1px);
}

/* Embedded link inherits tone */
.vp-footer .copyright a {
  color: inherit !important;
  text-decoration: none !important;
  transition: opacity 0.3s ease;
}

/* Responsive footer alignment fix */
@media (max-width: 1100px){
  .vp-footer {
    padding-left: 22px;
    text-align: center;
  }
}