/* ============================================================
   PERSONAL DESIGN KIT v2 — "MUTED ARCADE"
   Adapted from the Claude Design handoff bundle for
   Ann Marie Kernen's portfolio. Neobrutalist structure,
   portfolio-grade volume: hairlines, flat cool color, no shadows.

   Site-wide as of the full rollout — every page links this file.
   The old v1 stylesheet (neobrutalist.css) has been removed.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@62..125,400..700&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
  /* ============ FOUNDATION ============ */
  --ink:        #24211D;
  --ink-soft:   #4A443D;
  --ink-faint:  #736C63;
  --rule:       #CFC9C0;

  --paper:      #FAF8F5;
  --paper-2:    #F3F0EB;
  --bone:       #FEFDFB;

  /* ============ COOL ACCENTS ============ */
  --blue:       #3F79BE;
  --blue-deep:  #2B5A93;
  --blue-deeper:#1E4573;
  --blue-pale:  #DCE7F4;

  --green:      #2FA07A;
  --green-deep: #1F7A5C;
  --green-deeper:#17604A;
  --green-pale: #D8EEE4;

  --mist:       #93A6BC;
  --mist-pale:  #DDE4EC;

  --rust:       #A8624E; /* functional only: warning/error/before-state */

  /* ============ SEMANTIC ROLES ============ */
  --bg:            var(--paper);
  --bg-alt:        var(--paper-2);
  --bg-bright:     var(--bone);
  --bg-inverse:    var(--ink);

  --fg-1:          var(--ink);
  --fg-2:          var(--ink-soft);
  --fg-3:          var(--ink-faint);
  --fg-inverse:    var(--paper);

  --action:        var(--blue-deep);
  --action-hover:  var(--blue-deeper);
  --action-fg:     var(--bone);
  --link:          var(--blue-deep);
  --link-hover:    var(--blue);
  --focus:         var(--blue);

  /* ============ TYPOGRAPHY ============ */
  --font-display: 'Archivo', system-ui, -apple-system, sans-serif;
  --font-body:    'Archivo', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --wdth-display: 82;
  --wdth-body:    100;

  --caps-variant:  all-small-caps;
  --caps-features: 'smcp', 'c2sc';
  --ls-caps:       0.07em;

  --fs-mono-xs:  11px;
  --fs-mono-sm:  13px;
  --fs-xs:       12px;
  --fs-sm:       14px;
  --fs-base:     16px;
  --fs-md:       18px;
  --fs-lg:       21px;
  --fs-xl:       26px;
  --fs-2xl:      32px;
  --fs-3xl:      44px;
  --fs-4xl:      72px;

  --lh-tight:    1.08;
  --lh-snug:     1.25;
  --lh-normal:   1.55;
  --lh-loose:    1.7;

  --ls-tight:    -0.02em;
  --ls-normal:   0;
  --ls-wide:     0.04em;

  /* ============ SPACING (4pt base) ============ */
  --space-0:  0;
  --space-1:  2px;
  --space-2:  4px;
  --space-3:  8px;
  --space-4:  12px;
  --space-5:  16px;
  --space-6:  24px;
  --space-7:  32px;
  --space-8:  48px;
  --space-9:  64px;
  --space-10: 96px;
  --space-11: 128px;

  /* ============ BORDERS ============ */
  --border-hairline: 1px solid var(--ink);
  --border-default:  1.5px solid var(--ink);
  --border-heavy:    2px solid var(--ink);
  --border-divider:  1px solid var(--rule);

  /* ============ GHOST OUTLINE (replaces hard shadow) ============ */
  --ghost:        2px 2px 0 var(--paper),   3.5px 3.5px 0 var(--ink);
  --ghost-alt:    2px 2px 0 var(--paper-2), 3.5px 3.5px 0 var(--ink);
  --ghost-bright: 2px 2px 0 var(--bone),    3.5px 3.5px 0 var(--ink);
  /* Softer variant for hover accents on the quiet-divider borders --
     full ink reads too harsh right next to a --rule-colored resting state. */
  --ghost-soft:        2px 2px 0 var(--paper), 3.5px 3.5px 0 var(--ink-faint);
  --ghost-soft-bright: 2px 2px 0 var(--bone),  3.5px 3.5px 0 var(--ink-faint);

  /* ============ MOTION ============ */
  --ease-snap: cubic-bezier(0.2, 0, 0, 1);
  --dur-fast:  100ms;
  --dur-base:  180ms;
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg-1);
  font-family: var(--font-body);
  font-variation-settings: 'wdth' var(--wdth-body);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
}

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

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

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-variation-settings: 'wdth' var(--wdth-display);
  font-weight: 700;
  letter-spacing: var(--ls-tight);
  margin: 0;
}
h1 { font-size: var(--fs-3xl); line-height: var(--lh-tight); }
h2 { font-size: var(--fs-2xl); line-height: var(--lh-tight); }
h3 { font-size: var(--fs-xl); line-height: var(--lh-snug); }
h4 { font-size: var(--fs-lg); line-height: var(--lh-snug); font-weight: 600; }

p { font-family: var(--font-body); font-size: var(--fs-base); line-height: var(--lh-normal); margin: 0 0 var(--space-5) 0; }

/* The label voice: sentence-case source text, small-caps rendering. */
.v2-label {
  font-family: var(--font-body);
  font-variation-settings: 'wdth' var(--wdth-body);
  font-variant-caps: var(--caps-variant);
  font-feature-settings: var(--caps-features);
  letter-spacing: var(--ls-caps);
  text-transform: none;
}

a { color: var(--link); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; transition: color var(--dur-fast) var(--ease-snap); }
a:hover { color: var(--link-hover); text-decoration-thickness: 2px; }

/* ============================================================
   PRIMITIVES
   ============================================================ */
.v2-tag {
  display: inline-flex; align-items: center; gap: var(--space-3);
  font-family: var(--font-body); font-variation-settings: 'wdth' var(--wdth-body);
  font-size: var(--fs-sm); font-weight: 600;
  font-variant-caps: var(--caps-variant); font-feature-settings: var(--caps-features);
  letter-spacing: var(--ls-caps);
  padding: 4px 10px; border: var(--border-default);
  background: transparent; color: var(--fg-1);
}
.v2-tag.--blue  { background: var(--blue-deep);  color: var(--bone); border-color: var(--blue-deep); }
.v2-tag.--green { background: var(--green-deep); color: var(--bone); border-color: var(--green-deep); }

.v2-btn {
  font-family: var(--font-body); font-weight: 600; font-size: var(--fs-base);
  font-variant-caps: var(--caps-variant); font-feature-settings: var(--caps-features);
  letter-spacing: var(--ls-caps);
  padding: 11px 18px; border: var(--border-default); border-color: var(--action);
  background: var(--action); color: var(--action-fg);
  cursor: pointer; display: inline-block; text-decoration: none;
  transition: background var(--dur-fast) var(--ease-snap), border-color var(--dur-fast) var(--ease-snap);
}
.v2-btn:hover { background: var(--action-hover); border-color: var(--action-hover); color: var(--action-fg); text-decoration: none; }
.v2-btn.--green { background: var(--green-deep); border-color: var(--green-deep); }
.v2-btn.--green:hover { background: var(--green-deeper); border-color: var(--green-deeper); }
.v2-btn.--ghost { background: transparent; border-color: var(--ink); color: var(--fg-1); }
.v2-btn.--ghost:hover { background: var(--mist-pale); border-color: var(--ink); color: var(--fg-1); }

/* ============================================================
   HOMEPAGE — TOP NAV
   ============================================================ */
.nb-nav {
  height: 66px;
  border-bottom: var(--border-divider);
  display: flex; align-items: center; justify-content: space-between;
  background: var(--paper);
  padding: 0 40px;
  position: sticky; top: 0; z-index: 10;
}
.nb-logo {
  display: flex; align-items: center;
  text-decoration: none; color: var(--fg-1);
  font-family: var(--font-display); font-variation-settings: 'wdth' var(--wdth-display);
  font-weight: 700; font-size: 22px; letter-spacing: -0.01em;
}
.nb-logo:hover { color: var(--fg-1); text-decoration: none; background: none; }
.nb-logo-slash { color: var(--blue-deep); }
.nb-logo:hover .nb-logo-slash { color: var(--blue-deep); }
.nb-logo img { height: 26px; width: auto; display: block; }
.nb-footer-logo img { height: 31px; width: auto; display: block; }
.nb-case-back img { height: 20px; width: auto; display: block; }

.nb-nav-links { display: flex; align-items: center; gap: 28px; }
.nb-nav-link {
  display: flex; align-items: center;
  padding-bottom: 3px;
  border-bottom: 1.5px solid transparent;
  text-decoration: none; background: transparent;
  color: var(--fg-2);
  font-family: var(--font-body); font-variation-settings: 'wdth' var(--wdth-body);
  font-weight: 600; font-size: 15px;
  font-variant-caps: var(--caps-variant); font-feature-settings: var(--caps-features);
  letter-spacing: var(--ls-caps);
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-snap), border-color var(--dur-fast) var(--ease-snap);
}
.nb-nav-link:hover { color: var(--fg-1); background: none; text-decoration: none; }
.nb-nav-link--active { color: var(--fg-1); border-bottom-color: var(--ink); background: none; }
.nb-nav-spacer { display: none; }
.nb-nav-cta {
  display: inline-flex; align-items: center; margin-left: 8px;
  padding: 9px 18px; background: var(--action); border: var(--border-default); border-color: var(--action);
  color: var(--action-fg); text-decoration: none;
  font-family: var(--font-body); font-variation-settings: 'wdth' var(--wdth-body);
  font-weight: 600; font-size: 14px;
  font-variant-caps: var(--caps-variant); font-feature-settings: var(--caps-features);
  letter-spacing: var(--ls-caps);
  transition: background var(--dur-fast) var(--ease-snap), border-color var(--dur-fast) var(--ease-snap);
}
.nb-nav-cta:hover { background: var(--action-hover); border-color: var(--action-hover); color: var(--action-fg); text-decoration: none; }

/* ============================================================
   HOMEPAGE — WORK GRID
   ============================================================ */
.nb-work-section { padding: 72px 48px; background: var(--paper); }
.nb-section-inner { max-width: 1200px; margin: 0 auto; }
.nb-work-grid { display: flex; flex-direction: column; gap: 32px; }

.nb-work-card {
  border: var(--border-divider);
  box-shadow: none;
  text-decoration: none; color: var(--fg-1);
  display: flex; flex-direction: row;
  min-height: 260px;
  transition: box-shadow var(--dur-fast) var(--ease-snap), border-color var(--dur-fast) var(--ease-snap);
}
.nb-work-card:hover { border-color: var(--ink-faint); box-shadow: var(--ghost-soft); text-decoration: none; color: var(--fg-1); }
.nb-work-card--a { background: var(--bone); }
.nb-work-card--b { background: var(--paper-2); }
.nb-work-card--a .nb-work-card-image { background: var(--paper-2); }
.nb-work-card--b .nb-work-card-image { background: var(--bone); }

.nb-work-card-image {
  width: 50%; flex-shrink: 0;
  border-right: var(--border-divider);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-body); font-variation-settings: 'wdth' var(--wdth-body);
  font-size: 13px; font-weight: 500;
  font-variant-caps: var(--caps-variant); font-feature-settings: var(--caps-features);
  letter-spacing: var(--ls-caps);
  color: var(--fg-3);
  overflow: hidden;
}
.nb-work-card-image img { width: 100%; height: 100%; object-fit: contain; display: block; }

.nb-work-card-content { flex: 1; padding: 32px 36px; display: flex; flex-direction: column; }
.nb-meta {
  font-family: var(--font-body); font-variation-settings: 'wdth' var(--wdth-body);
  font-size: 13px; font-weight: 500;
  font-variant-caps: var(--caps-variant); font-feature-settings: var(--caps-features);
  letter-spacing: var(--ls-caps);
  color: var(--fg-3);
}
.nb-work-card h3 {
  margin: 10px 0 12px;
  font-family: var(--font-display); font-variation-settings: 'wdth' var(--wdth-display);
  font-weight: 700; font-size: 28px; line-height: 1.1; letter-spacing: var(--ls-tight);
}
.nb-work-card p { margin: 0; font-size: 16px; line-height: 1.5; max-width: 620px; color: var(--fg-2); }
.nb-read-more {
  margin-top: auto; padding-top: 18px;
  font-family: var(--font-body); font-variation-settings: 'wdth' var(--wdth-body);
  font-size: 15px; font-weight: 600;
  font-variant-caps: var(--caps-variant); font-feature-settings: var(--caps-features);
  letter-spacing: var(--ls-caps);
  color: var(--blue-deep);
}
.nb-work-tag {
  display: inline-block;
  font-family: var(--font-body); font-variation-settings: 'wdth' var(--wdth-body);
  font-size: 13px; font-weight: 600;
  font-variant-caps: var(--caps-variant); font-feature-settings: var(--caps-features);
  letter-spacing: var(--ls-caps);
  padding: 3px 9px;
  background: var(--ink); color: var(--paper);
  margin-bottom: 2px;
}

@media (max-width: 720px) {
  .nb-nav { padding: 0 20px; }
  .nb-nav-links { gap: 16px; }
  .nb-work-section { padding: 48px 24px; }
  .nb-work-grid { gap: 24px; }
  .nb-work-card { flex-direction: column; }
  .nb-work-card-image { width: 100%; min-height: 180px; border-right: none; border-bottom: var(--border-divider); }
  .nb-work-card-content { padding: 24px; }
}

/* ============================================================
   CASE STUDY — STICKY HEADER + SUB-NAV
   ============================================================ */
.nb-case-header {
  border-bottom: var(--border-divider);
  background: var(--paper);
  padding: 0 32px 0 0;
  height: 44px;
  display: flex; align-items: stretch; justify-content: space-between;
  position: sticky; top: 0; z-index: 10;
}
.nb-case-back {
  display: flex; align-items: center; padding: 0 20px;
  border-right: var(--border-divider);
  text-decoration: none; color: var(--fg-1);
  font-family: var(--font-display); font-variation-settings: 'wdth' var(--wdth-display);
  font-weight: 700; font-size: 16px; letter-spacing: -0.01em;
  transition: background var(--dur-fast) var(--ease-snap), color var(--dur-fast) var(--ease-snap);
}
.nb-case-back:hover { background: var(--ink); color: var(--paper); text-decoration: none; }
.nb-case-header-left { display: flex; align-items: stretch; }
.nb-case-prev, .nb-case-next {
  display: flex; align-items: center; padding: 0 16px;
  text-decoration: none; color: var(--fg-1);
  font-family: var(--font-body); font-variation-settings: 'wdth' var(--wdth-body);
  font-weight: 600; font-size: 14px;
  font-variant-caps: var(--caps-variant); font-feature-settings: var(--caps-features);
  letter-spacing: var(--ls-caps);
  transition: color var(--dur-fast) var(--ease-snap);
}
.nb-case-prev:hover, .nb-case-next:hover { color: var(--blue); background: none; text-decoration: none; }
.nb-case-progress {
  font-family: var(--font-body); font-variation-settings: 'wdth' var(--wdth-body);
  font-size: 14px; font-weight: 500;
  font-variant-caps: var(--caps-variant); font-feature-settings: var(--caps-features);
  letter-spacing: var(--ls-caps);
  color: var(--fg-3);
  display: flex; align-items: center; gap: 10px;
}
.nb-progress-dot { width: 7px; height: 7px; background: var(--green-deep); display: inline-block; }

.nb-case-subnav {
  position: sticky; top: 44px; z-index: 9;
  background: var(--paper);
  border-bottom: var(--border-divider);
  display: flex; overflow-x: auto;
  padding: 0 32px;
}
.nb-case-subnav-link {
  font-family: var(--font-body); font-variation-settings: 'wdth' var(--wdth-body);
  font-weight: 600; font-size: 14px;
  font-variant-caps: var(--caps-variant); font-feature-settings: var(--caps-features);
  letter-spacing: var(--ls-caps);
  color: var(--fg-2);
  text-decoration: none;
  padding: 7px 14px; margin: 9px 4px;
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-snap), background var(--dur-fast) var(--ease-snap);
}
.nb-case-subnav-link:hover { color: var(--fg-1); text-decoration: none; }
.nb-case-subnav-link--active, .nb-case-subnav-link--active:hover {
  background: var(--blue-deep); color: var(--bone);
}
.nb-subnav-target { scroll-margin-top: 124px; }

/* ============================================================
   CASE STUDY — HERO + METRIC ROW
   ============================================================ */
.nb-case-hero { padding: 72px 48px 56px; border-bottom: var(--border-divider); background: var(--paper); }
.nb-case-hero--tight { padding: 52px 48px 44px; border-bottom: none; }
.nb-case-hero-inner { max-width: 1100px; margin: 0 auto; }

.nb-case-hero-split { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 56px; align-items: center; }
.nb-case-hero-media { display: flex; justify-content: center; }
.nb-case-hero-media .nb-image-placeholder {
  width: 100%; max-width: 300px; aspect-ratio: 9 / 16; min-height: 0;
  box-shadow: var(--ghost-soft); margin: 0;
}
.nb-case-hero-media .nb-shot { max-width: 300px; }
@media (max-width: 860px) {
  .nb-case-hero-split { grid-template-columns: 1fr; gap: 28px; }
  .nb-case-hero-media { order: -1; }
  .nb-case-hero-media .nb-image-placeholder,
  .nb-case-hero-media .nb-shot { max-width: 200px; }
}
.nb-case-tags { display: flex; gap: 8px; margin-bottom: 26px; flex-wrap: wrap; }
.nb-case-tag {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-body); font-variation-settings: 'wdth' var(--wdth-body);
  font-size: 14px; font-weight: 600;
  font-variant-caps: var(--caps-variant); font-feature-settings: var(--caps-features);
  letter-spacing: var(--ls-caps);
  padding: 4px 10px; border: var(--border-divider);
  background: transparent; color: var(--fg-1);
}
.nb-case-tag--pink { background: var(--blue-deep); color: var(--bone); border-color: var(--blue-deep); }
.nb-case-tag--paper { background: transparent; }

.nb-case-hero-title {
  margin: 0; font-family: var(--font-display); font-variation-settings: 'wdth' var(--wdth-display);
  font-weight: 700; font-size: clamp(40px, 5.8vw, 68px); line-height: 1.03;
  letter-spacing: -0.03em; max-width: 18ch;
}
.nb-case-hero-sub { margin-top: 26px; font-size: 19px; line-height: 1.5; color: var(--fg-2); max-width: 56ch; }

.nb-case-facts {
  margin-top: 44px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: var(--border-divider);
  background: var(--bone);
}
.nb-case-fact { padding: 18px 22px; border-right: var(--border-divider); }
.nb-case-fact:last-child { border-right: none; }
.nb-case-fact-label {
  font-family: var(--font-body); font-variation-settings: 'wdth' var(--wdth-body);
  font-size: 14px; font-weight: 700;
  font-variant-caps: var(--caps-variant); font-feature-settings: var(--caps-features);
  letter-spacing: var(--ls-caps);
  color: var(--fg-3);
}
.nb-case-fact-value { font-size: 17px; font-weight: 600; margin-top: 6px; line-height: 1.25; }

@media (max-width: 720px) {
  .nb-case-facts { grid-template-columns: 1fr; }
  .nb-case-fact { border-right: none; border-bottom: var(--border-divider); }
  .nb-case-fact:last-child { border-bottom: none; }
}

.nb-metric-row { padding: 44px 48px; border-bottom: var(--border-divider); background: var(--ink); }
.nb-metric-row-inner { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); }
.nb-metric { padding: 6px 24px; border-right: 1px solid var(--ink-soft); }
.nb-metric:last-child { border-right: none; }
.nb-metric-label {
  font-family: var(--font-body); font-variation-settings: 'wdth' var(--wdth-body);
  font-size: 14px; font-weight: 700;
  font-variant-caps: var(--caps-variant); font-feature-settings: var(--caps-features);
  letter-spacing: var(--ls-caps);
  color: var(--mist);
}
.nb-metric-value {
  margin-top: 10px; font-family: var(--font-display); font-variation-settings: 'wdth' var(--wdth-display);
  font-weight: 700; font-size: clamp(32px, 4vw, 44px); line-height: 1; letter-spacing: -0.02em;
  color: var(--paper);
}
.nb-metric-value--pink { color: var(--rust); }      /* the "before" / cost figure — functional rust */
.nb-metric-value--lime { color: var(--green); }     /* the "after" / resolution figure */
.nb-metric-value--lemon { color: var(--paper); }    /* neutral fact */
.nb-metric-value--cyan { color: var(--blue); }       /* neutral fact, secondary accent */
.nb-metric-note { margin-top: 8px; font-size: 12px; color: var(--ink-faint); }

/* ============================================================
   CONFIDENTIALITY DISCLOSURE
   ============================================================ */
.nb-disclosure {
  display: flex; gap: 18px; align-items: flex-start;
  border: var(--border-divider);
  background: var(--blue-pale);
  padding: 22px 26px;
}
.nb-disclosure-icon { font-size: 22px; line-height: 1; flex-shrink: 0; }
.nb-disclosure-label {
  font-family: var(--font-body); font-variation-settings: 'wdth' var(--wdth-body);
  font-weight: 700; font-size: 14px;
  font-variant-caps: var(--caps-variant); font-feature-settings: var(--caps-features);
  letter-spacing: var(--ls-caps);
  margin: 0 0 6px; color: var(--fg-1);
}
.nb-disclosure-text { font-size: 15px; line-height: 1.6; margin: 0; color: var(--fg-1); }

/* ============================================================
   NOTE (generic notice box — cross-links, callouts, etc.)
   Shares the disclosure box's visual language without implying
   confidentiality specifically.
   ============================================================ */
.nb-note {
  display: flex; gap: 18px; align-items: flex-start;
  border: var(--border-divider);
  background: var(--blue-pale);
  padding: 22px 26px;
}
.nb-note-icon { font-size: 22px; line-height: 1; flex-shrink: 0; }
.nb-note-label {
  font-family: var(--font-body); font-variation-settings: 'wdth' var(--wdth-body);
  font-weight: 700; font-size: 14px;
  font-variant-caps: var(--caps-variant); font-feature-settings: var(--caps-features);
  letter-spacing: var(--ls-caps);
  margin: 0 0 6px; color: var(--fg-1);
}
.nb-note-text { font-size: 15px; line-height: 1.6; margin: 0; color: var(--fg-1); }
.nb-note-text a { color: var(--blue-deep); font-weight: 600; }

/* ============================================================
   IMAGE GALLERY (bare-bones / image-heavy case study layouts)
   ============================================================ */
.nb-gallery { display: grid; gap: 20px; margin: 24px 0; align-items: start; }
.nb-gallery--2 { grid-template-columns: repeat(2, 1fr); }
.nb-gallery--3 { grid-template-columns: repeat(3, 1fr); }
.nb-gallery--4 { grid-template-columns: repeat(4, 1fr); }
.nb-gallery-item .nb-image-placeholder,
.nb-gallery-item .nb-case-image { margin: 0; height: 100%; }
.nb-gallery-caption {
  margin: 10px 2px 0; font-size: 13px; line-height: 1.4; color: var(--fg-3);
}

/* A real photo/screenshot dropped into a placeholder's slot — same framed
   treatment (border + ghost shadow), natural aspect ratio, no distortion. */
.nb-shot { display: block; width: 100%; height: auto; }

/* ============================================================
   SPLIT ROW (blurb + image, alternating sides) — for showcasing
   images of mixed size/aspect without cramming them into a rigid grid
   ============================================================ */
.nb-split-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center;
  margin: 0 0 56px;
}
.nb-split-row:last-child { margin-bottom: 0; }
.nb-split-row--reverse .nb-split-text { order: 2; }
.nb-split-row--reverse .nb-split-media { order: 1; }
.nb-split-heading {
  font-family: var(--font-display); font-variation-settings: 'wdth' var(--wdth-display);
  font-weight: 700; font-size: 22px; letter-spacing: -0.01em; margin: 0 0 10px;
}
.nb-split-text p { font-size: 16px; line-height: 1.6; color: var(--fg-2); margin: 0; }
@media (max-width: 720px) {
  .nb-split-row { grid-template-columns: 1fr; gap: 18px; margin-bottom: 40px; }
  /* Always image-above-text on mobile, regardless of --reverse */
  .nb-split-media, .nb-split-row--reverse .nb-split-media { order: -1; }
  .nb-split-text, .nb-split-row--reverse .nb-split-text { order: 0; }
}

/* Photo stack — two related images (e.g. two sketch iterations) layered
   like snapshots on a desk, instead of forcing them side by side. */
.nb-stack { position: relative; margin: 18px 10px; }
.nb-stack-img { display: block; width: 100%; height: auto; box-shadow: 0 2px 6px rgba(0,0,0,0.08); }
.nb-stack-img--back { position: absolute; top: 0; left: 0; transform: rotate(-4deg) translate(6%, 5%); z-index: 1; }
.nb-stack-img--front { position: relative; z-index: 2; transform: rotate(3deg); }
@media (max-width: 860px) {
  .nb-gallery--3, .nb-gallery--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .nb-gallery--2, .nb-gallery--3, .nb-gallery--4 { grid-template-columns: 1fr; }
}

/* ============================================================
   PROSE + SECTION MARKER
   ============================================================ */
.nb-prose { padding: 64px 48px; }
.nb-prose-inner { max-width: 68ch; margin: 0 auto; }
.nb-prose p { font-size: 17px; line-height: 1.6; margin: 0 0 20px; }
.nb-prose ul { font-size: 17px; line-height: 1.6; padding: 0; list-style: none; margin: 0 0 24px; display: flex; flex-direction: column; gap: 8px; }
.nb-prose li { padding: 10px 16px; border-left: 3px solid var(--blue-deep); background: var(--bone); }
.nb-prose strong { font-weight: 700; }
.nb-prose a { color: var(--link); }
.nb-prose em { color: var(--fg-2); }

.nb-section-marker {
  display: flex; align-items: baseline; gap: 16px;
  padding-bottom: 14px; border-bottom: var(--border-divider);
  margin-bottom: 32px; flex-wrap: wrap;
}
.nb-section-marker h2 {
  margin: 0; font-family: var(--font-display); font-variation-settings: 'wdth' var(--wdth-display);
  font-weight: 700; font-size: 28px; line-height: 1.15; letter-spacing: var(--ls-tight);
}
.nb-section-num {
  font-family: var(--font-body); font-variation-settings: 'wdth' var(--wdth-body);
  font-weight: 700; font-size: 16px;
  font-variant-caps: var(--caps-variant); font-feature-settings: var(--caps-features);
  letter-spacing: var(--ls-caps);
  color: var(--fg-3); flex-shrink: 0;
}

/* ============================================================
   IMAGES + PLACEHOLDERS
   ============================================================ */
.nb-case-image { border: var(--border-divider); margin: 24px 0; overflow: hidden; }
.nb-case-image img { display: block; width: 100%; height: auto; }

.nb-image-placeholder {
  border: var(--border-divider);
  background: var(--paper-2);
  min-height: 220px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-body); font-variation-settings: 'wdth' var(--wdth-body);
  font-size: 13px; font-weight: 500;
  font-variant-caps: var(--caps-variant); font-feature-settings: var(--caps-features);
  letter-spacing: var(--ls-caps);
  color: var(--fg-3);
  margin: 24px 0;
}

/* ============================================================
   NEXT CASE + FOOTER
   ============================================================ */
.nb-next-case { padding: 52px 48px; background: var(--paper-2); border-bottom: var(--border-divider); }
.nb-next-case-inner { max-width: 1100px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; gap: 32px; flex-wrap: wrap; }
.nb-next-label {
  margin: 0; font-family: var(--font-body); font-variation-settings: 'wdth' var(--wdth-body);
  font-size: 14px; font-weight: 700;
  font-variant-caps: var(--caps-variant); font-feature-settings: var(--caps-features);
  letter-spacing: var(--ls-caps);
  color: var(--fg-3);
}
.nb-next-title {
  margin: 10px 0 0; font-family: var(--font-display); font-variation-settings: 'wdth' var(--wdth-display);
  font-weight: 700; font-size: clamp(30px, 4vw, 48px); line-height: 1.05; letter-spacing: -0.03em;
}
.nb-btn {
  font-family: var(--font-body); font-weight: 600; font-size: 15px;
  font-variant-caps: var(--caps-variant); font-feature-settings: var(--caps-features);
  letter-spacing: var(--ls-caps);
  padding: 12px 22px; border: var(--border-default); border-color: var(--action);
  background: var(--action); color: var(--action-fg);
  text-decoration: none; display: inline-block;
  transition: background var(--dur-fast) var(--ease-snap), border-color var(--dur-fast) var(--ease-snap);
}
.nb-btn:hover { background: var(--action-hover); border-color: var(--action-hover); color: var(--action-fg); text-decoration: none; }
.nb-btn--lemon { background: var(--green-deep); border-color: var(--green-deep); }
.nb-btn--lemon:hover { background: var(--green-deeper); border-color: var(--green-deeper); }
.nb-btn--pink { background: var(--blue-deep); border-color: var(--blue-deep); }
.nb-btn--ghost { background: transparent; border-color: var(--ink); color: var(--fg-1); }
.nb-btn--ghost:hover { background: var(--mist-pale); border-color: var(--ink); color: var(--fg-1); }
.nb-btn--small { padding: 7px 14px; font-size: 13px; }
/* On an ink surface, ink-colored border+text would vanish -- swap to mist/paper. */
.nb-experience .nb-btn--ghost { border-color: var(--mist); color: var(--paper); }
.nb-experience .nb-btn--ghost:hover { background: var(--ink-soft); border-color: var(--paper); color: var(--paper); }

.nb-footer { border-top: var(--border-divider); background: var(--ink); color: var(--fg-inverse); padding: 56px 48px 32px; }
.nb-footer-inner { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 40px; }
.nb-footer-logo {
  font-family: var(--font-display); font-variation-settings: 'wdth' var(--wdth-display);
  font-weight: 700; font-size: 26px; letter-spacing: -0.02em;
  color: var(--paper); text-decoration: none;
}
.nb-footer-logo-slash { color: var(--mist); }
.nb-footer-tagline { font-size: 15px; line-height: 1.55; margin-top: 14px; max-width: 360px; color: var(--mist); }
.nb-footer-col-title {
  font-family: var(--font-body); font-variation-settings: 'wdth' var(--wdth-body);
  font-weight: 700; font-size: 14px;
  font-variant-caps: var(--caps-variant); font-feature-settings: var(--caps-features);
  letter-spacing: var(--ls-caps);
  color: var(--mist); margin: 0 0 14px;
}
.nb-footer-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 9px; }
.nb-footer-col a { color: var(--paper); text-decoration: none; font-size: 14px; }
.nb-footer-col a:hover { color: var(--blue-pale); text-decoration: underline; }
.nb-footer-bottom {
  grid-column: 1 / -1; border-top: 1px solid var(--ink-soft); padding-top: 22px; margin-top: 12px;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  font-family: var(--font-body); font-variation-settings: 'wdth' var(--wdth-body);
  font-size: 14px; font-weight: 500;
  font-variant-caps: var(--caps-variant); font-feature-settings: var(--caps-features);
  letter-spacing: var(--ls-caps);
  color: var(--ink-faint);
}

/* ============================================================
   BACK TO TOP
   ============================================================ */
.nb-back-to-top {
  position: fixed; bottom: 28px; right: 28px;
  width: 44px; height: 44px;
  background: var(--blue-deep); color: var(--bone);
  border: var(--border-default); border-color: var(--blue-deep);
  font-size: 16px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; transform: translateY(8px);
  transition: opacity var(--dur-base) var(--ease-snap), transform var(--dur-base) var(--ease-snap), background var(--dur-fast) var(--ease-snap);
}
.nb-back-to-top.nb-visible { opacity: 1; pointer-events: auto; transform: translateY(0); }
.nb-back-to-top:hover { background: var(--blue-deeper); border-color: var(--blue-deeper); }

/* ============================================================
   ABOUT PAGE — BIO
   ============================================================ */
.nb-about-section { padding: 72px 48px; border-bottom: var(--border-divider); }
.nb-about-inner { display: grid; grid-template-columns: 300px 1fr; gap: 80px; align-items: start; }

.nb-about-bio p { font-size: 17px; line-height: 1.65; margin: 0 0 18px; color: var(--fg-1); }
.nb-about-bio p:last-child { margin-bottom: 0; }
.nb-about-bio a { color: var(--link); }
.nb-about-bio strong { color: var(--fg-1); font-weight: 700; }

.nb-headshot-wrap { position: sticky; top: 80px; }
.nb-headshot {
  width: 100%; aspect-ratio: 1; border-radius: 50%; /* circle: the zero-radius rule's one exception */
  border: var(--border-divider);
  object-fit: cover; display: block;
}

/* ============================================================
   ABOUT PAGE — EXPERIENCE (the one inverse band)
   ============================================================ */
.nb-experience { padding: 72px 48px; background: var(--ink); color: var(--fg-inverse); border-bottom: var(--border-divider); }
.nb-experience-inner { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 260px 1fr; gap: 64px; align-items: start; }
.nb-experience-heading {
  font-family: var(--font-display); font-variation-settings: 'wdth' var(--wdth-display);
  font-weight: 700; font-size: 32px; line-height: 1.1; letter-spacing: var(--ls-tight);
  margin: 0 0 28px; color: var(--fg-inverse);
}
.nb-resume-btns { display: flex; flex-direction: column; gap: 12px; }

.nb-accordion-controls { display: flex; justify-content: flex-end; margin-bottom: 8px; }
.nb-accordion-toggle {
  background: none; border: none; padding: 0;
  font-family: var(--font-body); font-variation-settings: 'wdth' var(--wdth-body);
  font-size: 14px; font-weight: 600;
  font-variant-caps: var(--caps-variant); font-feature-settings: var(--caps-features);
  letter-spacing: var(--ls-caps);
  color: var(--mist);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-snap);
}
.nb-accordion-toggle:hover { color: var(--blue); }

.nb-accordion details {
  background: var(--paper); color: var(--fg-1);
  border: var(--border-divider); border-bottom: none;
  transition: box-shadow var(--dur-base) var(--ease-snap);
}
.nb-accordion details:last-child { border-bottom: var(--border-divider); }
.nb-accordion details.is-open { box-shadow: var(--ghost-soft); }

.nb-accordion summary {
  font-family: var(--font-body); font-variation-settings: 'wdth' var(--wdth-body);
  font-weight: 600; font-size: 15px;
  font-variant-caps: var(--caps-variant); font-feature-settings: var(--caps-features);
  letter-spacing: var(--ls-caps);
  padding: 18px 20px; list-style: none;
  display: flex; justify-content: space-between; align-items: center;
  user-select: none; cursor: pointer;
}
.nb-accordion summary::-webkit-details-marker { display: none; }
.nb-accordion summary::after {
  content: '▸'; font-size: 12px; color: var(--fg-3);
  transition: transform var(--dur-fast) var(--ease-snap);
  flex-shrink: 0;
}
.nb-accordion details.is-open > summary::after { transform: rotate(90deg); }

.nb-accordion-body { padding: 16px 20px 22px; border-top: var(--border-divider); font-size: 15px; line-height: 1.6; }
.nb-accordion-body p { margin: 0 0 10px; }
.nb-accordion-body p:last-child { margin-bottom: 0; }
.nb-accordion-body ul { margin: 0; padding-left: 20px; }
.nb-accordion-body li { margin-bottom: 4px; }

/* ============================================================
   CONTACT PAGE
   ============================================================ */
.nb-contact-body { padding: 72px 48px; }
.nb-contact-body-inner {
  max-width: 1200px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr;
  column-gap: 80px; row-gap: 32px; align-items: start;
}

.nb-contact-info-label {
  font-family: var(--font-body); font-variation-settings: 'wdth' var(--wdth-body);
  font-size: 14px; font-weight: 700;
  font-variant-caps: var(--caps-variant); font-feature-settings: var(--caps-features);
  letter-spacing: var(--ls-caps);
  color: var(--fg-3); margin: 0 0 8px;
}
.nb-contact-info-value {
  font-family: var(--font-display); font-variation-settings: 'wdth' var(--wdth-display);
  font-weight: 700; font-size: 26px; letter-spacing: var(--ls-tight);
  margin: 0 0 36px;
}
.nb-contact-info-value a {
  color: var(--fg-1); text-decoration: none;
  border-bottom: 2.5px solid var(--blue-deep);
  padding-bottom: 2px;
  transition: background var(--dur-fast) var(--ease-snap), color var(--dur-fast) var(--ease-snap);
}
.nb-contact-info-value a:hover {
  background: var(--blue-deep); color: var(--bone);
  text-decoration: none; padding: 2px 6px;
}
.nb-contact-note {
  font-size: 15px; line-height: 1.6; color: var(--fg-2);
  margin: 0; padding-top: 32px; border-top: var(--border-divider);
}

.nb-form-heading {
  font-family: var(--font-body); font-variation-settings: 'wdth' var(--wdth-body);
  font-weight: 700; font-size: 14px;
  font-variant-caps: var(--caps-variant); font-feature-settings: var(--caps-features);
  letter-spacing: var(--ls-caps);
  color: var(--fg-3); margin: 0 0 24px;
}
.nb-form-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: 20px; }
.nb-label {
  font-family: var(--font-body); font-variation-settings: 'wdth' var(--wdth-body);
  font-size: 14px; font-weight: 600;
  font-variant-caps: var(--caps-variant); font-feature-settings: var(--caps-features);
  letter-spacing: var(--ls-caps);
  color: var(--fg-1);
}
.nb-input, .nb-textarea {
  font-family: var(--font-body); font-size: 16px;
  padding: 12px 14px; border: var(--border-divider);
  background: var(--bone); color: var(--fg-1);
  border-radius: 0; outline: none; width: 100%;
  transition: border-color var(--dur-fast) var(--ease-snap), box-shadow var(--dur-fast) var(--ease-snap);
}
.nb-input:focus, .nb-textarea:focus {
  border-color: var(--blue-deep);
  box-shadow: var(--ghost-soft-bright);
}
.nb-textarea { min-height: 160px; resize: vertical; }
.nb-form-submit { margin-top: 8px; }

.nb-form-success {
  display: none; padding: 24px;
  border: var(--border-divider);
  background: var(--green-pale);
  font-family: var(--font-body); font-variation-settings: 'wdth' var(--wdth-body);
  font-size: 15px; font-weight: 600;
  font-variant-caps: var(--caps-variant); font-feature-settings: var(--caps-features);
  letter-spacing: var(--ls-caps);
  color: var(--green-deep);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 720px) {
  .nb-case-hero { padding: 48px 24px 40px; }
  .nb-metric-row { padding: 32px 24px; }
  .nb-metric-row-inner { grid-template-columns: repeat(2, 1fr); gap: 24px 0; }
  .nb-metric:nth-child(2n) { border-right: none; }
  .nb-prose { padding: 48px 24px; }
  .nb-footer { padding: 40px 24px; }
  .nb-footer-inner { grid-template-columns: 1fr; }
  .nb-about-section { padding: 48px 24px; }
  .nb-about-inner { grid-template-columns: 1fr; gap: 40px; }
  .nb-headshot-wrap { position: static; order: -1; max-width: 200px; }
  .nb-experience { padding: 48px 24px; }
  .nb-experience-inner { grid-template-columns: 1fr; gap: 40px; }
  .nb-contact-body { padding: 48px 24px; }
  .nb-contact-body-inner { grid-template-columns: 1fr; gap: 48px; }
}