/* ==========================================================================
   Arcelian Blog — Standalone stylesheet (works without global.css)
   - Includes brand tokens + dark mode + full blog styles
   ========================================================================== */

/* ------------ Brand tokens (light) ------------ */
:root {
  /* Core brand */
  --color-arcelian-primary:     #2d4c69;   /* Steel Credence */
  --color-arcelian-secondary:   #3d2e26;   /* Deep Terra */
  --color-arcelian-accent:      #d1802f;   /* Impact Amber */
  --color-arcelian-highlight:   #e5bb65;   /* Insight Gold */

  /* Neutrals & surfaces */
  --color-arcelian-muted:       #5e6c71;   /* Iron Smoke */
  --color-arcelian-background:  #f1d8a8;   /* Canvas Ochre */
  --color-arcelian-light:       #F5F7FA;   /* Arctic Fog */
  --color-arcelian-dark:        #2B2F33;   /* Graphite Depth */
  --color-arcelian-card:        #FFFFFF;   /* Clean White */
  --color-arcelian-text:        #1A1A1A;   /* Charcoal */
  --color-arcelian-border:      #E0E0E0;   /* Divider Mist */

  /* Semantic */
  --color-arcelian-action:      #b74126;   /* Velocity Ember */
  --color-arcelian-warning:     #7f3922;   /* Change Copper */
  --color-arcelian-link:        #d8a051;   /* Trust Bronze */
  --color-arcelian-accent2:     #a55b25;   /* Global Sienna */

  /* Data viz accents */
  --color-arcelian-teal:        #3B7D8B;
  --color-arcelian-sand:        #E8C892;

  /* Aliases */
  --color-arcelian-iron-smoke:       var(--color-arcelian-dark);
  --color-arcelian-arctic-fog:       var(--color-arcelian-light);
  --color-arcelian-steel-indigo:     var(--color-arcelian-primary);
  --color-arcelian-mineral-graphite: var(--color-arcelian-secondary);
  --color-arcelian-alloy-teal:       var(--color-arcelian-accent);
  --color-arcelian-golden-ochre:     var(--color-arcelian-highlight);

  /* On-colors */
  --color-arcelian-on-primary:  #F5F7FA;
  --color-arcelian-on-dark:     #F5F7FA;
  --color-arcelian-on-light:    #1A1A1A;
  --color-arcelian-on-accent:   #101214;

  /* Focus ring */
  --color-arcelian-focus-ring:  0 0 0 3px rgba(229, 187, 101, 0.45);
}

/* ------------ Brand tokens (dark) ------------ */
html[data-theme="dark"] {
  --color-arcelian-background: #121317;
  --color-arcelian-card:       #181A1F;
  --color-arcelian-text:       #F5F7FA;
  --color-arcelian-border:     #2A2E34;
  --color-arcelian-muted:      #9AA5AE;
  --color-arcelian-highlight:  #f0c875;
  --color-arcelian-on-primary: #F5F7FA;
  --color-arcelian-on-light:   #F5F7FA;
  --color-arcelian-on-accent:  #0B0C0E;
}

/* Optional: auto-dark based on OS preference */
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) {
    --color-arcelian-background: #121317;
    --color-arcelian-card:       #181A1F;
    --color-arcelian-text:       #F5F7FA;
    --color-arcelian-border:     #2A2E34;
    --color-arcelian-muted:      #9AA5AE;
    --color-arcelian-highlight:  #f0c875;
    --color-arcelian-on-primary: #F5F7FA;
    --color-arcelian-on-light:   #F5F7FA;
    --color-arcelian-on-accent:  #0B0C0E;
  }
}
/* ============================= */
/* Global base styles            */
/* ============================= */
/* ============================= */
/* Global base styles (lighter)  */
/* ============================= */

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--font-primary, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);

  /* ✅ Lighter, cleaner reading surface */
  background:
    radial-gradient(circle at 8% 10%, rgba(245, 247, 250, 0.90), transparent 55%),
    radial-gradient(circle at 85% 20%, rgba(232, 200, 146, 0.16), transparent 58%),
    radial-gradient(circle at 70% 92%, rgba(45, 76, 105, 0.10), transparent 62%),
    linear-gradient(180deg, rgba(245, 247, 250, 0.98), rgba(245, 247, 250, 0.92)),
    var(--color-arcelian-light, #F5F7FA);

  color: var(--color-arcelian-text, #1A1A1A);
  -webkit-font-smoothing: antialiased;
}

.container {
  max-width: 1040px;
  margin: 0 auto;
  padding: 2.5rem 1.5rem 3rem;
}

/* Tighten on very small screens */
@media (max-width: 600px) {
  .container {
    padding: 1.8rem 1.1rem 2.6rem;
  }
}
/* ============================= */
/* Header & breadcrumbs          */
/* ============================= */

header {
  margin-bottom: 1.85rem;
}

.Page-breadcrumbs {
  margin-bottom: 0.75rem;
}

.Page-breadcrumbs .Link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.18rem 0.7rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-arcelian-primary, #2d4c69);
  background: rgba(245, 247, 250, 0.95);
  border: 1px solid rgba(224, 224, 224, 0.85);
  text-decoration: none;
}

.Page-breadcrumbs .Link::before {
  content: "●";
  font-size: 0.6rem;
  color: var(--color-arcelian-accent, #d1802f);
}

/* Title */
header h1 {
  margin: 0;
  font-size: clamp(1.9rem, 3vw, 2.4rem);
  line-height: 1.18;
  letter-spacing: 0.02em;
  max-width: 32ch;
  text-wrap: balance;
  background: linear-gradient(135deg,
    var(--color-arcelian-secondary, #3d2e26),
    var(--color-arcelian-primary, #2d4c69));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ============================= */
/* Hero image                    */
/* ============================= */

.ArticleHeaderImage-Container {
  position: relative;
  margin: 1.75rem 0 1.3rem;
  border-radius: 24px;
  overflow: hidden;
  background: radial-gradient(circle at 15% 0%, rgba(255,255,255,0.22), transparent 60%);
  box-shadow:
    0 24px 70px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(255, 255, 255, 0.06);
}

.ArticleHeaderImage {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.02) translateZ(0);
  transition:
    transform 0.6s cubic-bezier(.16, .72, .2, 1.1),
    filter 0.5s ease;
}

.ArticleHeaderImage-Container::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0,0,0,0.10) 0%,
    transparent 30%,
    rgba(0,0,0,0.25) 100%
  );
  pointer-events: none;
}

/* Gentle hover zoom */
.ArticleHeaderImage-Container:hover .ArticleHeaderImage {
  transform: scale(1.05) translateY(-3px);
  filter: saturate(1.05) contrast(1.02);
}

/* ============================= */
/* Meta info                     */
/* ============================= */

.info {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  align-items: center;
  font-size: 0.82rem;
  color: var(--color-arcelian-muted, #5e6c71);
  margin-bottom: 1.3rem;
}

.author {
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.publish-date time {
  font-variant-numeric: tabular-nums;
}

/* ============================= */
/* Top nav buttons               */
/* ============================= */

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 2.1rem;
}

/* Reuse your “incredible” button style if already defined */
.Button {
  --btn-bg1: var(--color-arcelian-action, #b74126);
  --btn-bg2: var(--color-arcelian-accent2, #a55b25);
  --btn-light: rgba(255,255,255,0.65);

  position: relative;
  padding: 0.5rem 1.1rem;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 999px;
  cursor: pointer;
  border: none;
  color: var(--color-arcelian-on-accent, #101214);
  background: linear-gradient(135deg, var(--btn-bg1), var(--btn-bg2));
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 var(--btn-light);
  transform: translateZ(0);
  transition:
    transform 0.28s cubic-bezier(.15, .75, .35, 1.25),
    box-shadow 0.3s ease,
    background 0.3s ease;
}

.Button:hover {
  transform: translateY(-2px) scale(1.02);
  background: linear-gradient(135deg, var(--btn-bg2), var(--btn-bg1));
  box-shadow:
    0 10px 26px rgba(0, 0, 0, 0.35),
    0 0 12px rgba(209, 128, 47, 0.5);
}
/* ============================= */
/* Article content               */
/* ============================= */

/* ============================= */
/* Reading panel for article     */
/* ============================= */

.content {
  max-width: 70ch;
  margin: 0 auto;
  font-size: 0.98rem;
  line-height: 1.75;
  color: var(--color-arcelian-text, #1A1A1A);

  /* ✅ a subtle reading surface */
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(224, 224, 224, 0.75);
  border-radius: 20px;
  padding: 1.35rem 1.35rem 1.1rem;

  box-shadow: 0 18px 50px rgba(12, 18, 30, 0.10);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

/* Mobile tightening */
@media (max-width: 600px) {
  .content {
    padding: 1.05rem 1rem 0.9rem;
    border-radius: 16px;
  }
}

/* First H3 = Executive summary block */
.content h3:first-of-type {
  position: relative;
  margin: 0 0 1rem;
  padding: 0.9rem 1rem 0.85rem 1rem;
  border-radius: 14px;
  background:
    radial-gradient(circle at 0% 0%, rgba(232,200,146,0.35), transparent 60%),
    rgba(255, 255, 255, 0.96);
  box-shadow:
    0 16px 38px rgba(12, 18, 30, 0.12),
    0 0 0 1px rgba(224, 224, 224, 0.85);
  font-size: 0.98rem;
  line-height: 1.5;
}

.content h3:first-of-type::before {
  content: "Executive Brief";
  position: absolute;
  top: -0.8rem;
  left: 1rem;
  padding: 0.16rem 0.6rem;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  border-radius: 999px;
  background: var(--color-arcelian-primary, #2d4c69);
  color: var(--color-arcelian-on-primary, #F5F7FA);
}

/* Headings */
.content h2 {
  margin: 2.1rem 0 0.75rem;
  font-size: 1.32rem;
  letter-spacing: 0.03em;
  color: var(--color-arcelian-secondary, #3d2e26);
}

.content h3 {
  margin: 1.75rem 0 0.6rem;
  font-size: 1.02rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-arcelian-muted, #5e6c71);
}

/* Paragraphs */
.content p {
  margin: 0 0 0.9rem;
}

.content p strong {
  color: var(--color-arcelian-secondary, #d1802f);
  font-weight: 600;
}

/* Lists */
.content ul {
  margin: 0 0 1.1rem 1.2rem;
  padding-left: 0.2rem;
}

.content li {
  margin-bottom: 0.35rem;
}

.content li strong {
  color: var(--color-arcelian-secondary, #3d2e26);
}

/* Links in article body */
.content a {
  color: var(--color-arcelian-secondary, #d8a051);
  text-decoration: none;
  text-underline-offset: 0.18em;
}

.content a:hover {
  text-decoration: underline;
}
/* ============================= */
/* Separators                    */
/* ============================= */

.doubleline {
  border-top: 2px solid var(--color-arcelian-border, #E0E0E0) !important;
  margin: 2.2rem 0 !important;
}

/* ============================= */
/* Newsletter subscription       */
/* ============================= */

.Subscription-row {
  max-width: 720px;
  margin: 0 auto 1.5rem;
  padding: 1.6rem 1.4rem 1.8rem;
  border-radius: 20px;
  text-align: center;
  background:
    radial-gradient(circle at 0% 0%, rgba(232, 200, 146, 0.3), transparent 60%),
    rgba(255, 255, 255, 0.96);
  box-shadow:
    0 18px 42px rgba(12, 18, 30, 0.22),
    0 0 0 1px rgba(224, 224, 224, 0.9);
}

.h3NewsletterSubscribe {
  margin: 0 0 0.5rem;
  font-size: 1.3rem;
  color: var(--color-arcelian-primary, #2d4c69) !important;
}

.Subscription-row p {
  margin: 0 0 1rem;
  color: var(--color-arcelian-muted, #5e6c71) !important;
}

.Subscription-row form {
  margin-top: 0.9rem !important;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  justify-content: center;
}

/* Input */
.Subscription-row .input {
  padding: 0.5rem 0.75rem !important;
  min-width: 240px;
  max-width: 100%;
  border-radius: 999px !important;
  border: 1px solid var(--color-arcelian-border, #E0E0E0) !important;
  font-size: 0.9rem;
}

/* Subscribe button reuses .button-arcelian-primary */
.button-arcelian-primary {
  background: var(--color-arcelian-action, #b74126);
  color: white;
  border-radius: 999px;
  border: none;
  padding: 0.5rem 1.3rem;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 10px 26px rgba(183, 65, 38, 0.4);
  transition:
    transform 0.25s cubic-bezier(.15, .75, .35, 1.25),
    box-shadow 0.3s ease,
    filter 0.3s ease;
}

.button-arcelian-primary:hover {
  transform: translateY(-2px);
  filter: brightness(1.05);
  box-shadow: 0 16px 34px rgba(183, 65, 38, 0.55);
}
/* ============================= */
/* Author section                */
/* ============================= */

.Page-authorInfo {
  max-width: 840px;
  margin: 0 auto 2.5rem;
}

.Author {
  display: flex;
  gap: 1.3rem;
  align-items: flex-start;
  padding: 1.4rem 1.4rem 1.5rem;
  border-radius: 20px;
  background:
    radial-gradient(circle at 0% 0%, rgba(59, 125, 139, 0.22), transparent 60%),
    rgba(255, 255, 255, 0.98);
  box-shadow:
    0 16px 40px rgba(12, 18, 30, 0.2),
    0 0 0 1px rgba(224, 224, 224, 0.9);
}

.Author-image {
  flex-shrink: 0;
}

.BioPicture {
  display: block;
  border-radius: 100%;
  width: 80px;
  height: 80px;
  object-fit: cover;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.45);
}

.Author-content {
  flex: 1;
}

.Author-name {
  font-weight: 700;
  margin-bottom: 0.25rem;
}

.Author-name .link-arcelian {
  color: var(--color-arcelian-secondary, #3d2e26);
  text-decoration: none;
}

.Author-name .link-arcelian:hover {
  text-decoration: underline;
}

.Author-bio {
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--color-arcelian-text, #1A1A1A);
  white-space: pre-line; /* keep your line breaks */
}

.Author-socialLinks {
  margin-top: 0.7rem;
  display: flex;
  gap: 0.6rem;
  align-items: center;
}

.SocialLink-icon {
  width: 22px;
  height: 22px;
  filter: grayscale(0.1);
  transition: transform 0.2s ease, filter 0.2s ease;
}

.SocialLink:hover .SocialLink-icon {
  transform: translateY(-1px) scale(1.05);
  filter: none;
}
/* ============================= */
/* Footer                        */
/* ============================= */

footer {
  margin-top: 2.5rem;
  text-align: center;
  font-size: 0.78rem;
  color: var(--color-arcelian-muted, #5e6c71);
}

/* Tiny separator dot */
.Span {
  padding: 0 10px;
  color: var(--color-arcelian-muted, #5e6c71);
}