@font-face { font-family: "Switzer"; src: url("/assets/fonts/switzer-300.woff2") format("woff2"); font-style: normal; font-weight: 300; font-display: swap; }
@font-face { font-family: "Switzer"; src: url("/assets/fonts/switzer-400.woff2") format("woff2"); font-style: normal; font-weight: 400; font-display: swap; }
@font-face { font-family: "Switzer"; src: url("/assets/fonts/switzer-500.woff2") format("woff2"); font-style: normal; font-weight: 500; font-display: swap; }
@font-face { font-family: "Switzer"; src: url("/assets/fonts/switzer-600.woff2") format("woff2"); font-style: normal; font-weight: 600; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("/assets/fonts/ibm-plex-mono-400.woff2") format("woff2"); font-style: normal; font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("/assets/fonts/ibm-plex-mono-500.woff2") format("woff2"); font-style: normal; font-weight: 500; font-display: swap; }

:root {
  --field-carbon: #090909;
  --field-panel: #151515;
  --field-ink: #f4f4f0;
  --field-silver: #c9c9c3;
  --field-smoke: #90908b;
  --field-line: #30302d;
  --field-blue: #5b76ff;
  --field-blue-soft: #b8c4ff;
  --field-red: #df2b20;
  --field-display: "Switzer", "Helvetica Neue", Arial, sans-serif;
  --field-mono: "IBM Plex Mono", monospace;
}

body.shell-body,
body.blog-atlas {
  --faint: #797975;
  background: var(--field-carbon);
  background-image: none;
  color: var(--field-ink);
  font-family: var(--field-display);
  font-size: 17px;
}

body.shell-body.blog-atlas,
body.shell-body.shell-body--session {
  background-color: var(--field-carbon);
  background-image: none;
}

body.shell-body--session {
  --ink: var(--field-ink);
  --paper: var(--field-carbon);
  --body: var(--field-silver);
  --muted: var(--field-smoke);
  --line: var(--field-line);
  --line-strong: #4a4a46;
  --accent: var(--field-blue);
  --accent-ink: var(--field-blue-soft);
  --signal: var(--field-blue);
  --card: var(--field-panel);
  background: var(--field-carbon);
  color: var(--field-silver);
  font-family: var(--field-display);
}

body.shell-body .shell-nav,
body.blog-atlas .shell-nav {
  border-color: rgba(255, 255, 255, .12);
  background: rgba(9, 9, 9, .9);
  color: var(--field-ink);
}

body.shell-body .shell-nav-inner,
body.blog-atlas .shell-nav-inner { max-width: 1280px; height: 70px; }

body.shell-body .shell-nav-name,
body.blog-atlas .shell-nav-name {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--field-ink);
  font-family: var(--field-display);
  font-size: 14px;
  font-weight: 600;
}

body.shell-body .shell-nav-links a,
body.blog-atlas .shell-nav-links a {
  border-radius: 0;
  color: var(--field-smoke);
  font-family: var(--field-display);
  font-size: 12px;
  font-weight: 500;
}

body.shell-body .shell-nav-links a::after,
body.blog-atlas .shell-nav-links a::after { background: var(--field-blue); }
body.shell-body .shell-nav-links a:hover,
body.shell-body .shell-nav-links a.is-active,
body.blog-atlas .shell-nav-links a:hover,
body.blog-atlas .shell-nav-links a.is-active { color: var(--field-ink); }

body.shell-body .shell-footer,
body.blog-atlas .shell-footer { margin-top: 0; border-color: var(--field-line); background: #070707; }
body.shell-body .shell-footer-inner,
body.blog-atlas .shell-footer-inner { max-width: 1280px; color: var(--field-smoke); }
body.shell-body .shell-footer-tagline,
body.blog-atlas .shell-footer-tagline { color: var(--field-ink); font-weight: 500; }
body.shell-body .shell-footer-links a,
body.blog-atlas .shell-footer-links a { color: var(--field-silver); }

/* Field Notes index */
body.blog-atlas .blog-wrap { max-width: 1280px; padding-bottom: 110px; }
body.blog-atlas .journal-hero { position: relative; min-height: 760px; border-color: var(--field-line); }
body.blog-atlas .journal-hero__copy { position: relative; z-index: 2; overflow: hidden; padding-right: clamp(2rem, 6vw, 6rem); background: var(--field-carbon); }
body.blog-atlas .journal-hero__copy::before {
  content: "NOTES";
  position: absolute;
  z-index: -1;
  left: -15px;
  top: 26%;
  color: #171715;
  font: 300 clamp(8rem, 18vw, 16rem)/.8 var(--field-display);
  letter-spacing: -.09em;
  white-space: nowrap;
}
body.blog-atlas .journal-kicker,
body.blog-atlas .journal-hero__portrait figcaption { color: var(--field-blue-soft); font-family: var(--field-mono); }
body.blog-atlas .journal-hero h1 {
  max-width: 780px;
  color: var(--field-ink);
  font: 300 clamp(4rem, 8vw, 7.3rem)/.82 var(--field-display);
  letter-spacing: -.075em;
}
body.blog-atlas .journal-hero h1 em { color: var(--field-ink); font-weight: 600; }
body.blog-atlas .journal-hero p { color: var(--field-smoke); font-size: 16px; }
body.blog-atlas .journal-scroll { color: var(--field-ink); font-family: var(--field-mono); }
body.blog-atlas .journal-scroll span,
body.blog-atlas .journal-formats a { color: var(--field-blue-soft); }
body.blog-atlas .journal-formats { font-family: var(--field-mono); }
body.blog-atlas .journal-formats span { color: var(--field-smoke); }
body.blog-atlas .journal-origin { display: inline-flex; align-items: center; gap: 10px; width: max-content; margin-top: 24px; padding-top: 12px; border-top: 1px solid var(--field-line); color: var(--field-silver); font: 500 10px var(--field-mono); text-transform: uppercase; }
body.blog-atlas .journal-origin b { padding: 4px 7px; background: var(--field-red); color: #fff; font: inherit; }
body.blog-atlas .journal-hero__portrait { background: #111; }
body.blog-atlas .journal-hero__portrait::after { background: linear-gradient(180deg, transparent 60%, rgba(9, 9, 9, .6)); mix-blend-mode: normal; }
body.blog-atlas .journal-hero__portrait img { object-position: 72% 50%; filter: saturate(.74) brightness(.8) contrast(1.04); }
body.blog-atlas .journal-hero__portrait:hover img { filter: saturate(1) brightness(.96); }

body.blog-atlas .blog-list { max-width: none; padding-top: 100px; counter-reset: field-note; }
body.blog-atlas .blog-entry {
  counter-increment: field-note;
  min-height: 230px;
  padding: 30px 0;
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr) 150px;
  grid-template-rows: auto auto 1fr;
  gap: 8px 28px;
  border-color: var(--field-line);
  background: transparent;
  transition: color 220ms ease, padding 320ms cubic-bezier(.16, 1, .3, 1);
}
body.blog-atlas .blog-entry::before {
  content: "0" counter(field-note);
  position: static;
  width: auto;
  height: auto;
  grid-row: 1 / 4;
  color: #62625e;
  background: none;
  transform: none;
  font: 300 42px/.9 var(--field-display);
}
body.blog-atlas .blog-entry::after { content: "↗"; grid-column: 3; grid-row: 1 / 4; align-self: center; justify-self: end; color: var(--field-blue-soft); font-size: 28px; }
body.blog-atlas .blog-entry:hover { padding-inline: 12px; background: #111; }
body.blog-atlas .blog-entry-meta { grid-column: 2; color: var(--field-blue-soft); font-family: var(--field-mono); font-size: 10px; }
body.blog-atlas .blog-entry-title { grid-column: 2; max-width: 850px; color: var(--field-ink); font: 500 clamp(2rem, 4.4vw, 4rem)/.94 var(--field-display); letter-spacing: -.055em; }
body.blog-atlas .blog-entry:hover .blog-entry-title { color: var(--field-ink); }
body.blog-atlas .blog-entry-desc { grid-column: 2; max-width: 680px; color: var(--field-smoke); font-size: 14px; }

/* Shared essay register */
body.shell-body--session .essay-wrap,
body.shell-body--session .wrap { max-width: 760px; }
body.shell-body--session .essay-hero,
body.shell-body--session > header.hero {
  position: relative;
  overflow: hidden;
  padding: 100px 0 76px;
  border-color: var(--field-line);
  background: var(--field-carbon);
  color: var(--field-ink);
}
body.shell-body--session .essay-hero::after,
body.shell-body--session > header.hero::after {
  content: "FIELD NOTE";
  position: absolute;
  right: -24px;
  bottom: -28px;
  color: #161614;
  font: 300 clamp(5rem, 13vw, 11rem)/.8 var(--field-display);
  letter-spacing: -.08em;
  pointer-events: none;
}
body.shell-body--session .essay-meta,
body.shell-body--session .meta-top { position: relative; z-index: 1; color: var(--field-blue-soft); font-family: var(--field-mono); }
body.shell-body--session .essay-meta .sep,
body.shell-body--session .meta-top .sep { color: #51514d; }
body.shell-body--session .essay-hero h1,
body.shell-body--session > header.hero h1 {
  position: relative;
  z-index: 1;
  max-width: 19ch;
  color: var(--field-ink);
  font: 500 clamp(3.5rem, 7.5vw, 6.8rem)/.9 var(--field-display);
  letter-spacing: -.065em;
}
body.shell-body--session .essay-hero .sub,
body.shell-body--session > header.hero p.sub { position: relative; z-index: 1; color: var(--field-smoke); font-size: 18px; }
body.shell-body--session .essay-article,
body.shell-body--session > article { padding: 72px 0 100px; background: #0d0d0c; color: var(--field-silver); font-family: var(--field-display); font-size: 18px; }
body.shell-body--session .essay-article p,
body.shell-body--session > article p { color: var(--field-silver); }
body.shell-body--session .essay-article .lead,
body.shell-body--session > article .lead { color: var(--field-ink); font-family: var(--field-display); font-size: 24px; }
body.shell-body--session .essay-article h2,
body.shell-body--session > article h2 { margin-top: 2.6em; color: var(--field-ink); font: 500 clamp(2rem, 4vw, 3.25rem)/1 var(--field-display); letter-spacing: -.045em; }
body.shell-body--session .essay-article h3,
body.shell-body--session > article h3 { color: var(--field-blue-soft); font-family: var(--field-display); }
body.shell-body--session .essay-article strong,
body.shell-body--session > article strong { color: var(--field-ink); }
body.shell-body--session .essay-article a,
body.shell-body--session > article a { color: var(--field-blue-soft); }
body.shell-body--session .essay-article .note,
body.shell-body--session > article .note { border: 1px solid var(--field-line); border-left: 3px solid var(--field-blue); border-radius: 1px; background: var(--field-panel); }
body.shell-body--session .essay-signoff,
body.shell-body--session .signoff { border-color: var(--field-line); color: var(--field-smoke); }
body.shell-body--session .essay-linkedin { color: var(--field-blue-soft); }

/* Local AI long-form components */
body.shell-body--session .presenters { border-color: var(--field-line); }
body.shell-body--session .presenters__label,
body.shell-body--session .presenter__role { color: var(--field-smoke); }
body.shell-body--session .presenter__name { color: var(--field-ink); font-family: var(--field-display); }
body.shell-body--session .presenter__frame { border-color: #4f5c9e; border-radius: 2px; }
body.shell-body--session .deck-link { border-radius: 1px; background: var(--field-ink); color: var(--field-carbon); }
body.shell-body--session .cta-secondary { border-radius: 1px; border-color: var(--field-line); }
body.shell-body--session .statement { border-color: var(--field-line); }
body.shell-body--session .statement p { color: var(--field-ink); font-family: var(--field-display); }
body.shell-body--session .seq,
body.shell-body--session .seq .row,
body.shell-body--session .kit,
body.shell-body--session .kit a { border-color: var(--field-line); }
body.shell-body--session .seq .n,
body.shell-body--session .kit .k-go { color: var(--field-blue-soft); }
body.shell-body--session .seq .t b,
body.shell-body--session .kit .k-name { color: var(--field-ink); font-family: var(--field-display); }
body.shell-body--session .kit .k-desc,
body.shell-body--session .credit { color: var(--field-smoke); }
body.shell-body--session .takeaways { border: 1px solid var(--field-line); border-radius: 1px; background: #070707; }
body.shell-body--session .takeaways h2,
body.shell-body--session .takeaways li b { color: var(--field-ink); }
body.shell-body--session .takeaways li { color: var(--field-silver); }
body.shell-body--session .takeaways li::before { color: var(--field-blue-soft); }
body.shell-body--session .reel { background: #0b0b0a; font-family: var(--field-display); }
body.shell-body--session .reel__kicker { color: var(--field-blue-soft); }
body.shell-body--session .reel__title,
body.shell-body--session .reel__quote,
body.shell-body--session .reel__name { color: var(--field-ink); }
body.shell-body--session .reel__card { border-color: var(--field-line); border-radius: 1px; background: var(--field-panel); box-shadow: none; }
body.shell-body--session .reel__role { color: var(--field-smoke); }

/* Dashboard Atlas keeps play inside the editorial frame */
body.shell-body--session .atlas-story-hero { border-color: var(--field-line); background: var(--field-carbon); color: var(--field-ink); }
body.shell-body--session .atlas-story-hero::before { border-color: var(--field-line); background: var(--field-blue); opacity: .6; }
body.shell-body--session .atlas-story-hero::after { border-color: var(--field-line); background: var(--field-ink); opacity: .25; }
body.shell-body--session .atlas-story-hero h1 { color: var(--field-ink); }
body.shell-body--session .atlas-story-hero .sub { color: var(--field-smoke); }
body.shell-body--session .pet-project-label { border-color: var(--field-line); background: var(--field-panel); transform: none; }
body.shell-body--session .essay-article.atlas-story { background: #0d0d0c; color: var(--field-silver); }
body.shell-body--session .atlas-story h2,
body.shell-body--session .atlas-story h3,
body.shell-body--session .atlas-story .lead { color: var(--field-ink); }
body.shell-body--session .live-capture { border-color: var(--field-line); border-radius: 1px; background: var(--field-panel); box-shadow: 7px 7px 0 #26336f; transform: none; }
body.shell-body--session .live-capture__bar { color: var(--field-ink); }
body.shell-body--session .live-capture img { border-color: var(--field-line); border-radius: 0; }
body.shell-body--session .live-capture figcaption { color: var(--field-silver); }
body.shell-body--session .wrong-turn,
body.shell-body--session .atlas-cta { border-color: var(--field-line); border-radius: 1px; background: var(--field-panel); color: var(--field-silver); box-shadow: none; }
body.shell-body--session .build-log,
body.shell-body--session .dashboard-list,
body.shell-body--session .story-ending { border-color: var(--field-line); }
body.shell-body--session .build-step,
body.shell-body--session .dashboard-list a { border-color: var(--field-line); }
body.shell-body--session .build-step::before { border-color: #6479ee; background: #20243c; color: var(--field-ink); transform: none; }
body.shell-body--session .build-step h3,
body.shell-body--session .dashboard-list a,
body.shell-body--session .dashboard-list strong,
body.shell-body--session .free-stack strong,
body.shell-body--session .story-ending p:first-child { color: var(--field-ink); }
body.shell-body--session .build-step p,
body.shell-body--session .dashboard-list small,
body.shell-body--session .free-stack span { color: var(--field-smoke); }
body.shell-body--session .prompt-stack details,
body.shell-body--session .free-stack div { border-color: var(--field-line); border-radius: 1px; background: var(--field-panel); }
body.shell-body--session .prompt-stack summary { color: var(--field-ink); }
body.shell-body--session .prompt-stack pre { border-color: var(--field-line); background: #090909; color: var(--field-silver); }
body.shell-body--session .story-signoff { color: var(--field-blue-soft); }

@media (max-width: 700px) {
  body.shell-body .shell-nav-inner,
  body.blog-atlas .shell-nav-inner { height: 62px; }
  body.shell-body .shell-nav-links a,
  body.blog-atlas .shell-nav-links a { padding-inline: 7px; font-size: 11px; }
  body.blog-atlas .journal-hero { min-height: 0; }
  body.blog-atlas .journal-hero__copy { min-height: 590px; }
  body.blog-atlas .journal-hero h1 { font-size: clamp(4rem, 19vw, 6rem); }
  body.blog-atlas .journal-hero__portrait { height: 560px; }
  body.blog-atlas .blog-list { padding-top: 70px; }
  body.blog-atlas .blog-entry { min-height: 0; grid-template-columns: 45px 1fr 24px; gap: 7px 14px; padding-block: 26px; }
  body.blog-atlas .blog-entry::before { font-size: 22px; }
  body.blog-atlas .blog-entry::after { grid-column: 3; font-size: 18px; }
  body.blog-atlas .blog-entry-title { font-size: clamp(2rem, 10vw, 3rem); }
  body.blog-atlas .blog-entry-date { margin-left: 0; }
  body.shell-body--session .essay-hero,
  body.shell-body--session > header.hero { padding: 76px 0 58px; }
  body.shell-body--session .essay-hero h1,
  body.shell-body--session > header.hero h1 { font-size: clamp(3.4rem, 16vw, 5rem); }
  body.shell-body--session .essay-article,
  body.shell-body--session > article { padding-block: 54px 80px; }
}

@media (prefers-reduced-motion: reduce) {
  body.blog-atlas .journal-hero__portrait img,
  body.blog-atlas .blog-entry { transition: none; }
}