/* Space Mono — SELF-HOSTED (not @import'd from Google Fonts).
   A runtime Google Fonts request gets blocked by ad/privacy blockers, leaving
   the command text to fall back to a proportional sans (Figtree). Self-hosting
   the woff2 files makes the mono bulletproof and keeps the site dependency-free,
   matching how every other font on the site is served.
   Space Mono = retro-geometric character (slashed zero, distinctive g/a/&). */
@font-face {
  font-family: "Space Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/spacemono-400-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Space Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/spacemono-400-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Space Mono";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/spacemono-700-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Space Mono";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/spacemono-700-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ============================================================
   Skills page (/skills) — a clean, minimal vertical list of the
   AI skills, each with a copyable install command + GitHub link.
   Scoped under .sk-* so nothing leaks to other pages.
   ============================================================ */
.sk-wrap {
  --sk-ink:    #1a1a1a;
  --sk-muted:  rgba(26, 26, 26, 0.52);
  --sk-faint:  rgba(26, 26, 26, 0.40);
  --sk-line:   rgba(26, 26, 26, 0.09);
  --sk-line-2: rgba(26, 26, 26, 0.12);
  --sk-accent: #e8503a;
  --sk-npx:    #7c5cff;            /* purple for the `npx` token */
  /* Space Mono — a characterful retro-geometric monospace that pops against
     Figtree. (A name figtree.css does NOT alias to Figtree, so it actually
     loads — and it's self-hosted above so it never depends on Google Fonts.) */
  --sk-mono:   "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  /* skill icon size + its gap to the title — also used to indent the subtext
     so it lines up with the title text (not the icon). */
  --sk-ico:     19px;
  --sk-ico-gap: 11px;

  box-sizing: border-box;
  width: 100%;
  max-width: 1248px;              /* 1200 content + 24px side gutters (matches the site grid) */
  margin: 0 auto;
  padding: 0 24px 168px;          /* top:0 → header lands at the same y as the photography header */
}
.sk-wrap *, .sk-wrap *::before, .sk-wrap *::after { box-sizing: border-box; }

/* ---- header — same treatment as the photography page header (centered) ---- */
.sk-head { margin-bottom: 52px; text-align: center; }
.sk-title {
  margin: 0;
  font-size: 40px;
  line-height: 1.14;
  font-weight: 700;
  letter-spacing: -0.76px;
  color: rgb(26, 26, 26);
}
.sk-intro {
  margin: 8px auto 0;          /* auto x-margins → centre the block */
  max-width: none;             /* let it sit on a single line (wraps only on mobile) */
  font-size: 16px;
  line-height: 20px;
  color: rgba(26, 26, 26, 0.4);
  text-transform: lowercase;   /* keep the subtext all lower-case */
}

/* ---- simple vertical list: one full-width (1200px) card per row.
   Stacked in normal flow, so expanding a card just pushes the ones below. ---- */
.sk-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.sk-card {
  display: flex;
  flex-direction: column;
  padding: 24px;
  background: #fff;
  border: 1px solid var(--sk-line);
  border-radius: 0;                       /* sharp corners — consistent with the rest of the site */
  /* staggered entrance (off for reduced-motion) */
  animation: sk-in 0.5s cubic-bezier(0.2, 0.6, 0.2, 1) backwards;
  animation-delay: calc(var(--i, 0) * 0.05s);
  transition: border-color 0.25s ease;
}
@keyframes sk-in {
  from { opacity: 0; transform: translateY(14px); }
}
@media (hover: hover) {
  .sk-card:hover { border-color: rgba(26, 26, 26, 0.2); }   /* no drop shadow */
}

/* header is the expand trigger (button reset); name + chevron, then description */
.sk-toggle {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.sk-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
/* left cluster: skill icon + name (chevron sits opposite via space-between) */
.sk-id {
  display: flex;
  align-items: center;
  gap: var(--sk-ico-gap);
  min-width: 0;
}
.sk-ico {
  flex: none;
  width: var(--sk-ico);
  height: var(--sk-ico);
  color: var(--sk-ink);
  transition: color 0.2s ease;
}
.sk-name {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.2px;
  color: var(--sk-ink);
  transition: color 0.2s ease;
}
.sk-chev {
  flex: none;
  width: 16px;
  height: 16px;
  color: var(--sk-faint);
  transition: transform 0.3s cubic-bezier(0.2, 0.6, 0.2, 1), color 0.2s ease;
}
.sk-desc {
  display: block;
  margin-top: 8px;
  /* line the subtext up with the title text (indent past the icon + its gap) */
  margin-left: calc(var(--sk-ico) + var(--sk-ico-gap));
  font-size: 14px;
  line-height: 1.55;
  color: var(--sk-muted);
}
.sk-card:hover .sk-name,
.sk-toggle:focus-visible .sk-name,
.sk-card:hover .sk-ico,
.sk-toggle:focus-visible .sk-ico { color: var(--sk-accent); }
.sk-card:hover .sk-chev { color: var(--sk-muted); }
.sk-card.is-expanded .sk-chev { transform: rotate(180deg); color: var(--sk-accent); }
.sk-toggle:focus-visible { outline: 2px solid var(--sk-accent); outline-offset: 4px; }

/* ---- expandable detail: You give / You get / Next (animated height) ---- */
.sk-extra {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s cubic-bezier(0.2, 0.6, 0.2, 1);
}
.sk-card.is-expanded .sk-extra { grid-template-rows: 1fr; }
.sk-extra-in {
  overflow: hidden;
  min-height: 0;
}
.sk-extra-in > .sk-blk:first-child {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--sk-line);
}
.sk-blk { margin-top: 16px; }
.sk-blk-h {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--sk-faint);
}
.sk-blk-p {
  display: block;
  margin-top: 4px;
  font-size: 14px;
  line-height: 1.55;
  color: rgba(26, 26, 26, 0.72);
  white-space: nowrap;            /* keep each detail on a single line */
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---- command bar: [ npx … ⧉ | View on GitHub … ↗ ] ---- */
.sk-bar {
  display: flex;
  align-items: stretch;
  margin-top: 20px;
  border: 1px solid var(--sk-line-2);
  border-radius: 0;
  background: #fff;
  overflow: hidden;
}
.sk-cmd-seg {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 8px 11px 14px;
  background-color: #fafafa;        /* the code container sits on #FAFAFA */
}
.sk-cmd {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 13px;
  line-height: 1.4;
  color: var(--sk-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* figtree.css forces `* { font-family: Figtree !important }`; re-assert the
   mono on the command (higher specificity beats the universal selector). */
.sk-wrap .sk-cmd,
.sk-wrap .sk-cmd .sk-npx {
  font-family: var(--sk-mono) !important;
}
/* THE important one: figtree.css ALSO sets `*::first-line { font-family:
   Figtree !important }`. ::first-line repaints the whole first (here: only)
   line of the command — overriding the element's own font at PAINT time while
   getComputedStyle still reports the mono (which is why this looked fixed in
   the inspector but rendered as Figtree). Re-assert the mono on ::first-line /
   ::first-letter so the command actually paints in Space Mono. */
.sk-wrap .sk-cmd::first-line,
.sk-wrap .sk-cmd::first-letter,
.sk-wrap .sk-cmd .sk-npx::first-line,
.sk-wrap .sk-cmd .sk-npx::first-letter {
  font-family: var(--sk-mono) !important;
}
.sk-npx { color: var(--sk-npx); }

.sk-copy {
  flex: none;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--sk-faint);
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease;
}
.sk-copy:hover { background: rgba(26, 26, 26, 0.05); color: var(--sk-ink); }
.sk-copy:focus-visible { outline: 2px solid var(--sk-accent); outline-offset: 2px; }

/* copy / check glyphs drawn in CSS so there's no icon dependency */
.sk-copy-ico { position: relative; width: 14px; height: 14px; display: block; }
.sk-copy-ico::before {           /* back sheet */
  content: ""; position: absolute; left: 0; top: 0;
  width: 10px; height: 10px; border: 1.4px solid currentColor; border-radius: 2.5px;
}
.sk-copy-ico::after {            /* front sheet — matches the #FAFAFA container */
  content: ""; position: absolute; right: 0; bottom: 0;
  width: 10px; height: 10px; border: 1.4px solid currentColor; border-radius: 2.5px;
  background: #fafafa;
}
.sk-copy:hover .sk-copy-ico::after { background: #f1f1f1; }

/* copied state → green check */
.sk-copy.is-copied { color: #1aa06d; }
.sk-copy.is-copied .sk-copy-ico::before { display: none; }
.sk-copy.is-copied .sk-copy-ico::after {
  width: 12px; height: 7px; right: 1px; bottom: 3px;
  border: 1.8px solid currentColor; border-top: 0; border-right: 0;
  border-radius: 0; background: transparent;
  transform: rotate(-45deg);
}

.sk-gh {
  flex: 0 0 30%;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;   /* label left · arrow at the far right (image #25) */
  gap: 12px;
  padding: 0 16px;
  border-left: 1px solid var(--sk-line-2);
  font-size: 13px;
  color: var(--sk-muted);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.18s ease, background-color 0.18s ease;
}
.sk-gh:hover { color: var(--sk-ink); background: rgba(26, 26, 26, 0.025); }
.sk-gh-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.sk-arrow { flex: none; font-size: 14px; line-height: 1; transition: transform 0.2s ease; }
.sk-gh:hover .sk-arrow { transform: translate(2px, -2px); }

/* ---- responsive ---- */
@media (max-width: 640px) {
  .sk-wrap { padding: 0 18px 140px; }
  .sk-title { font-size: 28px; }
  .sk-card { padding: 20px; }
  .sk-bar { flex-direction: column; align-items: stretch; }
  .sk-gh { flex: none; border-left: 0; border-top: 1px solid var(--sk-line-2); padding: 11px 14px; }
  .sk-blk-p { white-space: normal; overflow: visible; }   /* allow wrap on phones (no truncation) */
}

@media (prefers-reduced-motion: reduce) {
  .sk-card { animation: none; }
  .sk-extra { transition: none; }
  .sk-name, .sk-ico, .sk-chev, .sk-copy, .sk-gh, .sk-arrow { transition: none; }
}

/* The clone also inherited Framer's per-page tab `order` (which swapped
   About/Work and shifted the rest). Re-pin the order so the nav reads
   exactly like every other page: Work · About · Photography · YouTube ·
   Skills · Substack. (Skills is the active <p>, so it has no href.) */
#main nav.framer-WLHpg .framer-1gxxlpg > div:has(a[href="./"])            { order: 1 !important; }
#main nav.framer-WLHpg .framer-1gxxlpg > div:has(a[href="./about"])       { order: 2 !important; }
#main nav.framer-WLHpg .framer-1gxxlpg > div:has(a[href="./photography"]) { order: 3 !important; }
#main nav.framer-WLHpg .framer-1gxxlpg > div:has(a[href="./youtube"])     { order: 4 !important; }
#main nav.framer-WLHpg .framer-1gxxlpg > div:has(p):not(:has(a))          { order: 5 !important; }
#main nav.framer-WLHpg .framer-1gxxlpg > div:has(a[href="./#substack"])   { order: 6 !important; }