@charset "UTF-8";

/* Keep the viewing action distinct from the secondary asset link. */
body[data-page="lab"] .experiment-actions .button-primary {
  background:#c4ed75; color:#18300f;
  border-color:#efffbd #85aa4d #718e39 #def9a1;
  box-shadow:0 4px 0 #233f18,inset 0 3px 0 #efffc288,inset 0 -3px 0 #91b951;
}
body[data-page="lab"] .experiment-actions .button-primary:hover {
  background:#d2f98b; color:#18300f;
  border-color:#efffbd #97bb60 #718e39 #def9a1;
  box-shadow:0 6px 0 #233f18,inset 0 3px 0 #f5ffd078,inset 0 -3px 0 #a4ca63;
}
body[data-page="lab"] .experiment-actions .button-primary:active { transform:translateY(3px); box-shadow:0 1px 0 #233f18; }

/* Pixel edition, second pass: varied materials and clearer editorial hierarchy.
   Every selector stays inside the portfolio's non-home routes. Media is intact. */
.page {
  --px-surface-top: #1a3d2b;
  --px-surface-deep: #092019;
  --px-bevel: inset 0 2px 0 #b7d38b16, inset 2px 0 0 #b7d38b0c,
    inset 0 -3px 0 #020e0a8c, inset -2px 0 0 #020e0a55;
}

/* Chapter entrances have an offset square, a substantial baseline, and air. */
.page .page-heading,
.lab-page .page-heading {
  min-height: 174px;
  padding-top: 15px;
  padding-bottom: 34px;
  margin-bottom: 34px;
  border-bottom-color: #3c6045;
  background: linear-gradient(90deg, #8bb4640b, transparent 63%);
}
.page .page-heading::after {
  display: block;
  width: 96px;
  height: 5px;
  box-shadow: 8px -7px 0 -1px #82a651, 17px -14px 0 -1px #36583c;
}
.page .page-heading h1 {
  display: flex;
  align-items: center;
  gap: 22px;
  text-shadow: 4px 4px 0 #020e09, 5px 5px 0 #56733c55;
}
.page .page-heading h1::after {
  content: "";
  flex: 0 0 12px;
  width: 12px;
  height: 12px;
  margin-top: 14px;
  background: #b8e86b;
  box-shadow: 0 -16px 0 #476d3c, 16px 0 0 #294934;
}
.lab-page .page-heading h1 { display: block; }
.lab-page .page-heading h1::after { display: inline-block; margin-left: 22px; vertical-align: 13px; }
.page .page-heading .eyebrow,
.contact-editorial .contact-hero .eyebrow { font-size: 12px; letter-spacing: 1.5px; }
.page .page-heading .page-lede { border-left: 2px solid #486440; padding-left: 20px; }
.page .section-heading { margin-bottom: 26px; }
.page .section-heading h2 { text-shadow: 2px 2px #03100b; }
.page .section-kicker { display: flex; align-items: center; gap: 9px; }
.page .section-kicker::before {
  content: "";
  width: 5px;
  height: 5px;
  flex: 0 0 5px;
  background: #bce86b;
  box-shadow: 4px 4px 0 #466735;
}
.page .back-link { padding: 8px 12px; background: #0d2c20b8; border: 1px solid #36583d; box-shadow: 2px 2px 0 #020e09; }

/* Film index: a grass-brick crown, dark recess, and a carved title panel. */
.lab-page .featured-grid { gap: 36px; }
.lab-page .experiment-feature {
  border-color: #69814c #243f2d #183024 #547245;
  border-top-width: 5px;
  background: #0c291e;
  box-shadow: 7px 8px 0 #020f0b, var(--px-bevel);
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
.lab-page .experiment-feature::after {
  width: 52px;
  height: 7px;
  top: 0;
  right: 28px;
  background: #a9ce5e;
  box-shadow: -8px 7px 0 #5c8642, 8px -3px 0 #c8e681;
}
.lab-page .experiment-cover { border-right: 4px solid #061810; padding: 6px 0 6px 6px; }
.lab-page .experiment-cover img { filter: none; image-rendering: auto; }
.lab-page .experiment-content {
  padding: 36px;
  background:
    linear-gradient(90deg, transparent 50%, #a3c87707 50%) right bottom / 38px 10px repeat-x,
    linear-gradient(90deg, #a3c87706 50%, transparent 50%) right bottom 10px / 38px 10px repeat-x,
    linear-gradient(135deg, #1b3d2a, #0b271d 76%);
}
.lab-page .experiment-meta { gap: 15px; padding-bottom: 16px; margin-bottom: 18px; border-bottom: 1px solid #49603a77; }
.lab-page .experiment-meta > span:last-child { color: #d8e5b8; }
.lab-page .experiment-feature h2 { margin-bottom: 16px; font-size: clamp(31px, 3.2vw, 43px); text-shadow: 3px 3px 0 #020e09; }
.lab-page .experiment-feature h2 a > span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  font-size: 24px;
  border: 1px solid #73974d70;
  background: #0a2118;
  box-shadow: 2px 2px 0 #020f0b;
}
.lab-page .experiment-feature p { max-width: 420px; margin-bottom: 27px; }
.lab-page .experiment-cover .play-mark {
  width: 68px;
  height: 68px;
  border-color: #edf6c6 #8aa458 #66833d #d4e9a2;
  box-shadow: 5px 5px 0 #020e0bcc, inset 0 -4px 0 #020e0b77;
}
.lab-page .duration { bottom: 17px; right: 16px; border-width: 0 0 2px 0; border-color: #92ac60; padding: 5px 10px; }
.lab-page .filter-bar { gap: 12px; margin-bottom: 32px; }
.lab-page .filter-button { border-color: #4e6b42 #263e2b #1c3424 #4e6b42; box-shadow: 3px 4px 0 #020e09, var(--px-bevel); padding-inline: 19px; }
.lab-page .filter-button.is-active { box-shadow: 3px 4px 0 #263e19, inset 0 -3px 0 #8ab846; }
.lab-page .filter-button .count { padding-left: 10px; border-left: 1px solid currentColor; line-height: 1; opacity: .67; }
.lab-page .workbench-feature { border-top-color: #8aa391; }
.lab-page .workbench-feature .experiment-content { background: linear-gradient(135deg, #1b3931, #0a251e); }
.lab-page .workbench-feature::after { background: #a0c3ad; box-shadow: -8px 7px 0 #527d67, 8px -3px 0 #d0e0ba; }
.lab-page .workbench-card-note { border-left: 3px solid #658768; padding-left: 10px; margin-top: 15px; }

/* Real content pending: sculpt the placeholder mounts, keep their status plain. */
.works-page .curated-grid { gap: 27px; }
.works-page .work-art {
  border-top: 6px solid #8eae50;
  border-right-color: #233c2b;
  border-bottom-color: #14291e;
  border-left-color: #597346;
  box-shadow: 6px 7px 0 #020e0a, var(--px-bevel);
}
.works-page .placeholder-cover.theme-lime { background-color: #1c4029; }
.works-page .placeholder-cover.theme-clay { background-color: #3b3429; border-top-color: #bb8c5b; }
.works-page .placeholder-cover.theme-blue { background-color: #233a38; border-top-color: #79a79b; }
.works-page .placeholder-cover::before {
  background:
    linear-gradient(90deg, transparent 50%, #acc48c08 50%) 0 0 / 32px 32px,
    linear-gradient(#b6cf9310 1px, transparent 1px) 0 0 / 32px 32px;
  mask-image: linear-gradient(135deg, #000, transparent 85%);
}
.works-page .placeholder-cover .cover-ribbon {
  top: 60px;
  right: 35px;
  width: 52px;
  height: 52px;
  border-width: 10px;
  border-color: #9dbd6c4d #56724755 #3a573a66 #c0d69033;
  box-shadow: -24px 24px 0 -7px #051a1670, -24px 24px 0 -2px #71955625,
    20px -20px 0 -11px #c6d7951f;
}
.works-page .placeholder-cover .cover-label { bottom: 23px; left: 22px; right: 22px; padding-top: 17px; border-top: 1px solid #d5e6b228; }
.works-page .placeholder-cover .cover-label strong { font-size: 20px; }
.works-page .work-card h2 { font-size: 25px; }
.works-page .work-card .work-meta { margin-top: 21px; }
.works-page .content-note { padding: 16px 0 0 16px; border-left: 3px solid #54743f; max-width: 600px; }

/* Case studies: museum-like mounts, chapter markers, and crisp tool trays. */
.experiment-page .experiment-heading,
.workbench-page .workbench-heading,
.project-page .project-hero { padding-block: 15px 23px; }
.page .experiment-info { padding: 13px 19px; background: #0b291fc2; border-left: 4px solid #78984d; box-shadow: inset 0 1px #b3cb8512; }
.page .case-nav { border-color: #5a7647 #233e2a #1c3224 #5a7647; padding: 7px; box-shadow: 4px 5px 0 #020e09, var(--px-bevel); }
.page .case-nav button { min-height: 40px; font-size: 12px; }
.page .case-nav button.is-active,
.page .case-nav button[aria-current="true"] { box-shadow: inset 0 -3px 0 #88b94a; }
.page .video-frame { border-width: 6px; border-color: #536647 #192e22 #10251b #536647; box-shadow: 8px 9px 0 #020e09; }
.page .film-play > span { border-width: 3px; border-color: #dbe9b0 #789647 #577333 #dbe9b0; box-shadow: 5px 5px 0 #020e0bb3, inset 0 -5px #020e0b55; }
.page .media-section > .section-heading { padding-top: 19px; border-top: 1px solid #45613d; position: relative; }
.page .media-section > .section-heading::before { content: ""; position: absolute; width: 45px; height: 4px; left: 0; top: -2px; background: #8daf58; box-shadow: 6px -4px 0 #466d3c; }
.page .film-canvas-card,
.page .workbench-preview { padding: 10px; border-color: #516c44 #213b2a #142c20 #516c44; box-shadow: 6px 7px 0 #020e09, var(--px-bevel); }
.page .film-canvas-card .image-caption { padding: 17px 8px 7px; }
.page .board-overview { border-color: #4f6b40 #213b28 #172e20 #4f6b40; background: #102e21; }
.page .shot-card .shot-topline { background: #243d29; padding-block: 10px; }
.page .shot-card .shot-topline strong { color: #e0ecc0; }
.page .shot-tabs,
.page .asset-tabs { background: #061c13; box-shadow: inset 0 2px 0 #020e09; border-color: #294731; }
.page .asset-tabs button[aria-selected="true"],
.page .shot-tabs button[aria-selected="true"] { background: #365035; box-shadow: inset 0 2px 0 #aec97833, inset 0 -3px 0 #90b85a; }
.page .project-pagination { padding-top: 25px; margin-top: 53px; }
.page .project-pagination a { padding: 11px 14px; background: #102e21b3; border-left: 3px solid #6f9149; }
.page .project-pagination a:last-child { border-left: 0; border-right: 3px solid #6f9149; text-align: right; }

/* Inventory panels mix moss/stone shades instead of repeating one flat box. */
.about-page .profile-overview { gap: 45px; padding-block: 5px 52px; }
.about-page .about-copy { padding-left: 25px; border-left: 4px solid #6f9946; }
.about-page .profile-portrait { border-color: #80985c #324c32 #1b3525 #80985c; background: repeating-linear-gradient(0deg, #153829 0 31px, #193d2b 31px 32px); box-shadow: 8px 8px 0 #020e09, inset 0 0 0 6px #09261b; }
.about-page .profile-card,
.workbench-page .workbench-feature-grid section { position: relative; border-color: #587246 #29432e #183023 #587246; box-shadow: 5px 6px 0 #020e09, var(--px-bevel); background: linear-gradient(145deg, #183a28, #0a261c 75%); }
.about-page .profile-card:nth-child(2),
.workbench-page .workbench-feature-grid section:nth-child(2) { background: linear-gradient(145deg, #203a31, #0b271f 75%); }
.about-page .resume-card,
.workbench-page .workbench-feature-grid section:nth-child(3) { background: linear-gradient(145deg, #303c29, #10271d 75%); }
.about-page .profile-card::after,
.workbench-page .workbench-feature-grid section::after { content: ""; position: absolute; width: 17px; height: 5px; right: 19px; top: 0; background: #9cb765; box-shadow: -5px 5px 0 #49683a; }
.about-page .profile-card .card-number { border-bottom: 1px solid #58714666; padding-bottom: 14px; width: 100%; }
.about-page .profile-card .skill-tags > span { box-shadow: inset 0 2px 0 #d8edb018, 2px 2px 0 #03130b; padding: 7px 10px; }

/* Contact is a personal calling card: bright mail slab, stone phone, QR mount. */
.contact-editorial .contact-hero { padding-block: 14px 37px; margin-bottom: 35px; border-bottom-color: #45643e; }
.contact-editorial .contact-hero::after { width: 46px; height: 46px; top: 43px; right: 31px; border-width: 9px; border-color: #b8dd77 #71974c #426d3b #d1e7a2; box-shadow: -31px 31px 0 -8px #688c45, -62px 62px 0 -15px #274e31; opacity: .9; }
.contact-editorial .contact-display { color: #a0bc72; text-shadow: 3px 3px 0 #020e09; }
.contact-editorial .contact-lede { padding-left: 16px; border-left: 3px solid #577846; }
.contact-editorial .contact-editorial-grid { gap: 23px; }
.contact-editorial .contact-stack .contact-card { padding: 32px; border-color: #65804b #28442d #193222 #65804b; box-shadow: 6px 7px 0 #020e09, var(--px-bevel); }
.contact-editorial .contact-stack .email-card { background: linear-gradient(125deg, #294b2b, #143b27); border-top-width: 5px; border-top-color: #afce68; }
.contact-editorial .contact-stack .phone-card { background: linear-gradient(125deg, #24392e, #0c2a1e); }
.contact-editorial .contact-stack .wechat-card { background: linear-gradient(160deg, #173929, #09261b 66%); border-top-width: 5px; border-top-color: #709852; }
.contact-editorial .contact-card-body .contact-index { padding-bottom: 12px; border-bottom: 1px solid #a9bf782e; margin-bottom: 17px; }
.contact-editorial .contact-stack .email-card .contact-value { font-size: clamp(22px, 2.5vw, 33px); text-shadow: 2px 2px 0 #061a0b; }
.contact-editorial .contact-stack .phone-card .contact-value { letter-spacing: 2px; font-size: 30px; }
.contact-editorial .contact-stack .wechat-card .contact-value { font-family: var(--px-display); font-weight: 400; font-size: 32px; color: #d1e8a2; }
.contact-editorial .contact-card-corner { top: 31px; right: 30px; color: #c9ed8c; }
.contact-editorial .contact-card-action { padding-top: 4px; }
.contact-editorial .wechat-qr-trigger { padding: 13px; border-width: 5px; border-color: #afc68b #718d52 #526f3e #dce9bb; box-shadow: 7px 7px 0 #020e09; }
.contact-editorial .wechat-qr-window,
.contact-editorial .wechat-qr-window img { overflow: visible; image-rendering: auto; filter: none; }
.contact-editorial .contact-closing { padding-top: 29px; margin-top: 38px; font-family: var(--px-display); font-size: 23px; }

/* Hover feedback changes the mount, never the color or pixel fidelity of art. */
@media (hover: hover) and (pointer: fine) {
  .lab-page .experiment-feature:hover { transform: translateY(-3px); border-top-color: #c7e886; box-shadow: 7px 11px 0 #020f0b, var(--px-bevel); }
  .page .film-canvas-card:hover,
  .page .workbench-preview:hover { border-top-color: #a5c778; }
  .about-page .profile-card:hover { border-top-color: #9db86c; }
  .contact-editorial .contact-stack .contact-card:hover { border-left-color: #96b86b; }
}

@media (max-width: 1100px) and (min-width: 761px) {
  .lab-page .experiment-content { padding: 28px; }
  .lab-page .experiment-feature h2 { font-size: 34px; }
  .contact-editorial .contact-stack .contact-card { padding: 27px; }
  .contact-editorial .contact-stack .email-card .contact-value { font-size: 26px; }
}
@media (max-width: 760px) {
  .page .page-heading,
  .lab-page .page-heading { min-height: 0; padding-top: 6px; padding-bottom: 29px; margin-bottom: 29px; }
  .page .page-heading .eyebrow,
  .contact-editorial .contact-hero .eyebrow { font-size: 10px; letter-spacing: .8px; }
  .page .page-heading h1 { gap: 17px; }
  .page .page-heading h1::after { width: 9px; height: 9px; flex-basis: 9px; margin-top: 10px; box-shadow: 0 -12px 0 #476d3c, 12px 0 0 #294934; }
  .lab-page .page-heading h1::after { margin-left: 18px; vertical-align: 10px; }
  .page .page-heading .page-lede { border-left: 2px solid #486440; padding-left: 13px; margin-top: 16px; }
  .lab-page .featured-grid { gap: 29px; }
  .lab-page .experiment-feature { border-top-width: 4px; box-shadow: 4px 5px 0 #020f0b, var(--px-bevel); }
  .lab-page .experiment-cover { border-right: 0; border-bottom: 4px solid #061810; padding: 5px 5px 0; }
  .lab-page .experiment-content { padding: 25px 22px 29px; }
  .lab-page .experiment-meta { font-size: 8px; padding-bottom: 13px; margin-bottom: 14px; }
  .lab-page .experiment-feature h2 { font-size: 31px; }
  .lab-page .experiment-feature h2 a > span { width: 29px; height: 29px; flex-basis: 29px; font-size: 20px; }
  .lab-page .experiment-feature p { margin-bottom: 22px; }
  .lab-page .filter-bar { gap: 9px; margin-bottom: 28px; }
  .lab-page .filter-button { padding-inline: 11px; }
  .lab-page .filter-button .count { padding-left: 7px; }
  .works-page .curated-grid { gap: 31px; }
  .works-page .placeholder-cover .cover-label strong { font-size: 20px; }
  .works-page .work-card h2 { font-size: 25px; }
  .page .experiment-info { border-left: 3px solid #78984d; padding: 10px 13px; }
  .page .video-frame { border-width: 4px; box-shadow: 5px 6px 0 #020e09; }
  .page .case-nav { padding: 5px; }
  .page .case-nav button { min-height: 37px; font-size: 10px; }
  .page .film-canvas-card,
  .page .workbench-preview { padding: 7px; }
  .page .film-canvas-card .image-caption { padding: 13px 3px 5px; }
  .page .media-section > .section-heading { padding-top: 16px; }
  .page .project-pagination { gap: 16px; margin-top: 40px; }
  .page .project-pagination a { padding: 9px; font-size: 11px; }
  .about-page .profile-overview { gap: 30px; padding-bottom: 37px; }
  .about-page .about-copy { padding-left: 17px; border-left-width: 3px; }
  .contact-editorial .contact-hero { padding-top: 4px; padding-bottom: 29px; margin-bottom: 29px; }
  .contact-editorial .contact-hero::after { width: 23px; height: 23px; top: 48px; right: 8px; border-width: 5px; box-shadow: -16px 16px 0 -4px #688c45, -32px 32px 0 -8px #274e31; }
  .contact-editorial .contact-display { font-size: 29px; }
  .contact-editorial .contact-editorial-grid { gap: 19px; }
  .contact-editorial .contact-stack .contact-card { padding: 25px 22px; }
  .contact-editorial .contact-stack .email-card .contact-value { font-size: clamp(20px, 5.3vw, 28px); }
  .contact-editorial .contact-stack .phone-card .contact-value { font-size: 28px; }
  .contact-editorial .contact-stack .wechat-card .contact-value { font-size: 30px; }
  .contact-editorial .contact-card-corner { top: 25px; right: 22px; font-size: 32px; }
  .contact-editorial .contact-closing { font-size: 19px; gap: 18px; align-items: flex-start; flex-wrap: wrap; }
}
@media (max-width: 359px) {
  .contact-editorial .contact-stack .email-card .contact-value { font-size: 19px; }
  .lab-page .filter-button { padding-inline: 9px; }
  .lab-page .experiment-content { padding-inline: 19px; }
}
@media (prefers-reduced-motion: reduce) {
  .lab-page .experiment-feature { transition: none; }
}
.motion-disabled .lab-page .experiment-feature,
.motion-paused .lab-page .experiment-feature,
.motion-suspended .lab-page .experiment-feature { transition: none; }