@charset "UTF-8";

/* Quiet stone mounts in a dusk-green world. The work itself keeps its own colors. */
.page {
  --ruin-surface:#10271f;
  --ruin-inset:#0b2018;
  --ruin-edge:#53664f;
  --ruin-gold:#d7b775;
  --ruin-soft-shadow:0 10px 30px #00000020,inset 0 1px 0 #d7dfb710;
  --px-bevel:inset 0 1px 0 #d7dfb710;
  padding-top:34px;
}

/* Each section has its own small ruin, built from the same stone vocabulary. */
.page .ruin-page-heading,
.contact-editorial .contact-hero.ruin-page-heading {
  position:relative;
  isolation:isolate;
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(220px,.85fr);
  align-items:center;
  gap:18px 45px;
  width:100%;
  min-height:274px;
  margin:0 0 35px;
  padding:24px 34px 25px;
  overflow:hidden;
  border:1px solid #6d7c5b66;
  border-bottom-color:#465d43;
  background:
    linear-gradient(90deg,#0b211bf2 0%,#0c241cda 47%,#0c241c38 100%),
    linear-gradient(0deg,#0a201be8,transparent 70%),
    url("assets/pixel/ruins-backdrop.webp") 76% 52% / cover;
  box-shadow:var(--ruin-soft-shadow);
}
.page .ruin-page-heading::before,
.contact-editorial .contact-hero.ruin-page-heading::before {
  content:"";
  position:absolute;
  inset:9px;
  z-index:-1;
  border:1px solid #a6b08a13;
  pointer-events:none;
}
.page .ruin-page-heading::after,
.contact-editorial .contact-hero.ruin-page-heading::after {
  content:"";
  display:block;
  position:absolute;
  inset:auto auto 0 34px;
  width:74px;
  height:2px;
  background:var(--ruin-gold);
  border:0;
  box-shadow:0 0 20px #e6c46e30;
  opacity:.85;
}
.page .ruin-heading-copy,
.contact-editorial .contact-hero-copy { position:relative; z-index:2; min-width:0; }
.page .ruin-page-heading .eyebrow,
.contact-editorial .contact-hero.ruin-page-heading .eyebrow {
  color:#d4bc83;
  font-size:12px;
  letter-spacing:2px;
  margin-bottom:17px;
}
.page .ruin-page-heading h1,
.contact-editorial .contact-title-lockup h1 {
  display:block;
  margin:0;
  font-size:clamp(55px,6.1vw,82px);
  line-height:1.3;
  text-shadow:0 3px 0 #03130e;
}
.page .ruin-page-heading h1::after { display:none; }
.page .ruin-page-heading .page-lede,
.lab-page .ruin-page-heading .page-lede,
.contact-editorial .ruin-page-heading .contact-lede {
  max-width:510px;
  margin:18px 0 0;
  padding:0;
  border:0;
  color:#c0cfba;
  font-size:14px;
  line-height:1.95;
}
.lab-page .lab-title-accent { color:#d5e7a2; }
.lab-page .lab-scenery { display:none; }
.ruin-page-scene {
  position:relative;
  justify-self:end;
  width:min(100%,330px);
  height:238px;
  isolation:isolate;
  pointer-events:none;
}
.ruin-page-scene svg {
  position:relative;
  display:block;
  width:100%;
  height:100%;
  overflow:visible;
  filter:drop-shadow(0 13px 10px #020c0855);
}
.ruin-chapter-number {
  position:absolute;
  right:-4px;
  top:-16px;
  z-index:-1;
  color:#c8d5a80c;
  -webkit-text-stroke:1px #b9c99f21;
  font:400 128px/1 var(--px-display);
  letter-spacing:-5px;
}
.ruin-scene-halo {
  position:absolute;
  z-index:-1;
  inset:2% -15% -9%;
  background:radial-gradient(ellipse at 52% 42%,#d7b77527,transparent 57%),radial-gradient(ellipse at 50% 78%,#9ac16b20,transparent 65%);
}
.ruin-scene-caption {
  position:absolute;
  right:0;
  bottom:-6px;
  color:#99aa85;
  font:400 10px/1.5 var(--px-display);
  letter-spacing:2px;
}
.ruin-chapter-works .ruin-scene-halo { background:radial-gradient(ellipse at 48% 65%,#9eb56b2e,transparent 62%); }
.ruin-chapter-lab .ruin-scene-halo { background:radial-gradient(ellipse at 50% 48%,#b5cc6738,transparent 55%); }
.ruin-chapter-about .ruin-scene-halo { background:radial-gradient(ellipse at 66% 44%,#dfad5e33,transparent 58%); }
.ruin-chapter-contact .ruin-scene-halo { background:radial-gradient(ellipse at 53% 29%,#efbd6742,transparent 61%); }

/* A fine engraved line replaces the former grass crowns and offset slabs. */
.page .section-heading { margin-bottom:25px; }
.page .section-heading h2 { text-shadow:none; }
.page .section-kicker { color:#c3ce9b; }
.page .section-kicker::before { width:4px; height:4px; flex-basis:4px; background:var(--ruin-gold); box-shadow:none; }
.page .status { color:#b6c6a7; border-color:#65745961; background:#10261c; }
.page .button,
.lab-page .experiment-actions .button,
.contact-editorial .contact-card-action .button,
.page .detail-tabs button,
.page .experiment-sections button {
  border:1px solid #79836888;
  background:#183328;
  color:#e5ecd8;
  box-shadow:inset 0 1px 0 #e3e7bb13,0 2px 0 #04130d66;
  transform:none;
}
.page .button-primary,
.lab-page .button-primary,
body[data-page="lab"] .experiment-actions .button-primary,
.contact-editorial .contact-card-action .button-primary {
  color:#1d3013;
  background:#bfdc7c;
  border:1px solid #d7e6a6;
  box-shadow:inset 0 1px 0 #f5f9d33d,0 2px 0 #30461c99;
}
.page .button:disabled { color:#8fa088; background:#173025; border-color:#445943; box-shadow:none; }
.page .back-link { border:1px solid #5c6e4f66; box-shadow:inset 0 1px #ccd7a711; background:#10291fac; }
.page .text-button { color:#cbdba2; }

/* The lab is a screening gallery: quiet picture mounts and lit title panels. */
.lab-page .filter-bar { padding-top:0; margin-bottom:29px; border-top:0; gap:10px; }
.lab-page .filter-bar::before { display:none; }
.lab-page .filter-button {
  border:1px solid #61734e80;
  padding:11px 17px;
  background:#10271ee6;
  color:#bdcab3;
  box-shadow:inset 0 1px #c6d2a410;
}
.lab-page .filter-button.is-active { color:#203019; background:#c0d98a; border-color:#cfdfa7; box-shadow:inset 0 1px #ebf5c955; }
.lab-page .filter-button.is-empty { background:#0d231be6; color:#a1b09a; border-color:#485b3b88; }
.lab-page .filter-button .count { border-left-color:#a4b68a55; opacity:.8; }
.lab-page .featured-grid { gap:32px; }
.lab-page .experiment-feature {
  grid-template-columns:minmax(0,1.16fr) minmax(0,1fr);
  border:1px solid #71805b99;
  background:var(--ruin-surface);
  box-shadow:var(--ruin-soft-shadow);
  transform:none;
  overflow:hidden;
}
.lab-page .experiment-feature::after { display:none; }
.lab-page .experiment-cover { padding:0; min-height:300px; border-right:1px solid #63724e66; background:#07150f; }
.lab-page .experiment-cover img { filter:none; image-rendering:auto; }
.lab-page .experiment-content,
.lab-page .workbench-feature .experiment-content {
  padding:34px;
  background:radial-gradient(ellipse at 100% 0,#d5b5730c,transparent 65%),#10271f;
}
.lab-page .experiment-meta { margin-bottom:21px; padding-bottom:17px; border-bottom:1px solid #8695682e; color:#a9bb96; font-size:10px; }
.lab-page .experiment-meta > span:last-child { color:#cfbd90; }
.lab-page .experiment-feature h2 { margin-bottom:16px; font-size:clamp(31px,3.1vw,43px); text-shadow:0 2px #03150e; }
.lab-page .experiment-feature h2 a > span { border:0; background:transparent; box-shadow:none; color:#d1b679; }
.lab-page .experiment-feature p { color:#b7c8ae; font-size:13px; line-height:1.95; }
.lab-page .experiment-actions { gap:11px; }
.lab-page .experiment-actions .button { justify-content:space-between; }
.lab-page .experiment-cover .play-mark,
.page .play-mark {
  width:66px;
  height:66px;
  border:1px solid #dddcb099;
  color:#f0e2ad;
  background:#0c231de8;
  box-shadow:0 0 0 6px #091b1477,inset 0 1px #e4e6b524;
}
.lab-page .duration { bottom:16px; right:16px; padding:5px 10px; border:1px solid #a5b18044; background:#081b15e8; color:#dce5c4; }
.lab-page .workbench-card-note { border-left:1px solid #b3bb7b88; color:#aebfa5; }
.page .empty-state { border:1px solid #66795188; background:#10271fec; box-shadow:var(--ruin-soft-shadow); }

/* The empty project mounts remain honest, with a restrained stone engraving. */
.works-page .curated-grid { gap:24px; }
.works-page .work-art { border:1px solid #657650a3; box-shadow:var(--ruin-soft-shadow); }
.works-page .placeholder-cover.theme-lime { background:#203b29; }
.works-page .placeholder-cover.theme-clay { background:#38372a; }
.works-page .placeholder-cover.theme-blue { background:#213a35; }
.works-page .placeholder-cover::before {
  inset:12px;
  border:1px solid #becda320;
  background:linear-gradient(125deg,#c4cea30c,transparent 65%);
  transform:none;
  mask-image:none;
  opacity:1;
}
.works-page .placeholder-cover .cover-ribbon {
  width:74px;
  height:100px;
  inset:45px 35px auto auto;
  border:1px solid #a9bc7a66;
  background:#11291e66;
  box-shadow:7px 7px 0 #9caa7a10,inset 0 1px #e7edbc24;
  transform:skewY(-12deg);
  opacity:1;
}
.works-page .placeholder-cover .cover-ribbon::before { inset:9px; border:1px solid #a9bb7333; background:linear-gradient(135deg,#d1daac11,transparent 70%); }
.works-page .placeholder-cover .cover-label { border-top:1px solid #bfcd9c30; padding-top:20px; }
.works-page .placeholder-cover .cover-label strong { font-size:clamp(18px,1.85vw,25px); }
.works-page .placeholder-cover .cover-label small { color:#adbea0; }
.works-page .placeholder-cover .art-note { color:#c6c7a5; }
.works-page .work-card .work-meta { margin-top:20px; }
.works-page .work-card h2 { font-size:25px; }
.works-page .content-note { border-left:1px solid #b3bb7b88; padding:8px 0 8px 17px; font-size:12px; }

/* Film and canvas pages use museum-like picture mounts without image tinting. */
.page .project-hero,
.page .experiment-heading,
.page .workbench-heading { padding-block:13px 25px; }
.page .project-hero h1,
.page .experiment-heading h1,
.page .workbench-heading h1 { text-shadow:0 2px #03130e; }
.page .project-meta { background:#10291fe0; border:1px solid #71805b66; box-shadow:inset 0 1px #c8d6a911; }
.page .experiment-info { background:#122b21ce; border-left:1px solid #b8be8066; padding:13px 18px; box-shadow:inset 0 1px #b8c39813; }
.page .case-nav { padding:6px; border:1px solid #74815a99; background:#10271ff5; box-shadow:0 6px 20px #0002,inset 0 1px #d0d9ae10; }
.page .case-nav button.is-active,
.page .case-nav button[aria-current="true"] { background:#bed789; border-color:#d4e5a6; color:#20321a; box-shadow:inset 0 1px #e8f1bf44; }
.page .video-frame,
.experiment-page .video-frame { border:1px solid #74816599; box-shadow:0 12px 35px #0003; background:#020906; }
.page .film-play > span { border:1px solid #d6c48da6; background:#10271ee8; color:#e7d9a7; box-shadow:0 0 0 7px #0b1e1566,inset 0 1px #f2e4b62b; }
.page .media-section > .section-heading { border-top:1px solid #81906644; padding-top:25px; }
.page .media-section > .section-heading::before { width:45px; height:2px; top:-1px; background:#bfac72; box-shadow:none; }
.page .film-canvas-card,
.page .workbench-preview,
.page .board-overview,
.page .shot-card,
.page .asset-grid .image-card,
.page .stills-section .image-card,
.page .workbench-screens .image-card { border:1px solid #687a4e99; background:#10271f; box-shadow:var(--ruin-soft-shadow); }
.page .film-canvas-card,
.page .workbench-preview { padding:8px; }
.page .shot-card .shot-topline { background:#20362a; border-bottom:1px solid #65765266; }
.page .shot-card .image-caption { background:#10271f; }
.page .shot-tabs,
.page .asset-tabs { border:1px solid #61754d88; background:#0d241c; box-shadow:inset 0 1px #c5d0a40e; }
.page .asset-tabs button[aria-selected="true"],
.page .shot-tabs button[aria-selected="true"] { border-color:#899d6077; background:#2c4431; box-shadow:inset 0 -1px #c5d590; }
.page .shot-arrow { border:1px solid #75895199; box-shadow:inset 0 1px #bfcaa610; background:#132d23; }
.page .project-pagination { border-color:#75875e66; }
.page .project-pagination a,
.page .project-pagination a:last-child { border:1px solid #667c4b66; background:#10271fc7; box-shadow:inset 0 1px #c3cfa20d; }
.page .workbench-feature-grid section,
.page .workbench-feature-grid section:nth-child(2),
.page .workbench-feature-grid section:nth-child(3) { border:1px solid #697a4f88; box-shadow:var(--ruin-soft-shadow); background:#10271f; }
.page .workbench-feature-grid section::after { display:none; }
.page .workbench-feature-grid section > span { color:#d2bb7b; }
.page .workbench-display-note { border:1px solid #6e805188; background:#132c21; box-shadow:var(--ruin-soft-shadow); }
.page .workbench-image-note { background:#10271f; }
.page .image-card img,
.page .experiment-cover img,
.contact-editorial .wechat-qr-window img { filter:none; image-rendering:auto; }

/* Personal records sit on one calm identity panel and three engraved records. */
.about-page .profile-overview {
  position:relative;
  gap:36px;
  padding:32px 38px;
  margin-bottom:24px;
  border:1px solid #697b4d88;
  background:radial-gradient(ellipse at 85% 35%,#d8b8700d,transparent 60%),#10271ff2;
  box-shadow:var(--ruin-soft-shadow);
}
.about-page .about-copy { border-left:1px solid #b8b58188; padding-left:24px; }
.about-page .profile-overview .about-copy h2 { color:#e6ebd5; font-size:38px; }
.about-page .profile-overview .about-copy p { color:#bacab0; font-size:14px; }
.about-page .profile-portrait { width:190px; height:228px; border:1px solid #87916b; background:#183126; box-shadow:inset 0 0 0 8px #0c231a,0 10px 25px #0002; }
.about-page .profile-avatar-placeholder { padding:18px; color:#c3cba9; }
.about-page .profile-avatar-placeholder svg { color:#a0b487; }
.about-page .profile-card,
.about-page .profile-card:nth-child(2),
.about-page .resume-card { border:1px solid #71805588; background:#10271ff2; box-shadow:var(--ruin-soft-shadow); }
.about-page .profile-card::after { display:none; }
.about-page .profile-card .card-number { color:#c5bc8b; border-bottom-color:#73825344; }
.about-page .profile-card .card-number::before { width:4px; height:4px; background:#c4a968; box-shadow:none; }
.about-page .profile-card .placeholder-lines span { height:2px; background:#63794e44; }
.about-page .profile-card .skill-tags > span { border:1px solid #6c805180; background:#193529; box-shadow:inset 0 1px #c4d4a611; }

/* A small lit beacon introduces real, directly usable contact details. */
.contact-editorial .contact-title-lockup { gap:22px; padding-right:0; }
.contact-editorial .contact-display { color:#a9b88a; font-size:clamp(28px,2.6vw,37px); text-shadow:none; }
.contact-editorial .contact-hero .contact-connect-art { display:none; }
.contact-editorial .contact-editorial-grid { gap:21px; }
.contact-editorial .contact-stack .contact-card,
.contact-editorial .contact-stack .contact-card + .contact-card {
  position:relative;
  padding:30px;
  border:1px solid #71805b99;
  background:#10271ff2;
  box-shadow:var(--ruin-soft-shadow);
}
.contact-editorial .contact-stack .email-card { background:radial-gradient(ellipse at 0 0,#d2bd740e,transparent 75%),#183326f5; }
.contact-editorial .contact-stack .phone-card { background:#10271ff2; }
.contact-editorial .contact-stack .wechat-card { background:#122c21f5; }
.contact-editorial .contact-card-body .contact-index,
.contact-editorial .email-card .contact-card-body .contact-index { color:#d1bb7f; padding-bottom:13px; border-bottom:1px solid #83946036; }
.contact-editorial .contact-stack .email-card .contact-value { font-size:clamp(22px,2.4vw,32px); text-shadow:none; letter-spacing:0; }
.contact-editorial .contact-stack .phone-card .contact-value { font-size:30px; letter-spacing:1px; }
.contact-editorial .contact-stack .wechat-card .contact-value { font-family:"Microsoft YaHei","PingFang SC",Arial,sans-serif; font-weight:600; font-size:29px; letter-spacing:0; color:#e7ecd3; }
.contact-editorial .contact-description,
.contact-editorial .email-card .contact-description { color:#b6c5a9; font-size:13px; }
.contact-editorial .contact-card-corner { color:#cfb475; font-size:36px; right:27px; top:29px; }
.contact-editorial .wechat-qr-trigger { width:min(100%,238px); padding:10px; border:1px solid #a8b48e; box-shadow:0 7px 20px #0002; background:#fff; }
.contact-editorial .wechat-qr-window,
.contact-editorial .wechat-qr-window img { aspect-ratio:820/1219; overflow:visible; object-fit:contain; }
.contact-editorial .wechat-qr-window img { height:auto; }
.contact-editorial .contact-closing { border-top:1px solid #72825066; margin-top:34px; font-size:22px; }

/* The full-size viewer stays a neutral dark mount for every original image. */
.lightbox { border:1px solid #75835c; box-shadow:0 24px 80px #0008; background:#0c231a; }
.lightbox .viewer-toolbar { border-bottom:1px solid #65794e77; background:#10271f; }
.lightbox .viewer-zoom button,
.lightbox .lightbox-close,
.lightbox .lightbox-prev,
.lightbox .lightbox-next { border:1px solid #72855199; box-shadow:inset 0 1px #ced9a516; }
.toast { border:1px solid #adbf7e; background:#193628; box-shadow:0 5px 25px #0005; }

@media (hover:hover) and (pointer:fine) {
  .page .button:hover,
  .lab-page .experiment-actions .button:hover,
  .contact-editorial .contact-card-action .button:hover,
  .page .detail-tabs button:hover { transform:translateY(-1px); border-color:#b7c38d; background:#244333; box-shadow:inset 0 1px #e4e9bf1a,0 3px 7px #0002; }
  .page .button-primary:hover,
  .lab-page .button-primary:hover,
  body[data-page="lab"] .experiment-actions .button-primary:hover,
  .contact-editorial .contact-card-action .button-primary:hover { color:#203418; background:#d1eaa0; border-color:#e1edb4; box-shadow:inset 0 1px #fbffdd50,0 3px 7px #0002; }
  .lab-page .experiment-feature:hover { transform:translateY(-2px); border-color:#a4b17b; box-shadow:0 14px 32px #0003,inset 0 1px #d7dfb71a; }
  .lab-page .experiment-cover:hover .play-mark { background:#c9d99c; border-color:#e3e6b3; color:#20351a; box-shadow:0 0 0 6px #c4d08b14; }
  .works-page .work-card:hover .work-art { transform:translateY(-2px); border-color:#afbc84; }
  .page .film-canvas-card:hover,
  .page .workbench-preview:hover,
  .page .board-overview:hover,
  .page .asset-grid .image-card:hover,
  .page .stills-section .image-card:hover,
  .page .workbench-screens .image-card:hover { border-color:#b3c18b; background:#173226; box-shadow:0 10px 30px #0003,inset 0 1px #d7dfb71a; }
  .about-page .profile-card:hover,
  .contact-editorial .contact-stack .contact-card:hover { border-color:#9eac77; }
  .contact-editorial .wechat-qr-trigger:hover { border-color:#e1c88d; box-shadow:0 9px 24px #0003; }
  .page .film-play:hover > span { transform:none; background:#ccdda3; color:#1e3219; }
}
.page .button:active,
.lab-page .experiment-actions .button:active,
body[data-page="lab"] .experiment-actions .button-primary:active,
.contact-editorial .contact-card-action .button:active { transform:translateY(1px); box-shadow:inset 0 1px #02100866; }

@media (max-width:1100px) and (min-width:761px) {
  .page .ruin-page-heading,
  .contact-editorial .contact-hero.ruin-page-heading { padding:24px 28px; gap:22px; grid-template-columns:minmax(0,1.2fr) minmax(200px,.8fr); min-height:255px; }
  .ruin-page-scene { width:260px; max-width:100%; height:218px; }
  .page .ruin-page-heading h1,
  .contact-editorial .contact-title-lockup h1 { font-size:61px; }
  .contact-editorial .contact-display { font-size:27px; }
  .lab-page .experiment-content { padding:26px; }
  .lab-page .experiment-feature h2 { font-size:34px; }
  .lab-page .experiment-actions { flex-direction:column; }
  .contact-editorial .contact-stack .contact-card { padding:26px; }
  .contact-editorial .contact-stack .email-card .contact-value { font-size:24px; }
}

@media (max-width:760px) {
  .page { padding-top:25px; }
  .page .ruin-page-heading,
  .contact-editorial .contact-hero.ruin-page-heading {
    display:grid;
    grid-template-columns:1fr;
    gap:0;
    min-height:0;
    margin-bottom:27px;
    padding:25px 23px 21px;
    background-position:center,center,68% 48%;
  }
  .page .ruin-page-heading::after,
  .contact-editorial .contact-hero.ruin-page-heading::after { left:23px; width:57px; }
  .page .ruin-page-heading h1,
  .contact-editorial .contact-title-lockup h1 { font-size:52px; line-height:1.35; }
  .lab-page .ruin-page-heading h1 { font-size:65px; }
  .page .ruin-page-heading .eyebrow,
  .contact-editorial .contact-hero.ruin-page-heading .eyebrow { font-size:10px; letter-spacing:1.2px; margin-bottom:12px; }
  .page .ruin-page-heading .page-lede,
  .lab-page .ruin-page-heading .page-lede,
  .contact-editorial .ruin-page-heading .contact-lede { font-size:12px; line-height:1.9; margin-top:13px; max-width:none; padding:0; }
  .ruin-page-scene { width:218px; height:150px; max-width:100%; margin:-4px -9px -6px 0; }
  .ruin-page-scene svg { width:100%; height:100%; }
  .ruin-chapter-number { top:7px; right:-3px; font-size:92px; }
  .ruin-scene-caption { bottom:-4px; right:0; font-size:8px; letter-spacing:1.4px; }
  .lab-page .filter-bar { gap:8px; margin-bottom:25px; }
  .lab-page .filter-button { padding:10px 12px; font-size:10px; min-height:40px; }
  .lab-page .featured-grid { gap:27px; }
  .lab-page .experiment-feature { grid-template-columns:1fr; border-width:1px; box-shadow:var(--ruin-soft-shadow); }
  .lab-page .experiment-cover { min-height:0; aspect-ratio:16/9; border-right:0; border-bottom:1px solid #63724e66; padding:0; }
  .lab-page .experiment-content,
  .lab-page .workbench-feature .experiment-content { padding:25px 23px; }
  .lab-page .experiment-meta { font-size:9px; padding-bottom:13px; margin-bottom:17px; gap:12px; }
  .lab-page .experiment-feature h2,
  .lab-page .workbench-feature h2 { font-size:31px; }
  .lab-page .experiment-feature p { font-size:12px; }
  .lab-page .experiment-actions { flex-direction:column; }
  .lab-page .experiment-actions .button { min-height:44px; }
  .lab-page .experiment-cover .play-mark { width:57px; height:57px; }
  .works-page .curated-grid { gap:30px; }
  .works-page .curated-grid .work-art { height:270px; }
  .works-page .placeholder-cover .cover-label strong { font-size:23px; }
  .works-page .work-card h2 { font-size:25px; }
  .page .experiment-info { border-left:1px solid #b8be8066; padding:12px 15px; }
  .page .case-nav { padding:5px; }
  .page .case-nav button { font-size:11px; }
  .page .video-frame,
  .experiment-page .video-frame { border-width:1px; box-shadow:0 9px 25px #0003; }
  .page .film-canvas-card,
  .page .workbench-preview { padding:6px; }
  .page .project-pagination a { padding:10px; }
  .about-page .profile-overview { padding:28px 23px; gap:30px; }
  .about-page .about-copy { padding-left:17px; border-left-width:1px; }
  .about-page .profile-overview .about-copy h2 { font-size:32px; }
  .about-page .profile-overview .about-copy p { font-size:13px; }
  .about-page .profile-portrait { width:173px; height:207px; }
  .about-page .profile-card { padding:25px; }
  .contact-editorial .contact-title-lockup { flex-direction:row; align-items:center; gap:18px; }
  .contact-editorial .contact-display { display:block; font-size:27px; }
  .contact-editorial .contact-hero-copy { padding:0; }
  .contact-editorial .contact-editorial-grid { gap:19px; }
  .contact-editorial .contact-stack .contact-card,
  .contact-editorial .contact-stack .contact-card + .contact-card { padding:26px 23px; gap:21px; }
  .contact-editorial .contact-stack .email-card .contact-value { font-size:clamp(19px,5.3vw,26px); letter-spacing:-.3px; }
  .contact-editorial .contact-stack .phone-card .contact-value { font-size:28px; }
  .contact-editorial .contact-stack .wechat-card .contact-value { font-size:27px; }
  .contact-editorial .contact-description,
  .contact-editorial .email-card .contact-description { font-size:12px; }
  .contact-editorial .contact-card-corner { top:24px; right:21px; font-size:29px; }
  .contact-editorial .contact-closing { font-size:20px; }
  .lightbox { box-shadow:none; }
}
@media (max-width:359px) {
  .page .ruin-page-heading,
  .contact-editorial .contact-hero.ruin-page-heading { padding-inline:19px; }
  .page .ruin-page-heading h1,
  .contact-editorial .contact-title-lockup h1 { font-size:45px; }
  .lab-page .ruin-page-heading h1 { font-size:58px; }
  .contact-editorial .contact-display { font-size:22px; }
  .contact-editorial .contact-stack .contact-card { padding-inline:20px; }
  .contact-editorial .contact-stack .email-card .contact-value { font-size:18px; }
  .lab-page .filter-button { padding-inline:10px; }
}
@media (prefers-reduced-motion:reduce) {
  .lab-page .experiment-feature,
  .page .button,
  .works-page .work-art { transition:none; }
}