/* ==========================================================================
   CareerCatalyst HQ - site stylesheet
   --------------------------------------------------------------------------
   Design direction: ultra-minimalist editorial, 2D and flat.

   Three rules govern everything here:
     1. Stark white. No fills, no tints, no gradients. Separation is done with
        hairline rules, not with panels.
     2. Zero colour accents. Charcoal #111111 is the only "accent". Because
        links cannot rely on hue, they are underlined - that is a requirement,
        not a style preference.
     3. Flat 2D. No shadows, no blur, no rounded corners, no hover movement.
        Nothing implies depth.

   Typography carries the design: a tight serif for headlines and long-form
   prose, system sans for UI, meta and captions.

   Layout model:
     --shell    page shell - header inner, sections and footer all share it
     --measure  the reading column nested inside the shell
   ========================================================================== */

:root {
  /* --- Ink --------------------------------------------------------------- */
  --ink:        #111111;   /* primary text and the only accent */
  --ink-2:      #5a5a5a;   /* secondary text */
  --ink-3:      #8a8a8a;   /* meta, captions, tertiary */
  --ink-inv:    #ffffff;

  /* --- Surfaces ---------------------------------------------------------- */
  --bg:         #ffffff;
  --bg-soft:    #fafafa;

  /* --- Rules ------------------------------------------------------------- */
  --rule:       #e6e6e6;
  --rule-2:     #cfcfcf;

  /* --- Compatibility aliases --------------------------------------------- */
  --label:        var(--ink);
  --label-2:      var(--ink-2);
  --label-3:      var(--rule-2);
  --sep:          var(--rule);
  --surface:      var(--bg);
  --bg-grouped:   var(--bg);
  --fill:         rgba(0, 0, 0, 0.05);
  --fill-2:       rgba(0, 0, 0, 0.09);
  --muted:        var(--ink-2);
  --panel:        var(--bg);
  --panel-2:      var(--bg-soft);
  --rule-strong:  var(--rule-2);
  --ink-soft:     var(--ink-2);

  /* --- Metrics ----------------------------------------------------------- */
  --shell:      68rem;
  --measure:    42rem;     /* slightly tighter measure reads better in serif */
  --gutter:     1.5rem;

  --font-ui:    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                "Helvetica Neue", Arial, sans-serif;
  --font-read:  Georgia, "Iowan Old Style", "Charter", "Palatino Linotype",
                "Times New Roman", serif;
}

* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 4.5rem;
  accent-color: var(--ink);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 17px/1.65 var(--font-ui);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--ink); color: var(--ink-inv); }

/* --- Accessibility ------------------------------------------------------- */

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: var(--ink-inv);
  padding: .6rem 1rem;
  z-index: 30;
}
.skip-link:focus { left: 0; }

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

/* --- Shell --------------------------------------------------------------- */

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.reading {
  width: 100%;
  max-width: var(--measure);
  margin-inline: auto;
}

/* --- Masthead -----------------------------------------------------------
   Flat and solid. The blurred translucent material is gone: it implies depth,
   which this design does not use. */

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--bg);
  border-bottom: 1px solid var(--ink);
}

.site-header .inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding-block: .85rem;

  /* Full-bleed. The header deliberately breaks out of the 68rem content
     column so the brand mark sits at the viewport edge, the way the reference
     layout does. The gap between the mark and the content below is intended:
     the header is its own chrome band, not part of the reading measure. */
  max-width: none;
  padding-inline: clamp(1rem, 2.2vw, 2rem);
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
}

/* The mark is black artwork on transparency, so it sits directly on the white
   page. There must be no background colour here: a tinted tile would hide the
   glyph completely. */
.wordmark .mark {
  display: block;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
}

.nav-right {
  display: flex;
  align-items: center;
  gap: .35rem;
  flex-wrap: wrap;
  margin-left: auto;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: .1rem;
  flex-wrap: wrap;
}

.site-nav a {
  font-size: .85rem;
  font-weight: 500;
  color: var(--ink-2);
  text-decoration: none;
  padding: .4rem .6rem;
}
.site-nav a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.site-nav a[aria-current="page"] { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 2px; }

/* --- Buttons ------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  border: 1px solid var(--ink);
  cursor: pointer;
  font: 500 .85rem/1 var(--font-ui);
  letter-spacing: .01em;
  text-decoration: none;
  padding: .68rem 1.2rem;
  background: var(--ink);
  color: var(--ink-inv);
}
.btn:hover { background: transparent; color: var(--ink); }

.btn-tinted { background: transparent; color: var(--ink); }
.btn-tinted:hover { background: var(--ink); color: var(--ink-inv); }

.btn-sm { font-size: .8rem; padding: .45rem .85rem; }

/* --- Section furniture --------------------------------------------------- */

.section { margin-bottom: clamp(2.5rem, 5vw, 4rem); }

.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin: 0 0 1.25rem;
  padding-bottom: .7rem;
  border-bottom: 1px solid var(--ink);
}

.section-head h2 {
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin: 0;
}

.section-head .note { font-size: .8rem; color: var(--ink-3); }

/* --- Segmented control --------------------------------------------------- */

.segmented { display: inline-flex; gap: 0; border: 1px solid var(--ink); }

.segmented a {
  font-size: .82rem;
  font-weight: 500;
  color: var(--ink-2);
  text-decoration: none;
  padding: .38rem .9rem;
  border-right: 1px solid var(--ink);
}
.segmented a:last-child { border-right: 0; }
.segmented a[aria-current="page"] { background: var(--ink); color: var(--ink-inv); }

/* --- Hero ---------------------------------------------------------------- */

.hero { padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(1.5rem, 3vw, 2.25rem); }

.hero-copy { max-width: 52rem; }

.eyebrow {
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 1rem;
}

.hero h1 {
  font-family: var(--font-read);
  font-size: clamp(2.1rem, 1.2rem + 3.6vw, 3.6rem);
  line-height: 1.06;
  letter-spacing: -.032em;
  margin: 0 0 1.15rem;
}

.hero .lede {
  font-size: clamp(1.02rem, .98rem + .4vw, 1.2rem);
  line-height: 1.6;
  color: var(--ink-2);
  margin: 0 0 1.6rem;
}

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

/* --- Notice panel -------------------------------------------------------
   Outlined in solid ink rather than filled. No radius, no shadow. */

.status {
  border: 1px solid var(--ink);
  padding: clamp(1.4rem, 3vw, 2rem);
  margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
}

.status h2 {
  font-family: var(--font-read);
  font-size: clamp(1.15rem, 1rem + .7vw, 1.45rem);
  letter-spacing: -.015em;
  margin: 0 0 .7rem;
}

.status p { margin: 0 0 .85rem; color: var(--ink-2); max-width: 52rem; line-height: 1.65; }
.status p:last-child { margin-bottom: 0; }
.status a { color: var(--ink); text-underline-offset: 3px; }

/* --- Topic columns ------------------------------------------------------
   Editorial columns, not cards. A solid top rule per column reads as a
   masthead grid; there is no box, no fill and no hover state. */

.card-grid {
  display: grid;
  gap: 0;
  grid-template-columns: 1fr;
  border-top: 0;
}

@media (min-width: 640px) {
  .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2.5rem; }
}

@media (min-width: 1000px) {
  .card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.card {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  padding: 1.15rem 0 1.6rem;
  border-top: 1px solid var(--ink);
}

.card .tag {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
  order: -1;
}

.card h3 {
  font-family: var(--font-read);
  font-size: 1.22rem;
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: -.02em;
  margin: 0;
}

.card p {
  margin: 0;
  font-size: .93rem;
  line-height: 1.6;
  color: var(--ink-2);
}

/* --- Post list ----------------------------------------------------------
   Rule-separated editorial rows. No cards, no thumbnails by default. */

.post-card-list { display: grid; gap: 0; }

.post-card {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
  padding: 1.6rem 0;
  border-top: 1px solid var(--rule);
  text-decoration: none;
  color: inherit;
}
.post-card:first-child { border-top: 1px solid var(--ink); }

@media (min-width: 700px) {
  .post-card { grid-template-columns: minmax(0, 1fr) 200px; align-items: start; }
  .post-card-body { order: 1; }
  .post-card-thumb { order: 2; }
}

.post-card:hover .post-card-title { text-decoration: underline; text-underline-offset: 3px; }

.post-card-thumb {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--bg-soft);
  border: 1px solid var(--rule);
}
.post-card-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }

.post-card-meta {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: .5rem;
}

.post-card-title {
  font-family: var(--font-read);
  font-size: clamp(1.3rem, 1.1rem + 1vw, 1.75rem);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -.025em;
  margin: 0 0 .45rem;
}

.post-card-dek { margin: 0; font-size: .96rem; line-height: 1.6; color: var(--ink-2); }

.post-card-foot { margin-top: .75rem; font-size: .78rem; color: var(--ink-3); }

/* --- Legacy post list ---------------------------------------------------- */

.post-list { list-style: none; margin: 0; padding: 0; }
.post-item { padding: 1.6rem 0; border-top: 1px solid var(--rule); }
.post-item:first-child { border-top: 1px solid var(--ink); padding-top: 1.6rem; }

.post-item h2 {
  font-family: var(--font-read);
  font-size: clamp(1.3rem, 1.1rem + 1vw, 1.7rem);
  font-weight: 400;
  line-height: 1.22;
  letter-spacing: -.025em;
  margin: 0 0 .45rem;
}
.post-item h2 a { color: var(--ink); text-decoration: none; }
.post-item h2 a:hover { text-decoration: underline; text-underline-offset: 3px; }

.post-meta { font-size: .78rem; color: var(--ink-3); margin: 0 0 .6rem; }
.post-item p { margin: 0; color: var(--ink-2); font-size: .96rem; line-height: 1.65; max-width: var(--measure); }

/* --- Prose ---------------------------------------------------------------
   Links are underlined because there is no colour left to distinguish them. */

.prose {
  font-family: var(--font-read);
  font-size: clamp(17.5px, 16px + .5vw, 19.5px);
  line-height: 1.72;
  color: var(--ink);
}

.prose h1 { font-size: clamp(1.9rem, 1.3rem + 2.6vw, 2.6rem); line-height: 1.12; letter-spacing: -.03em; font-weight: 400; margin: 0 0 1.1rem; }
.prose h2 { font-size: clamp(1.28rem, 1.1rem + .8vw, 1.55rem); line-height: 1.28; letter-spacing: -.02em; margin: 2.4rem 0 .8rem; }
.prose h3 { font-size: 1.12rem; margin: 1.9rem 0 .55rem; }
.prose p  { margin: 0 0 1.15rem; }
.prose ul, .prose ol { margin: 0 0 1.3rem; padding-left: 1.3rem; }
.prose li { margin: .4rem 0; }
.prose strong { color: var(--ink); font-weight: 700; }

.prose a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.prose a:hover { text-decoration-thickness: 2px; }

.prose blockquote {
  margin: 1.6rem 0;
  padding: .2rem 0 .2rem 1.25rem;
  border-left: 2px solid var(--ink);
  color: var(--ink-2);
  font-style: italic;
}

.prose hr { border: 0; border-top: 1px solid var(--rule); margin: 2.4rem 0; }

.prose code {
  font: .87em/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background: var(--bg-soft);
  border: 1px solid var(--rule);
  padding: .1em .35em;
}

.prose pre {
  background: var(--bg-soft);
  padding: 1.1rem 1.25rem;
  border: 1px solid var(--rule);
  overflow-x: auto;
}
.prose pre code { background: none; border: 0; padding: 0; }

figure.hero { margin: 0 0 2rem; }
figure.hero img { display: block; width: 100%; height: auto; }
figcaption { font-family: var(--font-ui); font-size: .78rem; color: var(--ink-3); margin-top: .6rem; }

.article-meta .sep, .post-meta .sep { padding: 0 .5rem; color: var(--rule-2); }

/* --- Article header ------------------------------------------------------ */

.article-header { margin-bottom: 2.25rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--rule); }
.article-header h1 { margin-bottom: .85rem; }

.article-meta {
  display: flex;
  align-items: center;
  gap: .65rem;
  font-family: var(--font-ui);
  font-size: .8rem;
  color: var(--ink-3);
}

.article-meta .avatar {
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  background: var(--ink);
  color: var(--ink-inv);
  display: grid;
  place-items: center;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .04em;
}

/* Unfilled human-experience placeholder. Kept deliberately loud so an
   accidental publish is impossible to miss (AGENTS.md s1.9) - achieved with a
   heavy rule and weight rather than colour. */
.experience-prompt {
  border-left: 4px solid var(--ink);
  background: var(--bg-soft);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: .95rem;
  font-weight: 600;
}

/* --- Original mechanism diagrams (monochrome) ---------------------------- */

figure.diagram { margin: 2.5rem 0; }
figure.diagram svg { display: block; width: 100%; height: auto; }

figure.diagram .box { fill: none; stroke: var(--rule-2); stroke-width: 1.5; }
figure.diagram .box-a { stroke: var(--ink); }
figure.diagram .box-b { stroke: var(--ink-3); }

figure.diagram text { font-family: var(--font-ui); font-size: 13px; fill: var(--ink-2); }

figure.diagram .track-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  fill: var(--ink-3);
}

figure.diagram .arrow      { stroke: var(--ink-3); stroke-width: 1.5; fill: none; }
figure.diagram .arrow-head { fill: var(--ink-3); }
figure.diagram .feedback   { stroke: var(--ink-3); stroke-width: 1.5; fill: none; stroke-dasharray: 5 4; }
figure.diagram .feedback-head  { fill: var(--ink-3); }
figure.diagram .feedback-label { font-size: 12px; fill: var(--ink-3); }

figure.diagram figcaption {
  font-family: var(--font-ui);
  font-size: .8rem;
  line-height: 1.55;
  color: var(--ink-3);
  margin-top: .9rem;
}

/* --- Subscribe ----------------------------------------------------------- */

.subscribe {
  border: 1px solid var(--ink);
  padding: clamp(1.6rem, 3.5vw, 2.5rem);
  text-align: center;
}

.subscribe h2 {
  font-family: var(--font-read);
  font-size: clamp(1.35rem, 1.1rem + 1.1vw, 1.9rem);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -.03em;
  margin: 0 0 .6rem;
}

.subscribe p { margin: 0 auto .5rem; color: var(--ink-2); max-width: 32rem; line-height: 1.6; }
.subscribe .btn { margin-top: 1.25rem; }
.subscribe .legal { font-size: .76rem; color: var(--ink-3); margin: 1.25rem auto 0; max-width: 30rem; line-height: 1.5; }

/* --- Footer --------------------------------------------------------------- */

.site-footer {
  border-top: 1px solid var(--ink);
  margin-top: clamp(3rem, 6vw, 5rem);
  padding-block: 2rem 3rem;
  font-size: .82rem;
  color: var(--ink-2);
}

.site-footer .cols {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem 3rem;
  justify-content: space-between;
  align-items: flex-start;
}

.site-footer p { margin: 0 0 .55rem; max-width: 40rem; line-height: 1.6; }
.site-footer p:last-child { margin-bottom: 0; }
.site-footer a { color: var(--ink-2); text-underline-offset: 3px; }
.site-footer a:hover { color: var(--ink); }

.site-footer nav { display: flex; gap: 1.25rem; flex-wrap: wrap; }

.ai-disclosure { font-size: .78rem; color: var(--ink-3); }

/* --- Colour scheme ------------------------------------------------------
   Light mode is the design, permanently. There is deliberately no dark-scheme
   media query here: the site renders identically for every visitor, under
   every OS and browser theme setting. Do not add one back without also
   restoring a dark-theme brand mark, because the mark is white artwork on a
   charcoal tile and would disappear against a dark background. */

/* --- Small screens ------------------------------------------------------- */

@media (max-width: 480px) {
  :root { --gutter: 1.15rem; }
  .site-header .inner { padding-block: .7rem; gap: .5rem; }
  .site-nav a { padding: .35rem .45rem; font-size: .8rem; }
  .hero h1 { font-size: 2rem; }
}