/* ================================================================
   Future Technology Design System
   Single source of truth for tokens, type scale, and components
   ================================================================ */

/* ── Design tokens ───────────────────────────────────────────── */
:root {
  /* Colour palette */
  --bg:          #070b18;
  --surface-0:   #0a0f1f;
  --surface-1:   #0c1122;
  --surface-2:   #111a33;
  --ink:         #f4f6fb;
  --ink-soft:    #b8bdd0;
  --ink-mute:    #8b92a8;
  --ink-faint:   rgba(255, 255, 255, 0.35);
  --hairline:    rgba(255, 255, 255, 0.06);
  --accent:      #22d3ee;
  --accent-dim:  rgba(34, 211, 238, 0.12);
  --accent-glow: rgba(34, 211, 238, 0.25);
  --danger:      #f87171;
  --success:     #34d399;
  --warning:     #fbbf24;

  /* Typography */
  --font-body:    'Outfit', system-ui, -apple-system, sans-serif;
  --font-heading: 'Space Grotesk', var(--font-body);
  --font-mono:    'JetBrains Mono', ui-monospace, 'Cascadia Code', monospace;

  /* Fluid type scale (320 - 1440px) */
  --step--2: clamp(0.6944rem, 0.6613rem + 0.1653vi, 0.8rem);
  --step--1: clamp(0.8333rem, 0.7754rem + 0.2899vi, 1rem);
  --step-0:  clamp(1rem, 0.9048rem + 0.4762vi, 1.25rem);
  --step-1:  clamp(1.2rem, 1.0514rem + 0.7429vi, 1.5625rem);
  --step-2:  clamp(1.44rem, 1.2171rem + 1.1143vi, 1.9531rem);
  --step-3:  clamp(1.728rem, 1.4037rem + 1.6217vi, 2.4414rem);
  --step-4:  clamp(2.0736rem, 1.6131rem + 2.3029vi, 3.0518rem);
  --step-5:  clamp(2.4883rem, 1.8469rem + 3.2074vi, 3.8147rem);

  /* Spacing scale */
  --space-3xs: clamp(0.25rem, 0.2262rem + 0.119vi, 0.3125rem);
  --space-2xs: clamp(0.5rem, 0.4524rem + 0.2381vi, 0.625rem);
  --space-xs:  clamp(0.75rem, 0.6786rem + 0.3571vi, 0.9375rem);
  --space-s:   clamp(1rem, 0.9048rem + 0.4762vi, 1.25rem);
  --space-m:   clamp(1.5rem, 1.3571rem + 0.7143vi, 1.875rem);
  --space-l:   clamp(2rem, 1.8095rem + 0.9524vi, 2.5rem);
  --space-xl:  clamp(3rem, 2.7143rem + 1.4286vi, 3.75rem);
  --space-2xl: clamp(4rem, 3.619rem + 1.9048vi, 5rem);

  /* Layout */
  --content-width: 72rem;
  --prose-width:   42.5rem;
  --gutter:        var(--space-s);

  /* Borders and radii */
  --radius-xs: 4px;
  --radius-s:  6px;
  --radius-m:  8px;
  --radius-l:  12px;
  --radius-xl: 16px;
  --radius-pill: 100px;

  /* Shadows */
  --shadow-s: 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-m: 0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-l: 0 8px 24px rgba(0, 0, 0, 0.5);
  --shadow-glow: 0 0 24px var(--accent-dim);

  /* Transitions */
  --ease-out: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 0.15s;
  --duration-normal: 0.25s;
}

/* ── Base typography ─────────────────────────────────────────── */
body {
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  line-height: 1.15;
  font-weight: 700;
  color: var(--ink);
  text-wrap: balance;
}

h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }
h5 { font-size: var(--step-0); }

/* Vertical rhythm */
h1, h2, h3, h4, h5, h6,
p, ul, ol, blockquote, figure, pre, table {
  margin-block: 0 var(--space-s);
}

article > * + h2 { margin-block-start: var(--space-xl); }
article > * + h3 { margin-block-start: var(--space-l); }

/* Prose measure */
article p,
article li,
article blockquote {
  max-width: var(--prose-width);
}

/* ── Links ───────────────────────────────────────────────────── */
a {
  color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
  transition: color var(--duration-fast) var(--ease-out);
}

a:hover {
  color: #67e8f9;
}

/* ── Buttons ─────────────────────────────────────────────────── */
.btn,
.cta,
button.cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.625rem 1.5rem;
  border: none;
  border-radius: var(--radius-s);
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  text-decoration: none;
  transition:
    background var(--duration-fast) var(--ease-out),
    opacity var(--duration-fast) var(--ease-out),
    transform var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out);
}

.btn--primary,
a.cta,
button.cta {
  background: var(--accent);
  color: var(--bg);
}

.btn--primary:hover,
a.cta:hover,
button.cta:hover {
  opacity: 0.88;
  transform: translateY(-1px);
  box-shadow: var(--shadow-glow);
}

.btn--ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--hairline);
}

.btn--ghost:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.btn--small {
  padding: 0.375rem 1rem;
  font-size: var(--step--2);
}

/* ── Focus rings (accessibility) ─────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--radius-xs);
}

/* Remove inner ring on buttons that already glow */
button:focus-visible,
a.cta:focus-visible,
.btn:focus-visible {
  outline-offset: 4px;
}

/* Skip link */
.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-s);
  background: var(--accent);
  color: var(--bg);
  padding: 0.5rem 1rem;
  border-radius: var(--radius-s);
  font-weight: 600;
  z-index: 10000;
  transition: top 0.2s;
}

.skip-link:focus {
  top: var(--space-xs);
}

/* ── Reduced motion ──────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Glass header styling ────────────────────────────────────── */
.glass-header {
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  background: rgba(7, 11, 24, 0.82);
  border-bottom: 1px solid var(--hairline);
  transition: background var(--duration-normal) var(--ease-out),
              box-shadow var(--duration-normal) var(--ease-out);
}

.glass-header.scrolled {
  background: rgba(7, 11, 24, 0.95);
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.4);
}

.glass-header__inner {
  max-width: var(--content-width);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: var(--space-s);
  padding: 0.625rem var(--gutter);
  min-height: 3.5rem;
}

.glass-header__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  color: var(--ink);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--step-0);
  flex-shrink: 0;
}

.glass-header__wordmark {
  display: none;
}

@media (min-width: 768px) {
  .glass-header__wordmark {
    display: inline;
  }
}

.glass-header__nav {
  display: none;
  align-items: center;
  gap: 0.125rem;
  margin-left: auto;
}

@media (min-width: 1024px) {
  .glass-header__nav {
    display: flex;
  }
}

.glass-header__link {
  color: var(--ink-soft);
  text-decoration: none;
  font-size: var(--step--1);
  font-weight: 500;
  padding: 0.375rem 0.625rem;
  border-radius: var(--radius-s);
  transition: color var(--duration-fast), background var(--duration-fast);
  white-space: nowrap;
}

.glass-header__link:hover,
.glass-header__link[aria-current="page"] {
  color: var(--ink);
  background: rgba(255, 255, 255, 0.06);
}

/* More dropdown */
.glass-header__more {
  position: relative;
}

.glass-header__more-btn {
  background: none;
  border: none;
  cursor: pointer;
}

.glass-header__dropdown {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  min-width: 10rem;
  background: var(--surface-1);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-m);
  padding: 0.375rem;
  box-shadow: var(--shadow-l);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity var(--duration-fast), transform var(--duration-fast), visibility var(--duration-fast);
  z-index: 200;
}

.glass-header__more[data-open="true"] .glass-header__dropdown,
.glass-header__more-btn[aria-expanded="true"] + .glass-header__dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.glass-header__dropdown a {
  display: block;
  padding: 0.5rem 0.75rem;
  color: var(--ink-soft);
  text-decoration: none;
  font-size: var(--step--1);
  border-radius: var(--radius-xs);
  transition: background var(--duration-fast), color var(--duration-fast);
}

.glass-header__dropdown a:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--ink);
}

.glass-header__actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-left: auto;
}

@media (min-width: 1024px) {
  .glass-header__actions {
    margin-left: 0;
  }
}

.glass-header__cta {
  display: none;
  background: var(--accent);
  color: var(--bg);
  padding: 0.4375rem 1rem;
  border-radius: var(--radius-s);
  font-weight: 600;
  font-size: var(--step--1);
  text-decoration: none;
  transition: opacity var(--duration-fast);
}

@media (min-width: 768px) {
  .glass-header__cta {
    display: inline-flex;
  }
}

.glass-header__cta:hover {
  opacity: 0.88;
}

/* Hamburger */
.glass-header__hamburger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  background: none;
  border: none;
  padding: 0.5rem;
  cursor: pointer;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius-s);
  transition: background var(--duration-fast);
}

@media (min-width: 1024px) {
  .glass-header__hamburger {
    display: none;
  }
}

.glass-header__hamburger:hover {
  background: rgba(255, 255, 255, 0.06);
}

.glass-header__hamburger span {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--ink-soft);
  border-radius: 1px;
  transition: transform var(--duration-fast), opacity var(--duration-fast);
}

/* ── Key takeaways card ──────────────────────────────────────── */
.takeaways,
.key-takeaways {
  background: var(--surface-1);
  border: 1px solid var(--hairline);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-m);
  padding: var(--space-m) var(--space-m) var(--space-s);
  margin-block: var(--space-l);
  max-width: var(--prose-width);
}

.takeaways h3,
.key-takeaways h3 {
  font-family: var(--font-heading);
  font-size: var(--step-0);
  font-weight: 600;
  color: var(--accent);
  margin-block-end: var(--space-xs);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.takeaways h3::before,
.key-takeaways h3::before {
  content: '';
  display: inline-block;
  width: 1.25rem;
  height: 1.25rem;
  background: var(--accent);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 11 12 14 22 4'/%3E%3Cpath d='M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 11 12 14 22 4'/%3E%3Cpath d='M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11'/%3E%3C/svg%3E");
  flex-shrink: 0;
}

.takeaways ul,
.key-takeaways ul {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.takeaways li,
.key-takeaways li {
  position: relative;
  padding-left: 1.5rem;
  margin-block-end: 0.5rem;
  color: var(--ink-soft);
  font-size: var(--step--1);
  line-height: 1.6;
}

.takeaways li::before,
.key-takeaways li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.7;
}

/* ── Sticky share bar ────────────────────────────────────────── */
.share-row {
  position: sticky;
  bottom: 0;
  z-index: 50;
  background: rgba(7, 11, 24, 0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--hairline);
  padding: 0.625rem var(--space-s);
  margin-block-start: var(--space-l);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.share-row .share-btn-group {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  padding: 0.4375rem 0.75rem;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--ink-soft);
  font-size: var(--step--2);
  text-decoration: none;
  cursor: pointer;
  transition: border-color var(--duration-fast), color var(--duration-fast), background var(--duration-fast);
  line-height: 1;
}

.share-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-dim);
}

.share-btn svg {
  flex-shrink: 0;
}

/* Share row CSS for standalone include */
.share-row + .sources {
  padding-bottom: var(--space-l);
}

/* ── Pagination ──────────────────────────────────────────────── */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  padding: var(--space-l) 0;
  margin-block-start: var(--space-m);
  font-family: var(--font-body);
}

.pagination__link,
.pagination__current,
.pagination__ellipsis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.25rem;
  height: 2.25rem;
  padding: 0 0.5rem;
  border-radius: var(--radius-s);
  font-size: var(--step--1);
  font-weight: 500;
  text-decoration: none;
  transition: background var(--duration-fast), color var(--duration-fast);
}

.pagination__link {
  color: var(--ink-soft);
  border: 1px solid var(--hairline);
}

.pagination__link:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--ink);
  border-color: var(--accent);
}

.pagination__current {
  background: var(--accent);
  color: var(--bg);
  font-weight: 700;
}

.pagination__ellipsis {
  color: var(--ink-mute);
  border: none;
}

.pagination__prev,
.pagination__next {
  font-weight: 600;
  padding: 0 0.75rem;
}

.pagination__link[aria-disabled="true"] {
  opacity: 0.4;
  pointer-events: none;
}

/* ── Page header component ───────────────────────────────────── */
.page-header {
  text-align: center;
  margin-block-end: var(--space-xl);
  padding-block: var(--space-l);
}

.page-header__eyebrow {
  font-family: var(--font-heading);
  font-size: var(--step--2);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent);
  margin-block-end: var(--space-2xs);
}

.page-header__title {
  font-size: var(--step-4);
  margin-block-end: var(--space-2xs);
}

.page-header__subtitle {
  font-size: var(--step-0);
  color: var(--ink-soft);
  max-width: 36em;
  margin-inline: auto;
}

/* ── Newsletter CTA component ────────────────────────────────── */
.related-nl-cta {
  background: var(--surface-1);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-l);
  padding: var(--space-l);
  text-align: center;
  margin-block: var(--space-xl);
  max-width: var(--prose-width);
  margin-inline: auto;
}

.related-nl-cta h3 {
  font-family: var(--font-heading);
  font-size: var(--step-1);
  margin-block-end: var(--space-2xs);
}

.related-nl-cta p {
  color: var(--ink-soft);
  font-size: var(--step--1);
  margin-block-end: var(--space-m);
  max-width: 28em;
  margin-inline: auto;
}

.related-nl-cta .cta {
  background: var(--accent);
  color: var(--bg);
  padding: 0.625rem 1.5rem;
  border-radius: var(--radius-s);
  font-weight: 600;
  text-decoration: none;
  display: inline-block;
  transition: opacity var(--duration-fast);
}

.related-nl-cta .cta:hover {
  opacity: 0.88;
}

/* ── Breadcrumb ──────────────────────────────────────────────── */
.breadcrumb-nav {
  padding: var(--space-xs) 0;
  font-size: var(--step--2);
  color: var(--ink-mute);
}

.breadcrumb-nav a {
  color: var(--ink-mute);
  text-decoration: none;
}

.breadcrumb-nav a:hover {
  color: var(--accent);
}

.bsep {
  margin: 0 0.375rem;
  opacity: 0.5;
}

/* ── Sources section ─────────────────────────────────────────── */
.sources {
  margin-block-start: var(--space-l);
  padding-block-start: var(--space-m);
  border-top: 1px solid var(--hairline);
}

.sources h3 {
  font-family: var(--font-heading);
  font-size: var(--step-0);
  font-weight: 600;
  margin-block-end: var(--space-xs);
}

.sources ul {
  list-style: none;
  padding-left: 0;
}

.sources li {
  padding: 0.25rem 0;
  font-size: var(--step--1);
}

.sources a {
  color: var(--ink-soft);
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.2);
  text-underline-offset: 0.15em;
}

.sources a:hover {
  color: var(--accent);
  text-decoration-color: var(--accent);
}

/* ── Back to top ─────────────────────────────────────────────── */
#back-to-top {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: var(--surface-1);
  border: 1px solid var(--hairline);
  color: var(--ink-soft);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transform: translateY(0.5rem);
  transition: opacity var(--duration-normal), visibility var(--duration-normal),
              transform var(--duration-normal), background var(--duration-fast);
  z-index: 90;
  box-shadow: var(--shadow-m);
}

#back-to-top.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

#back-to-top:hover {
  background: var(--accent);
  color: var(--bg);
  border-color: var(--accent);
}

#back-to-top svg {
  width: 1.25rem;
  height: 1.25rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ── Reading progress bar ────────────────────────────────────── */
.reading-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
  height: 2px;
  background: var(--accent);
  z-index: 101;
  transition: width 0.1s linear;
}

/* ── Print stylesheet ────────────────────────────────────────── */
@media print {
  *,
  *::before,
  *::after {
    background: transparent !important;
    color: #000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }

  body {
    font-size: 11pt;
    line-height: 1.5;
    font-family: Georgia, 'Times New Roman', serif;
  }

  .glass-header,
  .mobile-overlay,
  .site-footer,
  .share-row,
  .share-btn-group,
  #back-to-top,
  .reading-progress,
  .skip-link,
  .breadcrumb-nav,
  .related-nl-cta,
  .rel,
  #related-articles,
  .pagination,
  nav,
  .ft-newsletter-cta,
  .cookie-banner,
  .ft-consent-banner {
    display: none !important;
  }

  a {
    text-decoration: underline;
    color: #000 !important;
  }

  a[href]::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
    color: #555;
  }

  a[href^="#"]::after,
  a[href^="javascript"]::after {
    content: "";
  }

  h1, h2, h3 {
    page-break-after: avoid;
    orphans: 3;
    widows: 3;
  }

  img {
    max-width: 100% !important;
    page-break-inside: avoid;
  }

  article {
    max-width: none;
    padding: 0;
  }

  .takeaways,
  .key-takeaways {
    border: 1px solid #ccc !important;
    border-left: 3px solid #333 !important;
    padding: 1rem;
    page-break-inside: avoid;
  }
}