/* ============================================================
   Sardar Asif Ahmed — portfolio

   Two themes, deliberately different:
     light — flat, white, typographic
     dark  — layered aurora backdrop with frosted glass panels
   ============================================================ */

:root {
  --bg: #ffffff;
  --bg-soft: #f7f7f8;
  --text: #0a0a0b;
  /* Greys are tuned to clear 4.5:1 on white — "faint" still has to be readable. */
  --text-muted: #5a5a61;
  --text-faint: #70707a;
  --line: #e6e6e9;
  --line-strong: #d4d4d9;
  --accent: #00857a;
  --accent-text: #00857a;
  --accent-soft: rgba(0, 133, 122, 0.1);

  /* Panels: opaque in light, frosted in dark. */
  --glass-bg: #ffffff;
  --glass-border: var(--line);
  --glass-blur: none;
  --card-bg: var(--bg-soft);
  --dock-bg: rgba(255, 255, 255, 0.72);
  --shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
  --scrim: rgba(255, 255, 255, 0.55);
  --logo-plate: #14191b;

  --font-display: "Inter Tight", system-ui, sans-serif;
  --font-body: "Manrope", system-ui, sans-serif;

  --measure: 62ch;
  --gap: clamp(1.5rem, 4vw, 3.5rem);
  --page-x: clamp(1.25rem, 5vw, 4rem);
  --radius: 16px;
}

/* Dark theme is built on one hue family — teal through jade — descended from
   the old site's #00FFE7. Deliberately no violet, no pink, no slate-blue. */
[data-theme="dark"] {
  --bg: #070d0c;
  --bg-soft: rgba(255, 255, 255, 0.04);
  --text: #e9f1ef;
  --text-muted: #9fb5af;
  --text-faint: #7b918b;
  --line: rgba(255, 255, 255, 0.1);
  --line-strong: rgba(255, 255, 255, 0.18);
  --accent: #2ee6d6;
  --accent-text: #5eead4;
  --accent-soft: rgba(46, 230, 214, 0.14);

  --glass-bg: rgba(7, 13, 12, 0.55);
  --glass-border: rgba(255, 255, 255, 0.12);
  --glass-blur: blur(24px) saturate(160%);
  --card-bg: rgba(255, 255, 255, 0.04);
  --dock-bg: rgba(7, 13, 12, 0.62);
  --shadow: 0 24px 64px rgba(0, 0, 0, 0.55);
  --scrim: rgba(2, 8, 7, 0.62);
  --logo-plate: #14191b;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  transition: background-color 0.3s ease, color 0.3s ease;
}

body.theme-switching * { transition: none !important; }
body.modal-locked { overflow: hidden; }

a { color: inherit; text-decoration: none; }

::selection { background: var(--accent-soft); color: var(--text); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 0.75rem 1.25rem;
  background: var(--text);
  color: var(--bg);
  border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Shared frosted-panel treatment. Flat and opaque in light. */
.glass {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}

/* ============================================================
   Ambient backdrop — dark theme only
   ============================================================ */

.backdrop {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease;
}

[data-theme="dark"] .backdrop { opacity: 1; }

.backdrop-base {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom right, #070d0c, #0a1512, #070d0c);
}

/* Faint engineering grid. */
.backdrop-grid {
  position: absolute;
  inset: 0;
  opacity: 0.05;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
  background-size: 56px 56px;
}

/* Film grain — kills banding across the big gradients. */
.backdrop-noise {
  position: absolute;
  inset: 0;
  opacity: 0.02;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Oversized colour fields that bleed past the viewport. */
.aurora {
  position: absolute;
  width: 120vw;
  height: 120vh;
  top: -10vh;
  left: -10vw;
  will-change: transform;
}

/* One family, so depth comes from lightness rather than hue: two bright fields,
   one soft green, and a deep jade that sinks instead of glowing. Alphas run
   lower than a multi-hue sweep would need — stacked greens go muddy fast. */

/* Tuned by compositing the stack numerically, not by eye.
   Two constraints a single-hue aurora has that a rainbow one doesn't:
   radii stay well under the viewport, so the blobs read as separate pools
   instead of one flood, and peak alphas stay low, so the page stays near-black
   with a green glow rather than turning into a forest-green wash. */

.aurora-teal {
  background: radial-gradient(620px 520px at 18% 26%,
    rgba(20, 184, 166, 0.3) 0%, rgba(20, 184, 166, 0.17) 30%,
    rgba(20, 184, 166, 0.08) 55%, rgba(20, 184, 166, 0.03) 75%, transparent 92%);
  animation: drift-a 26s ease-in-out infinite alternate;
}

.aurora-emerald {
  background: radial-gradient(560px 600px at 84% 72%,
    rgba(16, 185, 129, 0.24) 0%, rgba(16, 185, 129, 0.13) 30%,
    rgba(16, 185, 129, 0.06) 55%, rgba(16, 185, 129, 0.02) 75%, transparent 92%);
  animation: drift-b 32s ease-in-out infinite alternate;
}

.aurora-spring {
  background: radial-gradient(480px 520px at 58% 44%,
    rgba(34, 197, 94, 0.14) 0%, rgba(34, 197, 94, 0.08) 30%,
    rgba(34, 197, 94, 0.04) 55%, rgba(34, 197, 94, 0.015) 75%, transparent 92%);
  animation: drift-c 38s ease-in-out infinite alternate;
}

.aurora-jade {
  background: radial-gradient(600px 460px at 38% 86%,
    rgba(4, 120, 87, 0.34) 0%, rgba(4, 120, 87, 0.19) 30%,
    rgba(4, 120, 87, 0.09) 55%, rgba(4, 120, 87, 0.03) 75%, transparent 92%);
  animation: drift-d 30s ease-in-out infinite alternate;
}

@keyframes drift-a { from { transform: translate3d(0, 0, 0) scale(1); }    to { transform: translate3d(4%, 3%, 0) scale(1.1); } }
@keyframes drift-b { from { transform: translate3d(0, 0, 0) scale(1.05); } to { transform: translate3d(-5%, -3%, 0) scale(1); } }
@keyframes drift-c { from { transform: translate3d(0, 0, 0) scale(1); }    to { transform: translate3d(3%, -4%, 0) scale(1.12); } }
@keyframes drift-d { from { transform: translate3d(0, 0, 0) scale(1.08); } to { transform: translate3d(-4%, 2%, 0) scale(1); } }

/* ============================================================
   Home layout
   ============================================================ */

.shell {
  max-width: 1240px;
  margin: 0 auto;
  padding: clamp(2.5rem, 7vw, 5.5rem) var(--page-x) 9rem;
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
  gap: var(--gap);
  align-items: start;
  transition: max-width 0.45s cubic-bezier(0.4, 0, 0.2, 1),
              grid-template-columns 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

@media (max-width: 900px) {
  .shell { grid-template-columns: 1fr; gap: 3.5rem; }
}

.panel { position: sticky; top: clamp(2.5rem, 7vw, 5.5rem); }

@media (max-width: 900px) {
  .panel { position: static; }
}

/* ---------- Identity ---------- */

.avatar {
  width: 64px; height: 64px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--line);
  margin-bottom: 1.5rem;
  display: block;
}

.greeting { font-size: 0.9375rem; color: var(--text-muted); margin: 0 0 0.35rem; }

.name {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 5.5vw, 3.25rem);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.05;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.wave {
  display: inline-block;
  font-size: 0.8em;
  transform-origin: 70% 70%;
  animation: wave 2.6s ease-in-out infinite;
}

@keyframes wave {
  0%, 60%, 100% { transform: rotate(0deg); }
  10%, 30% { transform: rotate(14deg); }
  20% { transform: rotate(-8deg); }
  40% { transform: rotate(-4deg); }
  50% { transform: rotate(10deg); }
}

.tagline { margin: 0.75rem 0 0; color: var(--text-muted); font-size: 1.0625rem; }
.intro { margin: 1.5rem 0 0; max-width: 46ch; color: var(--text-muted); font-size: 0.9375rem; }

/* Contact sits under the intro — where someone lands after working out who you
   are. The dock carries the same links persistently, but icon-only; these are
   labelled, because a dock icon doesn't say "get in touch". */
.panel-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.5rem;
}

.pill-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card-bg);
  color: var(--text-muted);
  font-size: 0.8125rem;
  font-weight: 500;
  transition: color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.pill-link svg {
  width: 15px;
  height: 15px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pill-link:hover {
  color: var(--accent-text);
  border-color: var(--accent);
  transform: translateY(-1px);
}

/* ---------- Ethos ---------- */

.ethos { margin-top: 2.5rem; }

.eyebrow {
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin: 0 0 0.85rem;
}

.ethos-list {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 0.5rem 0.75rem;
  margin: 0; padding: 0; list-style: none;
}

.ethos-list li { display: inline-flex; align-items: baseline; gap: 0.35rem; }
.ethos-list li + li::before { content: "•"; color: var(--text-faint); margin-right: 0.75rem; }

.ethos-word {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.125rem;
  letter-spacing: -0.02em;
}

.ethos-note { color: var(--text-faint); font-size: 0.875rem; }

.panel-meta {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  font-size: 0.8125rem;
  color: var(--text-faint);
}

.panel-meta p { margin: 0 0 0.35rem; }
.panel-meta strong { color: var(--text-muted); font-weight: 500; }

/* ============================================================
   Work list
   ============================================================ */

.work-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.5rem;
}

.count { font-size: 0.8125rem; color: var(--text-faint); font-variant-numeric: tabular-nums; }

.work-list {
  list-style: none;
  margin: 0; padding: 0;
  border-top: 1px solid var(--line);
}

.work-item { border-bottom: 1px solid var(--line); }

/* Only in the rail. On the home list each row names its own client, so a
   heading there would break the column for information already on the page. */
.work-group { display: none; }

body.modal-open .work-group {
  display: block;
  font-family: var(--font-display);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
  padding: 1rem 0 0.4rem 0.75rem;
}

body.modal-open .work-group:first-child { padding-top: 0; }

.work-link {
  display: grid;
  align-items: baseline;
  gap: 0.15rem 0.85rem;
  padding: 1.15rem 0;
  position: relative;
  border-radius: 10px;
  transition: padding 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), background-color 0.25s ease;
}

.work-link::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: 3px; height: 0;
  background: var(--accent);
  border-radius: 3px;
  transform: translateY(-50%);
  transition: height 0.25s ease;
}

.work-link:hover { padding-left: 1rem; }
.work-link:hover::before { height: 60%; }

/* Every row carries a tile — a real logo or a monogram — so the column is
   always uniform and never leaves a hole. Tiles are pre-normalised to 128x128
   squares at build time, so they render identically here rather than at
   whatever aspect their source lockup happened to be.

   Rows and columns are both stated explicitly. Leaving rows to auto-placement
   put the category on the year's line instead of the title's. */
.work-link { grid-template-columns: 32px minmax(0, 1fr) auto; }
.work-logo  { grid-column: 1; grid-row: 1 / 3; }
.work-title { grid-column: 2;     grid-row: 1; }
.work-meta  { grid-column: 3;     grid-row: 1; }
.work-summary { grid-column: 2 / -1; grid-row: 2; }

.work-logo {
  align-self: center;
  width: 32px;
  height: 32px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--line);
  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.work-link:hover .work-logo { transform: scale(1.08); }

/* Monogram stand-in for a project with no logo file yet. */
.work-logo-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--logo-plate);
  color: var(--text-faint);
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1;
  user-select: none;
}

.work-title {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  transition: color 0.2s ease;
}

.work-link:hover .work-title { color: var(--accent-text); }

/* Who it was built for. Real client names carry weight; "Personal" steps back,
   so a scan reads the paid work first without either being hidden. */
.work-meta {
  font-size: 0.8125rem;
  color: var(--text-muted);
  white-space: nowrap;
}

.work-meta.is-personal {
  color: var(--text-faint);
  font-style: italic;
}

.work-summary {
  margin: 0.15rem 0 0;
  font-size: 0.875rem;
  color: var(--text-muted);
  max-width: 58ch;
}

@media (max-width: 520px) {
  /* No room for the category beside the title — drop it under the summary. */
  .work-link { grid-template-columns: 32px minmax(0, 1fr); }
  .work-meta { grid-column: 2; grid-row: 3; white-space: normal; }
}

.chip {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  color: var(--text-faint);
  vertical-align: middle;
  margin-left: 0.5rem;
}

/* ---------- Modal-open: list collapses to a left rail ---------- */

body.modal-open .shell {
  max-width: none;
  grid-template-columns: minmax(200px, 260px) minmax(0, 1fr);
  padding-right: var(--page-x);
}

body.modal-open .panel { display: none; }
body.modal-open .work-head { display: none; }
body.modal-open .work-summary,
body.modal-open .work-meta { display: none; }
body.modal-open .work-list { border-top: 0; }
body.modal-open .work-item { border-bottom: 0; }

/* The page itself is scroll-locked while the modal is open, so the rail needs
   its own scroll — and it must sit above the scrim, or it is dead to clicks. */
body.modal-open .work {
  position: fixed;
  top: clamp(1rem, 3vw, 2.5rem);
  left: var(--page-x);
  width: 260px;
  max-height: calc(100vh - 2 * clamp(1rem, 3vw, 2.5rem));
  overflow-y: auto;
  overscroll-behavior: contain;
  z-index: 55; /* above .modal (50), below .dock (60) */
  padding-right: 0.4rem;
  /* Hidden here too, to match the panel — both still scroll. */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

body.modal-open .work::-webkit-scrollbar { width: 0; height: 0; }

body.modal-open .work-link {
  padding: 0.6rem 0.75rem;
  gap: 0;
}
body.modal-open .work-link::before { display: none; }
body.modal-open .work-title { font-size: 0.9375rem; }
body.modal-open .work-link { grid-template-columns: 22px minmax(0, 1fr); gap: 0 0.5rem; }
body.modal-open .work-logo { width: 22px; height: 22px; border-radius: 5px; }
body.modal-open .work-logo-fallback { font-size: 0.6875rem; }
/* Summary and category are hidden in the rail, so the title owns the row. */
body.modal-open .work-title { grid-column: 2; grid-row: 1; }

/* Active item in the rail */
body.modal-open .work-item.is-active .work-link {
  background: linear-gradient(135deg, rgba(46, 230, 214, 0.16), rgba(16, 185, 129, 0.12));
  border: 1px solid var(--glass-border);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}

[data-theme="light"] body.modal-open .work-item.is-active .work-link {
  background: var(--accent-soft);
  border: 1px solid var(--accent-soft);
}

body.modal-open .work-item.is-active .work-title { color: var(--text); }

@media (max-width: 1100px) {
  /* Not enough room for a rail — hide the list, modal takes over. */
  body.modal-open .shell { grid-template-columns: 1fr; }
  body.modal-open .work { display: none; }
}

/* ============================================================
   Modal
   ============================================================ */

.modal {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  align-items: center;
  justify-items: center;
  padding: 1.5rem clamp(1rem, 3vw, 2.5rem);
}

/* The dock floats over the panel's bottom edge and hides the end of the rail.
   While a case study is open it is also redundant — close and Escape both
   exit, and its links belong to the home page. */
body.modal-open .dock { display: none; }

/* Centre the panel in the space *beside* the rail rather than pinning it to
   the right edge — otherwise wide screens get a dead gap in the middle.
   Offset = page gutter (64px) + rail (260px) + breathing room. */
@media (min-width: 1101px) {
  .modal { padding-left: 360px; }
}

.modal[hidden] { display: none; }

.modal-scrim {
  position: absolute;
  inset: 0;
  background: var(--scrim);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.modal.is-open .modal-scrim { opacity: 1; }

.modal-panel {
  position: relative;
  width: min(980px, 100%);
  max-height: min(94vh, 1000px);
  overflow-y: auto;
  overscroll-behavior: contain;
  /* Scrolls, but the bar stays out of the way — it cut across the glass edge
     and the rounded corner. Wheel, trackpad, keys and touch all still work. */
  scrollbar-width: none;          /* Firefox */
  -ms-overflow-style: none;       /* old Edge/IE */
  border-radius: 22px;
  box-shadow: var(--shadow);
  padding: clamp(1.25rem, 2.4vw, 2rem);
  opacity: 0;
  transform: translateY(12px) scale(0.985);
  transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.2, 0.9, 0.3, 1);
}

.modal.is-open .modal-panel { opacity: 1; transform: none; }

.modal-panel::-webkit-scrollbar { width: 0; height: 0; } /* Chrome, Safari */

.modal-panel:focus { outline: none; }

.modal-close {
  position: absolute;
  top: clamp(1rem, 2vw, 1.5rem);
  right: clamp(1rem, 2vw, 1.5rem);
  z-index: 2;
  width: 36px; height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--glass-border);
  background: var(--card-bg);
  color: var(--text-muted);
  cursor: pointer;
  transition: color 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
}

.modal-close:hover {
  color: var(--text);
  background: var(--bg-soft);
  transform: rotate(90deg);
}

.modal-close svg {
  width: 16px; height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
}

.modal-body .back { display: none; }

@media (max-width: 640px) {
  .modal { padding: 0; align-items: stretch; }
  .modal-panel {
    width: 100%;
    max-height: 100vh;
    border-radius: 0;
    padding: 4rem 1.25rem 6rem;
  }
}

/* ============================================================
   Case study
   ============================================================ */

.article {
  max-width: 1000px;
  margin: 0 auto;
  padding: clamp(2rem, 6vw, 4rem) var(--page-x) 9rem;
}

.back {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.875rem;
  color: var(--text-muted);
  margin-bottom: 2.5rem;
  transition: color 0.2s ease, gap 0.2s ease;
}
.back:hover { color: var(--accent-text); gap: 0.65rem; }

/* ---------- Pills ---------- */

.pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
  padding-right: 3rem; /* clear the close button */
}

.byline-id {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-width: 0;
}

.article-logo {
  flex: none;
  width: 34px;
  height: 34px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--line);
}

.pill {
  font-size: 0.8125rem;
  font-weight: 500;
  padding: 0.3rem 0.85rem;
  border-radius: 999px;
  border: 1px solid var(--glass-border);
  background: var(--card-bg);
  color: var(--text-muted);
  white-space: nowrap;
}

.pill-solid {
  background: var(--accent);
  border-color: transparent;
  color: #04201e;
  font-weight: 600;
}

[data-theme="light"] .pill-solid { color: #ffffff; }

.pill-outline {
  background: transparent;
  border-color: var(--accent);
  color: var(--accent-text);
}

.pill-draft {
  border-style: dashed;
  color: var(--text-faint);
  text-transform: uppercase;
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
}

/* ---------- Header ---------- */

.article-title {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.1;
  margin: 0 0 0.5rem;
  padding-right: 2.5rem;
}

.byline-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  margin: 0 0 1rem;
}

.byline {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 500;
  color: var(--accent-text);
}

.byline-dot { margin: 0 0.5rem; opacity: 0.6; }
.byline-org { color: var(--text-muted); }

[data-theme="dark"] .byline-org { color: #86efac; }

.lede {
  font-size: 1rem;
  color: var(--text-muted);
  margin: 0 0 1.25rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--line);
  max-width: var(--measure);
}

.notice {
  padding: 0.85rem 1.1rem;
  border: 1px dashed var(--line-strong);
  border-radius: 10px;
  color: var(--text-faint);
  font-size: 0.875rem;
  margin: 0 0 2rem;
}

/* ---------- Two-column body ---------- */

.article-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.78fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: start;
}

@media (max-width: 800px) {
  .article-grid { grid-template-columns: 1fr; }
}

.block { margin-bottom: 1.25rem; }
.block:last-child { margin-bottom: 0; }

.block h2 {
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
  margin: 0 0 0.35rem;
}

.block p {
  margin: 0 0 0.6rem;
  color: var(--text-muted);
  font-size: 0.875rem;
  line-height: 1.55;
}
.block p:last-child { margin-bottom: 0; }

.block ul { margin: 0; padding: 0; list-style: none; }

.block ul li {
  position: relative;
  padding-left: 1.15rem;
  margin-bottom: 0.45rem;
  color: var(--text-muted);
  font-size: 0.875rem;
  line-height: 1.55;
}
.block ul li:last-child { margin-bottom: 0; }

.block ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--text-faint);
}

/* ---------- Right rail cards ---------- */

.article-rail {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.rail-skills .eyebrow { margin: 0 0 0.5rem; }

/* No lede in the modal, so the header needs a rule to sit against. */
.modal-body .byline-row {
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--line);
}

.card {
  padding: 1rem;
  border-radius: var(--radius);
  border: 1px solid var(--glass-border);
  background: var(--card-bg);
}

.card-title {
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 600;
  margin: 0 0 0.75rem;
  color: var(--text);
}

.metric + .metric {
  margin-top: 0.85rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--line);
}

.metric-value {
  display: block;
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: var(--accent-text);
}

.metric-name {
  display: block;
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text);
}

.metric-label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text);
  margin-top: 0.15rem;
}

.metric-note {
  margin: 0.35rem 0 0;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--text-faint);
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0; padding: 0;
  list-style: none;
}

.tags li {
  font-size: 0.75rem;
  color: var(--text-muted);
  padding: 0.25rem 0.6rem;
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  background: var(--bg-soft);
}

.article-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
}

.button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 500;
  transition: border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.button:hover {
  border-color: var(--accent);
  color: var(--accent-text);
  transform: translateY(-1px);
}

/* ============================================================
   Dock
   ============================================================ */

.dock {
  position: fixed;
  left: 50%;
  bottom: 1.5rem;
  transform: translateX(-50%);
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.4rem;
  border-radius: 999px;
  background: var(--dock-bg);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  box-shadow: var(--shadow);
  max-width: calc(100vw - 2rem);
}

.dock-item {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  font: inherit;
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.dock-item:hover {
  background: var(--bg-soft);
  color: var(--text);
  transform: translateY(-2px);
}

.dock-item svg {
  width: 18px; height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  display: block;
}

/* Show the theme you'd switch *to*: moon while light, sun while dark. */
.icon-sun, .icon-moon { display: none; }
[data-theme="light"] .icon-moon { display: block; }
[data-theme="dark"] .icon-sun { display: block; }

.dock-sep {
  width: 1px; height: 20px;
  background: var(--line);
  margin: 0 0.25rem;
  flex: none;
}

.dock-item::after {
  content: attr(data-label);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  padding: 0.3rem 0.55rem;
  border-radius: 6px;
  background: var(--text);
  color: var(--bg);
  font-size: 0.75rem;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.dock-item:hover::after,
.dock-item:focus-visible::after { opacity: 1; transform: translateX(-50%) translateY(0); }

.dock-item.copied::after {
  content: "Copied!";
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  background: var(--accent);
  color: #04201e;
}

[data-theme="light"] .dock-item.copied::after { color: #ffffff; }

/* ============================================================
   Motion preferences
   ============================================================ */

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