/* ============================================================
   AI Labs (/ai-labs) — Figma node 7282:100329.
   Header like every other page, a macOS-dock row of the tools
   in daily rotation (hover: icon rises, name fades in under it),
   four category tabs, and the tab panes below. The "AI Skills"
   pane reuses the /skills card markup + skills.css + skills.js
   verbatim, so the two pages can never drift apart.
   Scoped under .al-* so nothing leaks to other pages.
   ============================================================ */
.al-wrap {
  --al-ink:    #1a1a1a;
  --al-muted:  rgba(26, 26, 26, 0.52);
  --al-faint:  rgba(26, 26, 26, 0.4);
  --al-line:   rgba(0, 0, 0, 0.12);       /* tab border, per Figma */
  --al-accent: #e8503a;
  /* site curve for fades/slides; a gently overshooting curve for the dock
     rise so it lands with a whisper of macOS-dock bounce */
  --al-ease:   cubic-bezier(0.2, 0.6, 0.2, 1);
  --al-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  box-sizing: border-box;
  width: 100%;
  max-width: 1248px;              /* 1200 content + 24px gutters — the site grid */
  margin: 0 auto;
  padding: 0 24px 168px;          /* header lands at the same y as /skills */
}
.al-wrap *, .al-wrap *::before, .al-wrap *::after { box-sizing: border-box; }

/* ---- header — identical treatment to the /skills header ---- */
.al-head { text-align: center; }
.al-title {
  margin: 0;
  font-size: 40px;
  line-height: 1.14;
  font-weight: 700;
  letter-spacing: -0.76px;
  color: var(--al-ink);
}
.al-intro {
  margin: 8px auto 0;
  font-size: 16px;
  line-height: 20px;
  color: var(--al-faint);
  text-transform: lowercase;
}

/* ---- dock — five app icons, bottoms on a shared baseline (Figma: 84px
   icons, 20px gap, 32px under the intro). Hover raises the icon 20px and
   the app name fades into the vacated space; the label is absolutely
   positioned so nothing reflows and neighbours stay put. ---- */
.al-dock {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 20px;
  height: 84px;
  margin-top: 32px;
}
.al-dock-item {
  position: relative;
  flex: none;
  width: 84px;
  height: 84px;
}
.al-dock-item img {
  display: block;
  width: 84px;
  height: 84px;
  transform: translateY(0);
  transition: transform 0.28s var(--al-spring);
  will-change: transform;
}
.al-dock-name {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 6px);
  font-size: 15px;
  line-height: 20px;
  color: var(--al-faint);
  text-transform: lowercase;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.22s var(--al-ease) 0s, transform 0.22s var(--al-ease) 0s;
}
@media (hover: hover) {
  .al-dock-item:hover img { transform: translateY(-20px); }
  .al-dock-item:hover .al-dock-name {
    opacity: 1;
    transform: translate(-50%, 0);
    transition-delay: 0.05s, 0.05s;
  }
}

/* ---- category tabs — four equal columns (Figma: gap 17, 10px vertical
   padding, 1px rgba(0,0,0,.12) border, active = accent semibold) ---- */
.al-tabs {
  display: flex;
  gap: 17px;
  margin-top: 96px;               /* between Figma's 120 and the too-tight 72 —
                                     user-tuned; still clears the dock's hover labels */
}
.al-tab {
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
  padding: 10px 8px;
  border: 1px solid var(--al-line);
  border-radius: 0;               /* sharp corners — consistent with the site */
  background: #fff;
  font: inherit;
  font-size: 16px;
  line-height: 20px;
  font-weight: 400;
  text-align: center;
  color: rgba(26, 26, 26, 0.5);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  transition: color 0.18s ease, border-color 0.18s ease, font-weight 0s;
}
.al-tab:hover { color: rgba(26, 26, 26, 0.85); border-color: rgba(0, 0, 0, 0.22); }
.al-tab.is-active {
  color: var(--al-accent);
  font-weight: 600;
}
.al-tab:focus-visible { outline: 2px solid var(--al-accent); outline-offset: 3px; }

/* ---- panes ---- */
.al-panes { margin-top: 32px; }
.al-pane { animation: al-pane-in 0.35s var(--al-ease) backwards; }
.al-pane[hidden] { display: none; }
@keyframes al-pane-in {
  from { opacity: 0; transform: translateY(10px); }
}

/* the AI Skills pane reuses .sk-wrap so every skills.css rule applies, but
   the page shell (.al-wrap) already provides width + gutters — neutralise
   the inner wrapper's own sizing (loads after skills.css, so this wins) */
.al-skpane { max-width: none; padding: 0; }

/* ---- macOS & iOS apps pane — the three app cards from the homepage's
   "Apple iOS & macOS Experiences" section, restacked as one column.
   Geometry and colors lifted from the homepage cards: media on top
   (300px, cover), #111 info panel, white type, 0.1-white chips. ---- */
.al-apps {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.al-app {
  display: block;
  background: #111;
  color: inherit;
  text-decoration: none;
  overflow: hidden;
  animation: al-pane-in 0.5s var(--al-ease) backwards;
  animation-delay: calc(var(--i, 0) * 0.06s);
}
.al-app-media {
  height: 300px;
  overflow: hidden;
}
.al-app-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1);
  transition: transform 0.6s var(--al-ease);
}
@media (hover: hover) {
  a.al-app:hover .al-app-media img { transform: scale(1.015); }
}
a.al-app:focus-visible { outline: 2px solid var(--al-accent); outline-offset: 3px; }
.al-app-body { padding: 20px 24px 24px; }
.al-app-kicker {
  margin: 0;
  font-size: 12px;
  letter-spacing: 0.63px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.3);
}
.al-app-name {
  margin: 8px 0 0;
  font-size: 20px;
  line-height: 25.5px;
  font-weight: 700;
  color: #fff;
}
.al-app-desc {
  margin: 6px 0 0;
  max-width: 72ch;
  font-size: 14px;
  line-height: 18.7px;
  color: rgba(255, 255, 255, 0.35);
}
.al-app-stats {
  display: flex;
  gap: 56px;
  margin-top: 18px;
}
.al-app-stat b {
  display: block;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
}
.al-app-stat span {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  letter-spacing: 0.42px;
  text-transform: uppercase;
  color: #fff;
}
.al-app-note {
  margin: 18px 0 0;
  font-size: 16px;
  line-height: 21px;
  color: rgba(255, 255, 255, 0.75);
}
.al-app-rule {
  height: 1px;
  margin-top: 18px;
  background: rgba(255, 255, 255, 0.12);
}
.al-app-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}
.al-app-tags span {
  padding: 4px 8px;
  background: rgba(255, 255, 255, 0.1);
  font-size: 12px;
  letter-spacing: 0.48px;
  text-transform: uppercase;
  color: #fff;
  white-space: nowrap;
}

/* ---- figma plugins pane — the three plugin cards from the homepage,
   restacked as one column. Same recipe as the homepage cards: flat
   #141416 preview box with a centered 44px Figma mark, white info
   area (16px bold title + ↗, 14px muted desc, hairline, label + a
   per-plugin tinted chip row). ---- */
.al-plugs {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.al-plug {
  display: block;
  background: #fff;
  border: 1px solid rgba(26, 26, 26, 0.09);
  color: inherit;
  text-decoration: none;
  animation: al-pane-in 0.5s var(--al-ease) backwards;
  animation-delay: calc(var(--i, 0) * 0.06s);
  transition: border-color 0.25s ease;
}
@media (hover: hover) {
  a.al-plug:hover { border-color: rgba(26, 26, 26, 0.2); }
}
a.al-plug:focus-visible { outline: 2px solid var(--al-accent); outline-offset: 3px; }
.al-plug-media {
  height: 238px;                        /* homepage preview-box height */
  background: #141416 url("/images/figma-mark.svg") center / 44px no-repeat;
}
.al-plug-body { padding: 20px; }
.al-plug-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.al-plug-name {
  margin: 0;
  font-size: 16px;
  line-height: 22.5px;
  font-weight: 700;
  color: var(--al-ink);
}
.al-plug-arrow {
  flex: none;
  width: 13px;
  height: 13px;
  color: rgba(26, 26, 26, 0.4);
  transition: transform 0.2s ease, color 0.2s ease;
}
@media (hover: hover) {
  a.al-plug:hover .al-plug-arrow { transform: translate(2px, -2px); color: var(--al-ink); }
}
.al-plug-desc {
  margin: 4px 0 0;
  max-width: 72ch;
  font-size: 14px;
  line-height: 16.5px;
  color: rgba(26, 26, 26, 0.35);
}
.al-plug-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(26, 26, 26, 0.08);
}
.al-plug-label {
  font-size: 12px;
  letter-spacing: 0.48px;
  text-transform: uppercase;
  color: rgb(200, 200, 200);
  white-space: nowrap;
}
.al-plug-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}
.al-plug-chip {
  padding: 4px 8px;
  font-size: 11px;
  letter-spacing: 0.48px;
  text-transform: uppercase;
  white-space: nowrap;
}
.al-plug-chip--purple { color: rgb(162, 89, 255); background: rgba(162, 89, 255, 0.04); }
.al-plug-chip--blue   { color: rgb(26, 188, 254); background: rgba(26, 188, 254, 0.04); }
.al-plug-chip--coral  { color: rgb(255, 114, 98); background: rgba(255, 114, 98, 0.04); }

/* ---- side projects pane — the four "AI Lab & Experiments" cards from
   the homepage's dark #ai section, restacked as one column. Same recipe:
   #0c0c0e cards with 0.05-white hairlines, 20px bold white titles,
   0.3-white descriptions, 4%-tint chips in each card's own hue. The
   feature card recreates the pipeline specimen (nodes + live output)
   as clean CSS instead of Framer soup. ---- */
.al-exps {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.al-exp {
  display: block;
  background: #0c0c0e;
  color: inherit;
  text-decoration: none;
  overflow: hidden;
  animation: al-pane-in 0.5s var(--al-ease) backwards;
  animation-delay: calc(var(--i, 0) * 0.06s);
}
a.al-exp:focus-visible { outline: 2px solid var(--al-accent); outline-offset: 3px; }

.al-exp-media {
  position: relative;
  height: 300px;
  overflow: hidden;
}
.al-exp-media--fgma { height: 260px; }
.al-exp-media--fgma img { object-position: top; }
.al-exp-media img, .al-exp-media video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1);
  transition: transform 0.6s var(--al-ease);
}
@media (hover: hover) {
  a.al-exp:hover .al-exp-media img { transform: scale(1.015); }
}
.al-exp-badge {
  position: absolute;
  right: 12px;
  bottom: 12px;
  padding: 4px 8px;
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.45);
  font-size: 9px;
  letter-spacing: 0.3px;
  color: rgba(255, 255, 255, 0.5);
}

.al-exp-body { padding: 20px; }
.al-exp-name {
  margin: 0;
  font-size: 20px;
  line-height: 24px;
  font-weight: 700;
  color: #fff;
}
.al-exp-desc {
  margin: 6px 0 0;
  max-width: 72ch;
  font-size: 14px;
  line-height: 16.5px;
  color: rgba(255, 255, 255, 0.3);
}
.al-exp-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}
.al-exp-chip {
  padding: 4px 8px;
  font-size: 11px;
  letter-spacing: 0.48px;
  text-transform: uppercase;
  white-space: nowrap;
}
.al-exp-chip--green  { color: rgb(10, 207, 131);  background: rgba(10, 207, 131, 0.04); }
.al-exp-chip--purple { color: rgb(108, 92, 231);  background: rgba(108, 92, 231, 0.04); }
.al-exp-chip--lime   { color: rgb(148, 232, 58);  background: rgba(148, 232, 58, 0.04); }
.al-exp-chip--accent { color: rgb(232, 80, 58);   background: rgba(232, 80, 58, 0.04); }

/* pipeline specimen: scan figma → extract tokens → ai transform → push to code.
   The specimen zone is padded out to the same 300px presence as the other
   cards' media, so the feature card sits at the same height in the stack. */
.al-exp-flow {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 96px 24px 0;
}
.al-exp--ds .al-exp-out { margin-top: 52px; }
.al-exp--ds .al-exp-body { padding-top: 78px; }
.al-exp-node {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.al-exp-ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 9px;
  font-size: 14px;
  line-height: 1;
  color: rgba(255, 255, 255, 0.25);
}
.al-exp-lbl {
  font-size: 11px;
  letter-spacing: 0.42px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.2);
  white-space: nowrap;
}
.al-exp-node.is-on .al-exp-ico {
  border-color: rgba(10, 207, 131, 0.5);
  color: rgb(10, 207, 131);
  box-shadow: 0 0 14px rgba(10, 207, 131, 0.12);
}
.al-exp-node.is-on .al-exp-lbl { color: rgb(10, 207, 131); }
.al-exp-dash {
  flex: 1 1 0;
  margin-bottom: 19px;             /* sit level with the icon tiles, not the labels */
  border-top: 1px dashed rgba(255, 255, 255, 0.1);
}

/* live output strip under the pipeline */
.al-exp-out {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 20px 24px 0;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.02);
  white-space: nowrap;
  overflow: hidden;
}
.al-exp-out-dot {
  flex: none;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgb(10, 207, 131);
}
.al-exp-out-lbl {
  flex: none;
  font-size: 8px;
  letter-spacing: 0.56px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.25);
}
.al-exp-out-line {
  margin-left: 6px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.4);
  overflow: hidden;
  text-overflow: ellipsis;
}
.al-exp-out-line b { font-weight: 400; color: rgb(10, 207, 131); }

/* empty state for panes whose content is still on its way */
.al-empty {
  border: 1px solid rgba(26, 26, 26, 0.09);
  padding: 72px 24px;
  font-size: 14px;
  line-height: 1.55;
  text-align: center;
  text-transform: lowercase;
  color: var(--al-faint);
}

/* ---- nav order on this page. skills.css (loaded here for the cards)
   pins the current-page <p> to slot 5, which is right for /skills but
   wrong here — on /ai-labs the current <p> is AI Labs (slot 6) and
   AI Skills is a link (slot 5). Same specificity, later file wins. ---- */
#main nav.framer-WLHpg .framer-1gxxlpg > div:has(a[href="./"])            { order: 1 !important; }
#main nav.framer-WLHpg .framer-1gxxlpg > div:has(p):not(:has(a))          { order: 2 !important; }
#main nav.framer-WLHpg .framer-1gxxlpg > div:has(a[href="./about"])       { order: 3 !important; }
#main nav.framer-WLHpg .framer-1gxxlpg > div:has(a[href="./photography"]) { order: 4 !important; }
#main nav.framer-WLHpg .framer-1gxxlpg > div:has(a[href="./youtube"])     { order: 5 !important; }
#main nav.framer-WLHpg .framer-1gxxlpg > div:has(a[href="./#substack"])   { order: 6 !important; }

/* ---- responsive ---- */
@media (max-width: 809.98px) {
  .al-wrap { padding: 0 18px 140px; }
  .al-title { font-size: 28px; }
  .al-intro { font-size: 15px; }
  /* dock scales down; 5 × 56 + 4 × 12 = 328px, fits a 360px viewport */
  .al-dock { gap: 12px; height: 56px; margin-top: 26px; }
  .al-dock-item, .al-dock-item img { width: 56px; height: 56px; }
  .al-dock-name { font-size: 12px; line-height: 14px; }
  @media (hover: hover) {
    .al-dock-item:hover img { transform: translateY(-14px); }
  }
  /* tabs wrap to a 2×2 grid */
  .al-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 48px; }
  .al-tab { font-size: 14px; line-height: 18px; padding: 9px 6px; }
  .al-panes { margin-top: 24px; }
  .al-empty { padding: 56px 18px; }
  .al-apps { gap: 16px; }
  .al-app-media { height: 200px; }
  .al-app-body { padding: 18px 18px 20px; }
  .al-app-stats { flex-wrap: wrap; gap: 24px 40px; }
  .al-plugs { gap: 16px; }
  .al-plug-media { height: 190px; }
  .al-plug-body { padding: 18px; }
  .al-plug-foot { flex-wrap: wrap; }
  .al-plug-chips { justify-content: flex-start; }
  .al-exps { gap: 16px; }
  .al-exp-media, .al-exp-media--fgma { height: 200px; }
  .al-exp-body { padding: 18px; }
  .al-exp-flow { gap: 8px; padding: 52px 18px 0; }
  .al-exp-ico { width: 28px; height: 28px; border-radius: 7px; font-size: 12px; }
  .al-exp-lbl { font-size: 8px; letter-spacing: 0.3px; }
  .al-exp-dash { margin-bottom: 16px; }
  .al-exp-out { margin: 16px 18px 0; }
  .al-exp--ds .al-exp-out { margin-top: 40px; }
  .al-exp--ds .al-exp-body { padding-top: 43px; }
}

@media (prefers-reduced-motion: reduce) {
  .al-dock-item img, .al-dock-name, .al-tab { transition: none; }
  .al-pane { animation: none; }
}