/* All Work, Whimsies and About in the refresh grammar (visual refresh V8, proposal at
   https://claude.ai/artifact/NEniddAEtPre2HpkLCAf1F). Linked from every page's <head>
   because Framer navigates client-side. Each page's block can be deleted on its own. */

/* ---------- All Work ----------
   The Work Grid component (page module) now renders filter pills and grouped two-column
   grids instead of the folder tabs and framed panel. Cards are the same components as home. */
.cs-wg { gap: 28px; }
.cs-wg-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.cs-wg-pill {
  appearance: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px 8px;
  border: 1px solid #222;
  border-radius: 999px;
  background: #fff;
  color: #10201f;
  font: 600 15px/1.2 "National Park", "National Park Placeholder", sans-serif;
  transition: box-shadow 0.2s ease, background-color 0.16s ease, color 0.16s ease;
}
.cs-wg-pill:is(:hover, :focus-visible) { box-shadow: 3px 3px 0 #222; }
.cs-wg-pill:focus-visible { outline: 2px dashed #007f80; outline-offset: 3px; }
.cs-wg-pill[aria-pressed="true"] { background: #10201f; color: #fff; }
.cs-wg-n {
  font: 400 12px/1 "Necto Mono", ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  opacity: 0.75;
}
.cs-wg-groups { display: grid; gap: 48px; }
.cs-wg-group { display: grid; gap: 16px; }
/* Mono eyebrow with a dashed rule to the right, like home's section labels. */
.cs-wg-eyebrow {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 14px;
  font: 400 12px/1 "Necto Mono", ui-monospace, monospace;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #4d605e;
}
.cs-wg-eyebrow::after { content: ""; flex: 1; border-top: 1px dashed rgba(16, 32, 31, 0.3); }
/* Cards fill their cell so captions in a row line up. */
.cs-wg-grid > * { align-self: stretch; }
@media (prefers-reduced-motion: reduce) { .cs-wg-pill { transition: none; } }

/* ---------- Whimsies ----------
   The comic panels stay as they are. The header loses the instruction bubble (the face
   sticker stays);
   the handwritten tagline turns teal; both section labels become left-aligned eyebrows. */
/* Same side padding as All Work and About at each breakpoint (Framer had 20px on the left,
   from before the rail), so the three pages line up. */
#main .framer-1nbjkum { padding: 50px 100px !important; }
@media (min-width: 810px) and (max-width: 1199.98px) { #main .framer-1nbjkum { padding: 40px 50px !important; } }
@media (max-width: 809.98px) { #main .framer-1nbjkum { padding: 30px 20px !important; } }
/* Framer's panel grids had 9px side padding, which set the panels in from the header. */
#main :is(.framer-14c8t33, .framer-1p457od) { padding-left: 0 !important; padding-right: 0 !important; }
/* The face sticker stays; only its lavender instruction bubble goes. */
#main .framer-o9v7bw { display: none !important; }
#main .framer-1gtta4n { align-items: flex-start !important; }
#main .framer-129jfsw { flex-direction: column !important; align-items: flex-start !important; gap: 6px !important; }
#main .framer-129jfsw::after {
  content: "Games, posters and side quests. Click any one for a closer look.";
  font: 400 16px/1.5 "Inter", "Inter Placeholder", sans-serif;
  letter-spacing: -0.01em;
  color: #4d605e;
  white-space: nowrap;
}
#main .framer-1cuapy9-container,
#main .framer-1cuapy9-container span { color: #007f80 !important; --framer-text-color: #007f80 !important; }
#main .framer-2vlcuw { align-items: flex-start !important; }
#main :is(.framer-h57w2x, .framer-ibl2j9, .framer-1lrciov, .framer-1jw93mo) { align-self: flex-start !important; text-align: left; }
#main :is(.framer-h57w2x, .framer-1lrciov) h3 {
  --framer-font-family: "Necto Mono", ui-monospace, monospace !important;
  --framer-font-size: 12px !important;
  --framer-letter-spacing: 0.1em !important;
  --framer-text-transform: uppercase !important;
  --framer-text-color: #4d605e !important;
  --framer-text-alignment: left !important;
  text-transform: uppercase;
}
#main :is(.framer-ibl2j9, .framer-1jw93mo) h4 { --framer-text-alignment: left !important; }
@media (max-width: 809.98px) {
  #main .framer-129jfsw::after { white-space: normal; font-size: 15px; }
}

/* ---------- About ---------- */
/* Portrait: the same art without its baked-in lavender bubble (about-face.png); the greeting
   is drawn here in the home hero's bubble recipe (.cs-say in hero.css), in its pale blue.
   The portrait scales with the window (180px on phones, 725px at 1920), so the bubble and its
   tail are sized in em from the portrait's width: 22px text at the 485px desktop size,
   15–26px elsewhere. All lengths below are the 22px design divided by 22. The tail's tip sits
   at 40% across and 32% down the portrait, the top of the hair, whatever its size
   (nudged right on phones so the bubble doesn't leave the portrait's left edge). */
.framer-l4wD3 .framer-lhwcgq { container-type: inline-size; }
.framer-l4wD3 .framer-lhwcgq::before,
.framer-l4wD3 .framer-lhwcgq::after {
  position: absolute;
  z-index: 1;
  font-size: clamp(15px, 4.5cqw, 26px);
  filter: drop-shadow(3px 3px 0 rgba(0, 0, 0, 0.22));
  animation: cs-about-pop 700ms 250ms both;
}
/* Fixed height (2.364em: line, padding and border) so the tail lands exactly on its edge. */
.framer-l4wD3 .framer-lhwcgq::before {
  content: "Hi, I\2019m Chris!";
  left: max(0px, calc(40% - 6.27em));
  top: max(0px, calc(32% - 4.727em));
  box-sizing: border-box;
  height: 2.364em;
  padding: 0.5em 1em;
  border: 0.091em solid #000;
  border-radius: 0.727em;
  background: rgb(223, 234, 248);
  color: #10201f;
  font-family: "National Park", "National Park Placeholder", sans-serif;
  font-weight: 600;
  line-height: 1.182em;
  white-space: nowrap;
  transform-origin: 6.27em 4.727em;
}
/* Tail: the hero's lead-bubble tail, pointing down into the hair. Its viewBox starts 2 units
   above the border (y=-2), so the box starts 0.182em above the bubble's bottom edge: the fill
   covers the border at the opening and the outline meets the border in one stroke. It comes
   after the bubble, so it paints on top. Both pop around the tail's tip, so they stay joined. */
.framer-l4wD3 .framer-lhwcgq::after {
  content: "";
  left: calc(max(0px, calc(40% - 6.27em)) + 5.09em);
  top: calc(max(0px, calc(32% - 4.727em)) + 2.182em);
  width: 1.636em;
  height: 2.727em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='60' viewBox='0 -2 36 60'%3E%3Cpath d='M0 -2 0 0 26 56 24 10Q24 0 34 0L34 -2z' fill='rgb(223,234,248)'/%3E%3Cpath d='M0 1 26 56 24 10Q24 1 34 1' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat 0 0 / 100% 100%;
  transform-origin: 1.18em 2.636em;
}

/* Chat bubbles in the hero recipe: 2px ink outline, 16px corners, soft offset shadow, SVG
   tail. Questions are tan with the tail at bottom left; answers are ice, tail at bottom right.
   Framer draws the outline on ::after (inset 0, so the bottom border is the last 2px); the
   tail is ::before, lifted above it, using the same 1:1 geometry as the greeting's tail. */
.framer-l4wD3 :is(.framer-ffh0ra, .framer-qrvsd7, .framer-1j4okz, .framer-wq1um9, .framer-pk9nrk, .framer-1qozs6c) {
  border-radius: 16px !important;
  filter: drop-shadow(3px 3px 0 rgba(0, 0, 0, 0.22));
  overflow: visible !important;
}
.framer-l4wD3 :is(.framer-ffh0ra, .framer-qrvsd7, .framer-1j4okz, .framer-wq1um9, .framer-pk9nrk, .framer-1qozs6c)::after {
  z-index: 1;
  border: 2px solid #000 !important;
  border-radius: 16px !important;
}
.framer-l4wD3 :is(.framer-ffh0ra, .framer-qrvsd7, .framer-1j4okz, .framer-wq1um9, .framer-pk9nrk, .framer-1qozs6c)::before {
  content: "";
  position: absolute;
  z-index: 2;
  top: calc(100% - 4px);
  width: 54px;
  height: 38px;
  pointer-events: none;
  background: no-repeat 0 0 / 54px 38px;
}
/* Question tail: the hero's Creative Technologist tail, mirrored to sweep left. */
.framer-l4wD3 :is(.framer-ffh0ra, .framer-qrvsd7, .framer-1j4okz)::before {
  left: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='54' height='38' viewBox='0 -2 54 38'%3E%3Cpath d='M54 -2 54 0 2 34 20 10Q24 0 16 0L16 -2z' fill='rgb(227,199,191)'/%3E%3Cpath d='M54 1 2 34 20 10Q24 1.5 16 1' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E");
}
/* Answer tail: the same tail as drawn in the hero, sweeping right. */
.framer-l4wD3 :is(.framer-wq1um9, .framer-pk9nrk, .framer-1qozs6c)::before {
  right: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='54' height='38' viewBox='0 -2 54 38'%3E%3Cpath d='M0 -2 0 0 52 34 34 10Q30 0 38 0L38 -2z' fill='rgb(174,231,229)'/%3E%3Cpath d='M0 1 52 34 34 10Q30 1.5 38 1' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E");
}
/* Questions sit a little lower so the answer's tail doesn't land on the next question. */
.framer-l4wD3 :is(.framer-1cbjlyw, .framer-1gm1m6n) { margin-top: 20px; }
.framer-l4wD3 :is(.framer-1q1jl27, .framer-196vbkw, .framer-anyiuj) { margin-top: 10px; }

/* Framer kept the answers hidden (scale 0) until scrolled into view. They are visible at
   rest now; site-fixes.js adds .cs-popped as each bubble enters view, for one short pop
   that never starts from invisible. It animates scale and rotate, not transform, so it
   layers over Framer's inline transform. */
.framer-l4wD3 :is(.framer-wq1um9, .framer-pk9nrk, .framer-1qozs6c) {
  opacity: 1 !important;
  transform: none !important;
}
.framer-l4wD3 :is(.framer-ffh0ra, .framer-qrvsd7, .framer-1j4okz) { transform-origin: 0 100%; }
.framer-l4wD3 :is(.framer-wq1um9, .framer-pk9nrk, .framer-1qozs6c) { transform-origin: 100% 100%; }
.framer-l4wD3 .cs-popped { animation: cs-about-pop 420ms both; }
@keyframes cs-about-pop {
  0% { scale: 0.9; rotate: -2deg; animation-timing-function: cubic-bezier(.2, .8, .4, 1); }
  55% { scale: 1.04; rotate: 1deg; animation-timing-function: ease-in-out; }
  100% { scale: 1; rotate: 0deg; }
}

/* Currently / Previously: the home hero's experience list (.cs-hero-cv in hero.css), one
   role per line with its dates on the right. Markup is in the About HTML and page module;
   it replaces Framer's two lists and the closing line the footer already says. */
.framer-l4wD3 :is(.framer-yofr6x, .framer-6zvcjb) { display: none !important; }
.cs-about-cv {
  --hero-ink: #10201f;
  --hero-mute: #4d605e;
  --hero-teal: #007f80;
  order: 1;
  width: 100%;
  gap: 28px;
  padding-left: 0;
  font-family: "Inter", "Inter Placeholder", sans-serif;
  font-size: 16px;
}
.cs-about-cv > div { grid-template-columns: 120px minmax(0, 1fr); }
.cs-about-cv dd { flex-direction: column; gap: 8px; }
.cs-about-cv .cs-role { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; white-space: normal; }
.cs-about-cv .cs-role::before { flex: none; align-self: center; margin-right: -7px; }
.cs-about-cv .cs-role > span:first-child { flex: 1; min-width: 0; }
.cs-date {
  flex: none;
  font: 400 13px/1.5 "Necto Mono", ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  color: var(--hero-mute);
  white-space: nowrap;
}
@media (max-width: 809.98px) {
  .cs-about-cv { font-size: 15px; }
  .cs-about-cv > div { grid-template-columns: 1fr; gap: 8px; }
  .cs-about-cv .cs-role { flex-wrap: wrap; gap: 0 16px; }
  .cs-about-cv .cs-role > span:first-child { flex-basis: calc(100% - 20px); }
  .cs-date { padding-left: 15px; font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .framer-l4wD3 .cs-popped,
  .framer-l4wD3 .framer-lhwcgq::before,
  .framer-l4wD3 .framer-lhwcgq::after { animation: none !important; }
}