/* ==========================================================
   dkyriakakis.com v2, signal trace theme
   Palette: deep slate ink, phosphor amber, trace cyan
   ========================================================== */

:root {
  --bg: #0C1322;
  --bg-raised: #121C30;
  --bg-card: #101a2d;
  --line: rgba(148, 168, 199, 0.14);
  --line-strong: rgba(148, 168, 199, 0.28);
  --ink: #E9EEF7;
  --muted: #93A1B8;
  --amber: #FFB24D;
  --amber-dim: rgba(255, 178, 77, 0.14);
  --cyan: #57C7E3;
  --font-display: "Archivo", system-ui, sans-serif;
  --font-body: "Instrument Sans", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --max: 1080px;
  --pad: clamp(1.1rem, 4vw, 2.5rem);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.05rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

::selection { background: var(--amber); color: #14100a; }

.mono { font-family: var(--font-mono); }
.muted { color: var(--muted); }

a { color: inherit; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-stretch: 115%;
  line-height: 1.08;
  letter-spacing: -0.015em;
}

/* subtle film grain over everything, adds depth to the dark theme */
.grain {
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
}

/* ---------- top bar ----------
   Two states. Over the dark hero it is transparent with light ink.
   Once scrolled past the hero it becomes light glass with dark ink,
   because everything below the hero starts in the light zone.
   JS toggles .scrolled. See main.js. */
.topbar {
  --nav-ink: var(--ink);
  --nav-muted: var(--muted);
  --nav-accent: var(--amber);
  --nav-line: var(--line-strong);
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.85rem var(--pad);
  background: linear-gradient(to bottom, rgba(12, 19, 34, 0.55), rgba(12, 19, 34, 0));
  border-bottom: 1px solid transparent;
  transition: background 0.35s ease, border-color 0.35s ease, backdrop-filter 0.35s ease;
}

/* Standalone dark pages (call.html, generated articles) have no light zone to
   scroll into, so they get a dark frosted bar from the start instead of
   .scrolled, which would put a paper-coloured bar on a dark page. */
.topbar.solid {
  background: rgba(12, 19, 34, 0.9);
  backdrop-filter: blur(12px) saturate(1.2);
  border-bottom-color: var(--line);
}

.topbar.scrolled {
  --nav-ink: #131B2B;
  --nav-muted: #56617A;
  --nav-accent: #B4530E;
  --nav-line: rgba(28, 35, 50, 0.22);
  background: rgba(246, 244, 239, 0.88);
  backdrop-filter: blur(12px) saturate(1.4);
  border-bottom-color: rgba(28, 35, 50, 0.12);
}

.brand {
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-decoration: none;
  color: var(--nav-ink);
  transition: color 0.35s ease;
}
.brand-dot { color: var(--nav-accent); }

.topnav { display: flex; gap: clamp(0.7rem, 2.4vw, 1.6rem); align-items: center; }
.topnav a {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--nav-muted);
  transition: color 0.2s;
}
.topnav a:hover, .topnav a:focus-visible { color: var(--nav-accent); }

.nav-cta {
  border: 1px solid var(--nav-line);
  padding: 0.35rem 0.8rem;
  border-radius: 99px;
  color: var(--nav-ink) !important;
  transition: border-color 0.2s, color 0.35s ease, background 0.2s;
}
.nav-cta:hover { border-color: var(--nav-accent); }
.topbar.scrolled .nav-cta:hover { background: var(--nav-accent); color: #FFF9F2 !important; }

/* ---------- hero ---------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: 6.5rem var(--pad) 4rem;
  perspective: 900px;
}

#scene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  display: block;
}

/* readability vignette painted above the 3D scene, below the content */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 60% 70% at 22% 45%, rgba(12, 19, 34, 0.82), rgba(12, 19, 34, 0) 70%),
    linear-gradient(to bottom, rgba(12, 19, 34, 0.35), rgba(12, 19, 34, 0.1) 45%, rgba(12, 19, 34, 0.95));
}

.hero-inner {
  position: relative;
  z-index: 1;
  max-width: var(--max);
  margin: 0 auto;
  width: 100%;
}

.eyebrow {
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  color: var(--amber);
  margin-bottom: 1.1rem;
}

.hero-title {
  font-size: clamp(2.1rem, 8.4vw, 5.6rem);
  font-stretch: 100%;
  font-weight: 800;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  margin-bottom: 1.4rem;
  transform-style: preserve-3d;
}
.hero-title .line { display: block; }
.hero-title .line:last-child { color: transparent; -webkit-text-stroke: 1.5px var(--ink); }

.hero-sub {
  max-width: 37rem;
  font-size: clamp(1rem, 2.2vw, 1.15rem);
  color: var(--muted);
  margin-bottom: 1.6rem;
}
.hero-sub strong { color: var(--ink); font-weight: 600; }

.hero-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 2rem; }
.hero-tags span {
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  color: var(--cyan);
  border: 1px solid rgba(87, 199, 227, 0.3);
  padding: 0.3rem 0.65rem;
  border-radius: 99px;
  background: rgba(12, 19, 34, 0.5);
}

.hero-actions { display: flex; flex-wrap: wrap; gap: 0.8rem; }

.btn {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  letter-spacing: 0.05em;
  text-decoration: none;
  padding: 0.75rem 1.35rem;
  border-radius: 8px;
  transition: transform 0.2s, background 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.btn:hover { transform: translateY(-2px); }
.btn-solid { background: var(--amber); color: #14100a; font-weight: 700; }
.btn-solid:hover { background: #ffc272; box-shadow: 0 8px 28px rgba(255, 178, 77, 0.25); }
.btn-ghost { border: 1px solid var(--line-strong); color: var(--ink); background: rgba(12, 19, 34, 0.5); }
.btn-ghost:hover { border-color: var(--amber); }

.scroll-hint {
  position: absolute;
  bottom: 1.4rem;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.62rem;
  letter-spacing: 0.35em;
  color: var(--muted);
  animation: bob 2.4s ease-in-out infinite;
}
@keyframes bob { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 7px); } }

/* ---------- strip ---------- */
.strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--bg-raised);
  position: relative;
  z-index: 2;
}
.strip-item {
  padding: 1.6rem 1rem;
  text-align: center;
  border-right: 1px solid var(--line);
}
.strip-item:last-child { border-right: 0; }
.strip-num, .strip-plus {
  font-family: var(--font-display);
  font-stretch: 115%;
  font-weight: 800;
  font-size: clamp(1.7rem, 4.5vw, 2.6rem);
  color: var(--amber);
}
.strip-label {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---------- sections ---------- */
.section {
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(4rem, 9vw, 6.5rem) var(--pad);
}

.section-head { margin-bottom: clamp(2.2rem, 5vw, 3.2rem); }
.section-head h2 {
  font-size: clamp(1.7rem, 5vw, 2.7rem);
  font-weight: 750;
  max-width: 40rem;
}
.section-sub { color: var(--muted); margin-top: 0.8rem; max-width: 38rem; }

/* ---------- about ---------- */
.about-grid {
  display: grid;
  grid-template-columns: 1.7fr 1fr;
  gap: clamp(1.6rem, 4vw, 3rem);
  align-items: start;
}
.about-copy p { margin-bottom: 1.1rem; color: var(--muted); }
.about-copy strong { color: var(--ink); font-weight: 600; }

.about-side {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--bg-card);
  padding: 0.4rem 1.4rem;
  position: sticky;
  top: 5.5rem;
}
.fact-row {
  display: grid;
  gap: 0.15rem;
  padding: 0.95rem 0;
  border-bottom: 1px solid var(--line);
}
.fact-row:last-child { border-bottom: 0; }
.fact-label { font-size: 0.62rem; letter-spacing: 0.18em; color: var(--amber); }
.fact-value { font-size: 0.9rem; color: var(--ink); line-height: 1.5; }

/* ---------- trace log (experience) ---------- */
.trace-log { list-style: none; border-left: 2px solid var(--line-strong); margin-left: 0.4rem; }

.frame {
  position: relative;
  padding: 0 0 2.8rem 1.6rem;
}
.frame::before {
  content: "";
  position: absolute;
  left: -7px;
  top: 0.45rem;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--amber);
  box-shadow: 0 0 0 4px var(--amber-dim);
}
.frame:last-child { padding-bottom: 0.4rem; }

.frame-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.2rem;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  margin-bottom: 0.55rem;
}
.frame-time { color: var(--amber); }
.frame-proto { color: var(--cyan); }

.frame-body h3 { font-size: 1.35rem; font-weight: 700; margin-bottom: 0.7rem; }
.frame-note { font-size: 0.66rem; letter-spacing: 0.08em; color: var(--muted); font-weight: 400; margin-left: 0.5rem; text-transform: uppercase; }

.frame-list { list-style: none; max-width: 46rem; }
.frame-list li {
  position: relative;
  color: var(--muted);
  font-size: 0.95rem;
  padding: 0.28rem 0 0.28rem 1.2rem;
}
.frame-list li::before {
  content: "▸";
  position: absolute;
  left: 0;
  color: var(--amber);
  font-size: 0.75rem;
  top: 0.48rem;
}

.chipset { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: 0.95rem; }
.chipset span {
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  color: var(--muted);
  background: var(--bg-raised);
  border: 1px solid var(--line);
  padding: 0.25rem 0.6rem;
  border-radius: 6px;
  transition: color 0.2s, border-color 0.2s;
}
.chipset span:hover { color: var(--cyan); border-color: rgba(87, 199, 227, 0.4); }

/* ---------- cards ---------- */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 1.1rem;
}
.card {
  display: block;
  text-decoration: none;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 1.5rem;
  transition: border-color 0.25s, box-shadow 0.25s;
  will-change: transform;
}
.card:hover {
  border-color: rgba(255, 178, 77, 0.5);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.4);
}
.card-proto { font-size: 0.64rem; letter-spacing: 0.14em; color: var(--cyan); margin-bottom: 0.7rem; }
.card h3 { font-size: 1.2rem; font-weight: 700; margin-bottom: 0.55rem; }
.card p { font-size: 0.9rem; color: var(--muted); }

/* ---------- skills ---------- */
.skills-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.1rem;
}
.skill-group {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 1.3rem 1.4rem;
  transition: border-color 0.25s, box-shadow 0.25s;
  will-change: transform;
}
.skill-group:hover { border-color: rgba(87, 199, 227, 0.4); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35); }
.skill-title { font-size: 0.74rem; letter-spacing: 0.1em; color: var(--amber); margin-bottom: 0.85rem; }
.skill-group .chipset { margin-top: 0; }

/* ---------- writing / post list ---------- */
.post-list { display: grid; gap: 0.9rem; }
.post-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 1.2rem;
  align-items: baseline;
  text-decoration: none;
  padding: 1.2rem 1.3rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg-card);
  transition: border-color 0.2s, transform 0.2s;
}
.post-row:hover { border-color: rgba(255, 178, 77, 0.5); transform: translateX(4px); }
.post-date { font-family: var(--font-mono); font-size: 0.7rem; color: var(--amber); letter-spacing: 0.08em; white-space: nowrap; }
.post-title { font-family: var(--font-display); font-stretch: 110%; font-weight: 700; font-size: 1.1rem; }
.post-desc { grid-column: 2; font-size: 0.85rem; color: var(--muted); margin-top: 0.2rem; }
.post-arrow { color: var(--amber); font-family: var(--font-mono); }

/* ---------- contact ---------- */
.contact-grid { display: grid; gap: 0; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.contact-row {
  display: grid;
  grid-template-columns: 7rem 1fr auto;
  gap: 1rem;
  align-items: center;
  padding: 1.15rem 1.4rem;
  text-decoration: none;
  background: var(--bg-card);
  border-bottom: 1px solid var(--line);
  transition: background 0.2s;
}
.contact-row:last-child { border-bottom: 0; }
.contact-row:hover:not(.static) { background: var(--bg-raised); }
.contact-row:hover:not(.static) .contact-arrow { transform: translateX(5px); }
.contact-label { font-size: 0.66rem; letter-spacing: 0.16em; color: var(--amber); }
.contact-value { font-size: 0.95rem; overflow-wrap: anywhere; }
.contact-arrow { color: var(--amber); transition: transform 0.2s; }

/* ---------- footer ---------- */
.footer {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  max-width: var(--max);
  margin: 0 auto;
  padding: 2rem var(--pad) 2.6rem;
  border-top: 1px solid var(--line);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  color: var(--muted);
}
.footer-sig { color: var(--cyan); }

/* ---------- article page ---------- */
.article-wrap {
  max-width: 720px;
  margin: 0 auto;
  padding: 7.5rem var(--pad) 4rem;
}
.article-back { font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.08em; color: var(--amber); text-decoration: none; }
.article-back:hover { text-decoration: underline; }
.article-head { margin: 1.6rem 0 2.4rem; padding-bottom: 1.6rem; border-bottom: 1px solid var(--line); }
.article-head h1 { font-size: clamp(1.8rem, 6vw, 2.8rem); font-weight: 780; margin: 0.6rem 0; }
.article-meta { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.12em; color: var(--muted); }
.article-meta .adate { color: var(--amber); }

/* the standfirst under the title. Body font, because descriptions run to
   several lines and monospace at that length is work to read */
.article-lede {
  font-size: 1.08rem;
  line-height: 1.6;
  color: var(--muted);
  max-width: 60ch;
  margin-top: 0.9rem;
}

.article-body { color: #C9D3E3; }
.article-body h2 { font-size: 1.5rem; margin: 2.2rem 0 0.8rem; color: var(--ink); }
.article-body h3 { font-size: 1.15rem; margin: 1.8rem 0 0.6rem; color: var(--ink); }
.article-body p { margin-bottom: 1.1rem; }
.article-body ul, .article-body ol { margin: 0 0 1.1rem 1.4rem; }
.article-body li { margin-bottom: 0.4rem; }
.article-body a { color: var(--amber); }
.article-body blockquote {
  border-left: 3px solid var(--amber);
  padding: 0.2rem 0 0.2rem 1.1rem;
  margin: 1.4rem 0;
  color: var(--muted);
  font-style: italic;
}
.article-body code {
  font-family: var(--font-mono);
  font-size: 0.85em;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 0.12em 0.4em;
}
.article-body pre {
  background: #0A101C;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 1.1rem 1.2rem;
  overflow-x: auto;
  margin: 1.3rem 0;
}
.article-body pre code { background: none; border: 0; padding: 0; font-size: 0.82rem; line-height: 1.6; color: #B9E0EF; }
.article-body img { max-width: 100%; border-radius: 10px; margin: 1.2rem 0; }
.article-body hr { border: 0; border-top: 1px dashed var(--line-strong); margin: 2rem 0; }

/* ---------- reveal animations ---------- */
.reveal, .frame, .card, .skill-group, .strip-item, .post-row, .section-head, .about-side, .step, .rules, .cta-band {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s cubic-bezier(0.2, 0.7, 0.3, 1), transform 0.7s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.in-view { opacity: 1; transform: none; }

.d1 { transition-delay: 0.08s; }
.d2 { transition-delay: 0.18s; }
.d3 { transition-delay: 0.3s; }
.d4 { transition-delay: 0.42s; }
.d5 { transition-delay: 0.54s; }

/* 3D tilt: JS sets --rx / --ry on pointermove; transition handles smoothing.
   Applied only after reveal completes (in-view + tilt-ready) so it doesn't
   fight the entrance transform. */
.tilt.tilt-ready {
  transform: perspective(800px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateZ(0);
  transition: transform 0.18s ease-out, border-color 0.25s, box-shadow 0.25s, opacity 0.7s;
}

/* ---------- responsive ---------- */
@media (max-width: 860px) {
  .about-grid { grid-template-columns: 1fr; }
  .about-side { position: static; }
  .strip { grid-template-columns: repeat(2, 1fr); }
  .strip-item:nth-child(2) { border-right: 0; }
  .strip-item:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
}

/* the nav carries seven items on a wide desktop; shed the optional ones
   before they crowd the wordmark, and everything but the CTA on phones */
@media (max-width: 980px) {
  .topnav a.nav-secondary { display: none; }
}

@media (max-width: 680px) {
  .topnav a:not(.nav-cta) { display: none; }
  .post-row { grid-template-columns: 1fr auto; }
  .post-date { grid-column: 1; }
  .post-desc { grid-column: 1 / -1; }
  .contact-row { grid-template-columns: 1fr auto; }
  .contact-label { grid-column: 1 / -1; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal, .frame, .card, .skill-group, .strip-item, .post-row, .section-head, .about-side, .step, .rules, .cta-band { opacity: 1; transform: none; transition: none; }
  .scroll-hint { animation: none; }
  .eng.live .eng-when::before { animation: none; }
  .tilt.tilt-ready { transform: none; }
  * { transition-duration: 0.01ms !important; }
}

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


/* ==========================================================
   ZONES
   The page alternates between a dark "signal" identity and a
   light commercial layer. Both use the SAME token names, so
   every component above works in either zone unchanged:
   .zone-light simply re-points the variables. Anything that
   hardcoded a dark value gets a light-zone correction below.
   ========================================================== */

.zone { position: relative; }

.zone-dark {
  background: var(--bg);
  color: var(--ink);
}

.zone-light {
  --bg: #F6F4EF;
  --bg-raised: #EDE9E1;
  --bg-card: #FFFDF9;
  --line: rgba(28, 35, 50, 0.13);
  --line-strong: rgba(28, 35, 50, 0.26);
  --ink: #131B2B;
  --muted: #55607A;
  --amber: #9A4409;
  --amber-dim: rgba(154, 68, 9, 0.12);
  --cyan: #0E6070;
  background: var(--bg);
  color: var(--ink);
}

/* signal-trace seam between zones */
.zone + .zone::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  z-index: 3;
  background: linear-gradient(90deg, transparent 0%, #FFB24D 22%, #57C7E3 58%, transparent 100%);
  opacity: 0.5;
}

/* --- light-zone corrections for components that assumed dark --- */
.zone-light .btn-solid { color: #FFF9F2; }
.zone-light .btn-solid:hover { background: #B4530E; box-shadow: 0 8px 28px rgba(154, 68, 9, 0.28); }
.zone-light .btn-ghost { background: rgba(255, 255, 255, 0.6); }

.zone-light .card:hover {
  border-color: rgba(154, 68, 9, 0.45);
  box-shadow: 0 18px 40px rgba(28, 35, 50, 0.09);
}
.zone-light .skill-group:hover { box-shadow: 0 18px 40px rgba(28, 35, 50, 0.08); }
.zone-light .post-row:hover { border-color: rgba(154, 68, 9, 0.5); }
.zone-light .contact-row:hover:not(.static) { background: var(--bg-raised); }
.zone-light .chipset span:hover { color: var(--cyan); border-color: rgba(14, 96, 112, 0.45); }


/* ==========================================================
   PROBLEM CARDS ("Where I help")
   Same .card chassis, plus a quote watermark. These are the
   client's words, not mine.
   ========================================================== */

.card.problem { position: relative; overflow: hidden; }
.card.problem::before {
  content: "\201C";
  position: absolute;
  top: -2.2rem;
  right: 0.5rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 8rem;
  line-height: 1;
  color: var(--amber);
  opacity: 0.09;
  pointer-events: none;
}
.card.problem h3 {
  position: relative;
  font-size: 1.14rem;
  font-stretch: 105%;
  line-height: 1.3;
  margin-bottom: 0.7rem;
  max-width: 21ch;
}
.card.problem p { position: relative; font-size: 0.92rem; }


/* ==========================================================
   STEPS ("How it works")
   ========================================================== */

.steps { list-style: none; display: grid; gap: 0.9rem; }

.step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.1rem;
  align-items: start;
  padding: 1.35rem 1.5rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--bg-card);
  transition: border-color 0.25s, box-shadow 0.25s;
  will-change: transform;
}
.step:hover {
  border-color: rgba(154, 68, 9, 0.4);
  box-shadow: 0 18px 40px rgba(28, 35, 50, 0.08);
}
.step-num {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1;
  color: var(--amber);
  background: var(--amber-dim);
  border: 1px solid rgba(154, 68, 9, 0.25);
  border-radius: 8px;
  padding: 0.45rem 0.55rem;
}
.step h3 { font-size: 1.08rem; font-weight: 700; margin-bottom: 0.35rem; }
.step p { font-size: 0.93rem; color: var(--muted); max-width: 52ch; }


/* ==========================================================
   GROUND RULES PANEL
   ========================================================== */

.rules {
  margin-top: 1.6rem;
  padding: 1.5rem 1.6rem;
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  background: var(--bg-raised);
  will-change: transform;
}
.rules-title { font-size: 0.72rem; letter-spacing: 0.14em; color: var(--amber); margin-bottom: 1.1rem; }
.rules-list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
  gap: 1.1rem 2rem;
}
.rules-list li {
  position: relative;
  padding-left: 1.2rem;
  font-size: 0.92rem;
  color: var(--muted);
}
.rules-list li::before {
  content: "\25B8";
  position: absolute;
  left: 0;
  top: 0.15rem;
  font-size: 0.75rem;
  color: var(--amber);
}
.rules-list strong { display: block; color: var(--ink); font-weight: 600; }


/* ==========================================================
   MID-PAGE CTA BAND
   A visitor convinced at 30% scroll should not have to travel
   to the footer to act.
   ========================================================== */

.cta-band {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem 1.6rem;
  margin-top: 2rem;
  padding: 1.5rem 1.7rem;
  border: 1px solid var(--amber);
  border-radius: 14px;
  background: var(--amber-dim);
}
.cta-band h3 { font-size: 1.15rem; font-weight: 750; margin-bottom: 0.25rem; }
.cta-band p { font-size: 0.93rem; color: var(--muted); max-width: 48ch; }
.cta-band .btn { white-space: nowrap; }

/* the "when I'm not the right call" variant of the rules panel:
   deliberately quieter than the panel above it */
.rules.anti {
  margin-top: 1rem;
  background: transparent;
  border-style: dashed;
}
.rules.anti .rules-title { color: var(--cyan); }
.rules.anti .rules-list li::before { content: "\2715"; color: var(--cyan); font-size: 0.7rem; top: 0.2rem; }

.hero-note {
  margin-top: 0.95rem;
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}


/* ==========================================================
   ENGAGEMENTS BAND
   Stands in for the client logo wall. The clients are described,
   not named, since most sit under NDA or inside regulated businesses.
   ========================================================== */

.engagements {
  list-style: none;
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  background: var(--bg-card);
}

.eng {
  display: grid;
  grid-template-columns: 7.5rem 1fr;
  gap: 1.4rem;
  align-items: start;
  padding: 1.35rem 1.5rem;
  border-bottom: 1px solid var(--line);
}
.eng:last-child { border-bottom: 0; }

.eng-when {
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: var(--muted);
  padding-top: 0.2rem;
  white-space: nowrap;
}
.eng h3 { font-size: 1.02rem; font-weight: 700; margin-bottom: 0.3rem; }
.eng-meta { font-size: 0.63rem; letter-spacing: 0.13em; color: var(--cyan); margin-bottom: 0.5rem; }
.eng p:last-child { font-size: 0.91rem; color: var(--muted); max-width: 62ch; }

/* the live engagement gets the amber treatment and a pulse */
.eng.live { background: var(--amber-dim); }
.eng.live .eng-when { color: var(--amber); font-weight: 700; }
.eng.live .eng-when::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 0.45rem;
  border-radius: 50%;
  background: var(--amber);
  animation: pulse 2.2s ease-in-out infinite;
}

/* matching marker on the current frame in the trace log */
.tag-live {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--amber);
  border: 1px solid rgba(255, 178, 77, 0.45);
  background: var(--amber-dim);
  border-radius: 99px;
  padding: 0.1rem 0.55rem;
}
.frame.current::before { background: var(--amber); box-shadow: 0 0 0 5px var(--amber-dim); }

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.35; transform: scale(0.75); }
}


/* ==========================================================
   TESTIMONIAL CARDS: styling is ready, markup is commented
   out in index.html until there are real quotes to put in it.
   ========================================================== */

.card.quote p { font-size: 1rem; color: var(--ink); line-height: 1.6; margin-bottom: 1.1rem; }
.quote-by { display: grid; gap: 0.15rem; }
.quote-by strong { font-weight: 600; font-size: 0.95rem; }
.quote-by span { font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }


/* ==========================================================
   REQUEST-A-CALL PAGE (call.html)
   Deliberately email-first: no calendar widget, so every call
   starts with a written description of the problem.
   ========================================================== */

.book-wrap {
  max-width: 780px;
  margin: 0 auto;
  padding: 7.5rem var(--pad) 4rem;
}

.book-head { margin: 1.6rem 0 2.4rem; }
.book-head h1 { font-size: clamp(2rem, 7vw, 3.2rem); font-weight: 800; margin: 0.7rem 0; }
.book-head .section-sub { margin-top: 0; }

/* the "three lines is enough" panel */
.ask {
  padding: 1.5rem 1.6rem;
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  background: var(--bg-raised);
  margin-bottom: 1.6rem;
  will-change: transform;
}
.ask .rules-title { margin-bottom: 1rem; }
.ask-list {
  list-style: none;
  counter-reset: ask;
  display: grid;
  gap: 0.8rem;
  margin-bottom: 1.4rem;
}
.ask-list li {
  position: relative;
  padding-left: 2.3rem;
  font-size: 0.95rem;
  color: var(--muted);
  counter-increment: ask;
}
.ask-list li::before {
  content: "0" counter(ask);
  position: absolute;
  left: 0;
  top: 0.15rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--amber);
}
.ask-list strong { color: var(--ink); font-weight: 600; }

.book-actions { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-bottom: 0.9rem; }
.book-actions .btn-ghost { border: 1px solid var(--line-strong); cursor: pointer; font-family: var(--font-mono); }

.book-note { font-size: 0.62rem; letter-spacing: 0.12em; color: var(--muted); line-height: 1.7; }
.book-note.ok-note { color: var(--amber); }
.book-note.bad-note { color: #E06C5A; }


/* ==========================================================
   FAQ
   Real <details> elements: the answer text is in the DOM whether
   or not it is open, so crawlers and AI answer engines read all
   of it. Mirrored by FAQPage JSON-LD in index.html. If you edit
   the copy here, edit it there too.
   ========================================================== */

.faq { display: grid; gap: 0.6rem; }

.qa {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg-card);
  transition: border-color 0.25s;
}
.qa[open] { border-color: var(--line-strong); }
.qa:hover { border-color: rgba(255, 178, 77, 0.4); }

.qa summary {
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
  padding: 1.1rem 1.3rem;
  cursor: pointer;
  list-style: none;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after {
  content: "+";
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 1.1rem;
  line-height: 1;
  color: var(--amber);
  transition: transform 0.25s;
}
.qa[open] summary::after { content: "−"; }

.qa summary h3 {
  display: inline;
  font-family: var(--font-display);
  font-stretch: 105%;
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.35;
}
.qa > p {
  padding: 0 1.3rem 1.25rem;
  margin-top: -0.15rem;
  font-size: 0.93rem;
  color: var(--muted);
  max-width: 76ch;
}
.qa > p strong { color: var(--ink); font-weight: 600; }


/* ==========================================================
   ARTICLE PAGE EXTRAS (generated pages only)
   ========================================================== */

.postnav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: 3rem;
  padding-top: 1.8rem;
  border-top: 1px solid var(--line);
}
.postnav-link {
  display: grid;
  gap: 0.3rem;
  padding: 1rem 1.2rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg-card);
  text-decoration: none;
  font-size: 0.95rem;
  transition: border-color 0.2s, transform 0.2s;
}
.postnav-link:hover { border-color: rgba(255, 178, 77, 0.5); transform: translateY(-2px); }
.postnav-link .mono { font-size: 0.62rem; letter-spacing: 0.16em; color: var(--amber); }
.postnav-link.next { text-align: right; }

.article-cta {
  margin-top: 2.5rem;
  padding: 1.8rem;
  border: 1px solid var(--amber);
  border-radius: 14px;
  background: var(--amber-dim);
}
.article-cta h2 { font-size: 1.3rem; margin-bottom: 0.3rem; }
.article-cta p { color: var(--muted); font-size: 0.95rem; margin-bottom: 1.2rem; max-width: 54ch; }
.article-cta-actions { display: flex; flex-wrap: wrap; gap: 0.7rem; }

.byline { display: flex; align-items: center; gap: 1rem; margin-bottom: 0.9rem; }
.byline-img {
  width: 68px;
  height: 68px;
  flex: none;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--line-strong);
}
.byline-role { font-size: 0.62rem; letter-spacing: 0.13em; color: var(--muted); }
.article-cta .byline p { margin-bottom: 0; }


/* ==========================================================
   PORTRAIT (about panel)
   Sits flush at the top of the facts card. The framing is done
   at build time by build.mjs from assets/me.jpg. If you swap
   the photo, retune FACE_X / FACE_Y there rather than here.
   ========================================================== */

.portrait {
  position: relative;
  margin: -0.4rem -1.4rem 0.2rem;
  border-radius: 13px 13px 0 0;
  overflow: hidden;
  line-height: 0;
  background: var(--bg-raised);
}
.portrait img {
  display: block;
  width: 100%;
  height: auto;
}
/* fade the bottom edge into the facts card so the photo reads as
   part of the panel rather than pasted on top of it */
.portrait::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 28%;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--bg-card));
}

/* the LinkedIn row at the bottom of the facts card */
.fact-link { text-decoration: none; transition: background 0.2s; }
.fact-link:hover { background: var(--bg-raised); }
.fact-link:hover .contact-arrow { transform: translateX(4px); }
.fact-link .contact-arrow { display: inline-block; }


/* ---------- responsive: new components ---------- */
@media (max-width: 620px) {
  .postnav { grid-template-columns: 1fr; }
  .postnav-link.next { text-align: left; }
}

@media (max-width: 620px) {
  .eng { grid-template-columns: 1fr; gap: 0.5rem; }
}

@media (max-width: 520px) {
  .step { grid-template-columns: 1fr; gap: 0.7rem; }
  .step-num { justify-self: start; }
  .card.problem h3 { max-width: none; }
}