.device { --device-width: 258px; position: relative; width: min(var(--device-width), 100%); margin: 0; flex: 0 0 auto; }
.device-frame { position: relative; padding: 18px 8px; border: 1px solid #6b706c; border-radius: 35px; background: linear-gradient(125deg, #343a36, #121613 36%, #202721 80%, #454e46); box-shadow: 0 2px 0 #b5baad33 inset, 0 28px 55px #0005, 0 3px 6px #0005; }
.device-frame::before { content: ""; position: absolute; width: 35px; height: 3px; border-radius: 3px; background: #080c09; top: 7px; left: calc(50% - 17px); box-shadow: 0 1px 0 #79807255; }
.device-frame::after { content: ""; position: absolute; width: 2px; height: 39px; right: -3px; top: 89px; border-radius: 0 2px 2px 0; background: #747d70; }
.device-screen { position: relative; border-radius: 23px; overflow: auto; overscroll-behavior: contain; scrollbar-width: none; background: #fff; max-height: 580px; }
.device-screen::-webkit-scrollbar { display: none; }
.device-screen > a { display: block; min-height: 0; }
.device-screen img { display: block; width: 100%; height: auto; max-width: 100%; margin: 0; }
.device-screen a:focus-visible { outline: 3px solid #ff4d00; outline-offset: -4px; }
.device figcaption { margin-top: 17px; color: #a9b1a9; text-align: center; font-size: 11px; line-height: 1.65; }
.device figcaption a { text-decoration: underline; text-underline-offset: 4px; }
.device--scroll .device-screen { height: calc(var(--device-width) * 1.94); max-height: 540px; }
.device--detail .device-screen { max-height: none; }
.device--tablet { --device-width: 730px; }
.device--tablet .device-frame { padding: 13px 22px; border-radius: 28px; }
.device--tablet .device-frame::before { width: 5px; height: 5px; top: calc(50% - 3px); left: 8px; border-radius: 50%; }
.device--tablet .device-frame::after { display: none; }
.device--tablet .device-screen { border-radius: 9px; max-height: none; }
.device--tablet .device-screen img { width: 100%; height: auto; }
.device--small { --device-width: 205px; }
.device--peek .device-frame, .device--peek-top .device-frame { min-height: calc(var(--device-width) * 2.12); }
.device--peek-top .device-frame { padding-top: 120px; }
.device--peek-tablet .device-frame { padding-bottom: 80px; }
.device-cluster { position: relative; display: flex; justify-content: center; align-items: center; gap: clamp(22px, 5vw, 72px); isolation: isolate; min-width: 0; }
.device-cluster .device { position: relative; z-index: 1; }
.device-cluster .device:nth-child(2) { margin-top: 80px; }
.device-cluster .device:nth-child(3) { margin-top: 20px; }
.art-wash { position: absolute; pointer-events: none; inset: 5% 0; z-index: 0; background: radial-gradient(ellipse at 42% 60%, var(--wash, #8ca897) 0%, transparent 64%); opacity: .21; filter: blur(26px); }
.art-wash::after { content: ""; position: absolute; inset: 10%; background: url("assets/header-wall.jpg") center / cover; mask-image: radial-gradient(ellipse, black, transparent 70%); opacity: .28; mix-blend-mode: soft-light; }
.device-float { animation: device-drift 9s ease-in-out infinite; }
@keyframes device-drift { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
.home-page::before { position: absolute; bottom: auto; height: 100svh; }
.home-page section[tabindex="-1"]:focus, .home-page main[tabindex="-1"]:focus, .about-page section[tabindex="-1"]:focus { outline: none; }
:is(.home-page, .about-page) :is(h1, h2, h3) em { font-family: var(--hand); font-style: normal; font-weight: 400; letter-spacing: 0; }
.home-page #intro, .home-page #work, .home-page #side-projects, .about-page #about, .home-page #kind-words, .home-page #contact { --body: #bac0ba; --muted: #9da69e; --line: #ffffff19; --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", sans-serif; font-family: var(--sans); }
.home-page #intro { padding-block: 136px; grid-template-columns: 1.15fr .85fr; gap: 80px; }
.home-page #intro h1 { font-family: var(--sans); font-weight: 500; font-size: clamp(56px, 6vw, 84px); letter-spacing: -.045em; line-height: 1.08; }
.home-page #intro h1 em { color: #c8d3b9; }
.home-page #intro h1 em::after { display: none; }
.home-page .intro-story { padding-left: 35px; }
.home-page .intro-thought { font-size: 31px; max-width: 360px; }
.home-page .hero-description { font-size: 19px; line-height: 1.7; margin-top: 32px; max-width: 450px; }
.home-page .hero-actions { margin-top: 29px; }
.home-page .hero-actions .button { border-radius: 40px; font-size: 13px; padding: 14px 23px; }
.home-page .hero-actions .text-link { font-size: 13px; }
.home-page .current-chapter { font-size: 11px; margin-top: 30px; }
.home-page .chapter-strip { padding-block: 22px; opacity: .8; }
.home-page .section { padding-block: 128px; }
.home-page .section h2, .about-page .about-copy h1 { font-family: var(--sans); font-size: clamp(40px, 4vw, 58px); line-height: 1.16; letter-spacing: -.035em; font-weight: 500; }
.home-page .section h2 em, .about-page .about-copy h1 em { color: #c8d3b9; }
:is(.home-page, .about-page) .section-index { font-size: 11px; font-weight: 500; letter-spacing: 1.25px; color: #aeb8a9; margin-bottom: 28px; }
.home-page .section-intro { font-size: 17px; max-width: 390px; line-height: 1.75; }
.home-page .section-heading { align-items: end; gap: 80px; margin-bottom: 48px; }
.home-page .work-intro { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; max-width: 390px; }
.home-page .work-intro .section-intro { min-width: 0; margin-bottom: 0; }
.home-page .work-intro .work-motion { padding-inline: 0; color: var(--muted); }
.home-page .work-section .chapter-strip { align-items: flex-end; margin-bottom: 40px; }
.home-page .work-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 80px 40px; }
.home-page .work-grid > .project-card { grid-column: span 1; }
.home-page .project-card > .project-art { width: 100%; height: auto; min-height: 0; aspect-ratio: 3 / 2; container-type: inline-size; border-radius: 8px; }
.home-page .project-caption { padding-top: 24px; }
.home-page .project-caption h3 { font-family: var(--sans); font-size: 28px; font-weight: 500; letter-spacing: -.025em; line-height: 1.3; margin-top: 12px; }
.home-page .project-category { font-size: 11px; letter-spacing: 1px; }
:is(.home-page, .about-page) .company-logo { display: inline-block; width: 88px; height: 24px; flex: none; object-fit: contain; vertical-align: middle; }
.home-page .project-company { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.home-page .project-company > span { min-width: 0; }
.home-page .project-company .company-logo { width: 64px; height: 18px; object-position: right center; }
.home-page .chapter-strip .company { display: flex; align-items: center; }
.home-page .chapter-strip .company-logo { width: clamp(96px, 10vw, 128px); height: 34px; object-position: left center; }
.home-page .ongoing-tag { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border: 1px solid #a2d9be50; border-radius: 999px; background: #10251c; color: #c8efda; font-size: 10px; font-weight: 500; line-height: 1.4; letter-spacing: .3px; white-space: nowrap; }
.home-page .ongoing-tag .status-dot { background: #98e3b2; box-shadow: 0 0 7px #98e3b280; }
.home-page .project-art > .ongoing-tag { position: absolute; z-index: 2; top: 12px; left: 12px; }
.about-page .career-list .company-logo { width: 104px; height: 28px; object-position: left center; }
.home-page .company-inline { display: inline-block; vertical-align: baseline; }
.home-page .source-note .company-logo { width: 100px; height: 26px; object-position: left center; vertical-align: -.08em; }
.home-page .project-caption > p:not(.project-category) { font-size: 16px; margin-top: 10px; line-height: 1.7; }
.home-page .project-proof { font-size: 12px; margin-top: 16px; color: #aab5ac; }
.home-page .case-cover-care { background: #28332d; color: #d3ddc9; }
.home-page .case-cover-bixby { background: #282936; color: #d3cfe8; }
.home-page .case-cover-gaming { background: #2b3026; color: #d5ddc1; }
.home-page .recap-card { width: min(193px, 46cqw); top: 50%; left: 50%; translate: -50% -50%; padding: clamp(8px, 2.7cqw, 18px) clamp(8px, 2.5cqw, 17px) clamp(8px, 2cqw, 13px); transform: rotate(5deg); }
.home-page .recap-card svg { height: auto; aspect-ratio: 159 / 200; }
.home-page .recap-orbit, .home-page .sugar-orbit { top: 50%; left: 50%; translate: -50% -50%; }
.home-page .sugar-orbit { width: 235px; height: 235px; }
.home-page .health-phone { top: 50%; left: 50%; translate: -50% -50%; scale: 1; transform-origin: center; }
.home-page .health-flower { right: 9%; bottom: 9%; font-size: clamp(32px, 9cqw, 56px); }
@container (max-width: 430px) {
  .home-page .recap-orbit, .home-page .sugar-orbit, .home-page .health-phone { scale: .65; }
}
.work-device-stage { position: absolute; inset: 45px 20px 20px; display: flex; align-items: flex-start; justify-content: center; gap: 48px; }
.work-device-stage .device { --device-width: 194px; transform: rotate(-6deg); }
.work-device-stage .device:nth-child(2) { margin-top: 50px; transform: rotate(7deg); }
.work-device-stage .device:nth-child(3) { margin-top: 15px; transform: rotate(-2deg); }
.work-device-stage .device-screen { overflow: hidden; max-height: 420px; }
.work-device-stage .device-frame { box-shadow: 0 15px 40px #0003; }
.cover-context-phone { position: absolute; width: 200px; top: 65px; left: calc(50% - 100px); transform: rotate(-7deg); }
.cover-context-phone .device { --device-width: 200px; }
.cover-context-phone .device-screen { overflow: hidden; }
.home-page .work-device-stage { inset: max(16px, 6cqw) 4cqw auto; gap: 5cqw; }
.home-page .work-device-stage .device { --device-width: min(26cqw, 194px); }
.home-page .work-device-stage .device:nth-child(2) { margin-top: 8cqw; }
.home-page .work-device-stage .device:nth-child(3) { margin-top: 2.5cqw; }
.home-page .cover-context-phone { width: min(200px, 30cqw); top: 10%; left: 50%; translate: -50% 0; }
.home-page .cover-context-phone .device { --device-width: 100%; }
.home-page :is(.case-cover-care, .case-cover-bixby, .case-cover-gaming) .device-frame { border-radius: clamp(6px, 2cqw, 12px); }
.home-page :is(.case-cover-care, .case-cover-bixby, .case-cover-gaming) .device-screen { border-radius: clamp(3px, 1cqw, 6px); }
.home-page .side-section { background: #121414; border-block: 1px solid #ffffff14; }
.home-page .side-work-grid { margin-top: 56px; }
.home-page .side-cover-metabolic { background: #75c8c5; }
.metabolic-cover-backdrop, .metabolic-cover-scene { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.metabolic-cover-backdrop { object-fit: fill; }
.metabolic-cover-figure { animation: metabolic-figure-float 7s ease-in-out infinite; }
.metabolic-cover-object { transform-box: fill-box; transform-origin: center; animation: metabolic-object-sway 8s ease-in-out infinite alternate; }
.metabolic-cover-object--medication { animation-delay: -2s; }
.metabolic-cover-object--breakfast { animation-duration: 9s; animation-delay: -5s; }
.metabolic-cover-object--scale { animation-duration: 10s; animation-delay: -3s; }
.metabolic-cover-object--meter { animation-duration: 11s; animation-delay: -7s; }
html[data-motion="off"] .side-cover-metabolic .motion { animation: none; transform: none; }
@keyframes metabolic-figure-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes metabolic-object-sway { from { transform: translateY(0) rotate(-1deg); } to { transform: translateY(-4px) rotate(1deg); } }
.home-page .side-cover-homestead, .home-page .side-cover-chair { display: grid; place-items: center; padding: 24px; }
.home-page .side-cover-homestead { background: #dce0cf; color: #61734c; }
.home-page .side-cover-homestead .homestead-drawing { width: min(80%, 340px); height: auto; }
.home-page .side-cover-chair { background: #d4d7e2; color: #626b83; }
.home-page .side-cover-chair .quest-icon { position: static; width: min(150px, 50cqw); height: auto; aspect-ratio: 1; }
.home-page .side-cover-photo { background: #26332e; }
.side-cover-image { width: 100%; height: 100%; object-fit: cover; animation: cover-breathe 14s ease-in-out infinite alternate; }
.home-page .side-cover-heart .side-cover-image { object-position: 50% 50%; }
.home-page .side-cover-syringes { background: #e6e2d9; }
.home-page .side-cover-syringes .side-cover-image { object-fit: contain; }
.shelf-heading { font-family: var(--sans); font-size: 19px; font-weight: 400; letter-spacing: -.4px; color: var(--body); margin-top: 65px; }
@keyframes cover-breathe { from { transform: scale(1.015); } to { transform: scale(1.055); } }
.project-disclosure { margin-top: 64px; border-block: 1px solid var(--line); }
.project-disclosure > summary { display: flex; justify-content: space-between; align-items: center; gap: 24px; min-height: 84px; padding-block: 20px; font-size: 19px; line-height: 1.4; list-style: none; cursor: pointer; }
.project-disclosure > summary::-webkit-details-marker { display: none; }
.project-disclosure > summary:hover { color: var(--accent); }
.project-disclosure-meta { display: inline-flex; align-items: center; gap: 24px; flex-shrink: 0; color: var(--muted); font-size: 12px; }
.project-disclosure-icon { display: grid; place-items: center; width: 32px; height: 32px; font-size: 25px; font-weight: 300; }
.project-disclosure[open] .project-disclosure-icon { transform: rotate(45deg); }
.project-disclosure-open, .project-disclosure[open] .project-disclosure-closed { display: none; }
.project-disclosure[open] .project-disclosure-open { display: inline; }
.project-more-grid { padding-block: 32px 64px; }
.home-page .quest-grid { gap: 32px 23px; }
.home-page .quest-art { border-radius: 12px; }
.home-page .quest-card h3 { font-size: 15px; font-weight: 500; }
.home-page .quest-card > p { font-size: 11px; }
.about-page .about-section { padding-block: 64px 128px; background: #1b201d; }
.about-page .about-copy h1 { margin-top: 0; }
.about-page .about-copy h1 em::after { display: none; }
.about-page .about-copy > p { font-size: 18px; line-height: 1.75; }
.about-page .about-copy .about-opening { font-size: 20px; letter-spacing: -.2px; }
.about-page .about-tags span { border: 0; background: #ffffff08; border-radius: 4px; font-size: 12px; padding: 8px 12px; }
.about-page .resume-link { font-size: 13px; }
.about-page .career-details { margin-top: 96px; }
.about-page .career-details summary { display: block; padding-block: 28px; }
.about-page .career-details summary h2 { display: flex; align-items: center; justify-content: space-between; gap: 24px; font-family: var(--sans); font-size: clamp(24px, 2.5vw, 34px); font-weight: 500; line-height: 1.3; letter-spacing: -.025em; }
.about-page .career-toggle { flex: none; font-size: 28px; font-weight: 300; color: var(--muted); }
.about-page .career-details[open] .career-toggle { transform: rotate(45deg); }
.about-page .career-list { padding: 0; }
.about-page .career-list > li { grid-template-columns: minmax(200px, 1fr) minmax(0, 3fr); gap: 48px; padding-block: 36px; border-color: var(--line); }
.about-page .career-meta h3 { display: flex; align-items: center; min-height: 28px; font-size: 23px; font-weight: 500; letter-spacing: -.02em; }
.about-page .career-meta .company-logo--blot { width: 80px; height: 34px; }
.about-page .career-list .career-role { margin-top: 14px; font-size: 14px; line-height: 1.5; color: var(--ink); }
.about-page .career-list .career-dates { margin-top: 8px; font-size: 12px; line-height: 1.6; }
.about-page .career-work { min-width: 0; }
.about-page .career-list .career-summary { max-width: 70ch; color: var(--body); font-size: 16px; line-height: 1.75; }
.about-page .career-intro { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 16px 24px; max-width: 880px; }
.about-page .career-intro > .career-summary { flex: 1 1 36ch; min-width: 0; }
.about-page .career-intro > .career-case-link { flex: 0 0 auto; margin-top: 0; }
.about-page .career-projects { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 24px; max-width: 880px; margin-top: 24px; }
.about-page .career-project-rail { max-width: 880px; margin-top: 24px; margin-left: -8px; }
.about-page .career-project-rail.is-enhanced { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 44px; align-items: center; gap: 12px; }
.about-page .career-projects.career-projects--rail { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: min(210px, 100%); gap: 24px; min-width: 0; max-width: none; margin: 0; padding: 10px 8px 14px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 8px; scrollbar-width: thin; scrollbar-color: var(--muted) transparent; }
.about-page .career-projects--rail > .career-project { scroll-snap-align: start; }
.about-page .career-projects--rail:focus-visible { outline: 2px solid var(--rust); outline-offset: 3px; border-radius: 8px; }
.about-page .career-rail-control:disabled { opacity: .3; }
.about-page #microsoft-projects-previous { position: absolute; left: 8px; top: 80px; transform: translateY(-50%); z-index: 2; background: var(--paper); }
.about-page #microsoft-projects-previous:disabled { display: none; }
.about-page .career-rail-control svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.about-page .career-project { display: block; min-width: 0; margin: 0; border-radius: 8px; }
.about-page .career-project-name { display: block; margin-top: 12px; font-size: 14px; font-weight: 500; line-height: 1.5; }
.about-page .career-project-highlight { display: block; margin-top: 6px; color: var(--body); font-size: 12px; line-height: 1.6; }
.about-page .career-project-highlight strong { color: var(--accent); font-size: 14px; font-weight: 600; }
.about-page .career-art--logo { background: #fff; }
.about-page .career-art--thesis { background: #fff; }
.about-page .career-art--thesis > img { object-position: center top; }
.about-page .career-art--diagram { display: grid; place-items: center; color: #d3c4ef; background: #231d32; }
.about-page .career-art--diagram > svg { width: 42%; max-width: 84px; height: auto; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.about-page .career-case-link { min-height: 44px; margin-top: 24px; padding: 9px 14px; border-color: var(--line); border-radius: 8px; background: transparent; color: var(--body); font-weight: 400; }
.about-page .career-case-link:hover { border-color: color-mix(in srgb, var(--accent) 45%, transparent); background: color-mix(in srgb, var(--accent) 5%, transparent); color: var(--ink); }
.about-page .career-case-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.about-page a.career-project:hover .career-project-name, .about-page a.career-project:focus-visible .career-project-name { color: var(--accent); }
@media screen and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) and (forced-colors: none) {
  .about-page a.career-project .related-art > img { transform: scale(var(--career-image-zoom, 1)); }
  .about-page a.career-project .related-art--single > img { transform: translateX(-50%) scale(var(--career-image-zoom, 1)); }
  html[data-motion="on"] .about-page a.career-project .related-art,
  html[data-motion="on"] .about-page a.career-project .related-art > img { transition: transform .24s ease; }
  html[data-motion="on"] .about-page a.career-project:is(:hover, :focus-visible) { --career-image-zoom: 1.05; }
  html[data-motion="on"] .about-page a.career-project:is(:hover, :focus-visible) .related-art { transform: translateY(-3px) scale(1.02); }
}
.about-page .about-interests { margin-top: 32px; }
.about-page .about-interests h2 { font-family: var(--sans); font-size: 19px; font-weight: 500; line-height: 1.5; letter-spacing: -.2px; }
.about-page .about-interests ul { margin: 14px 0 0; padding-left: 20px; color: var(--body); font-size: 16px; line-height: 1.75; }
.about-page .about-interests li + li { margin-top: 5px; }
.about-page .about-interests li::marker { color: var(--accent); }
.home-page .testimonial-rail { --case-accent: #c8d3b9; --testimonial-width: clamp(320px, 32vw, 420px); gap: 20px; }
.home-page .testimonial-viewport { padding: 4px; border-radius: 0; scroll-padding-inline: 4px; }
.home-page .testimonial-viewport:focus-visible { outline-offset: -2px; }
.home-page .testimonial-track { grid-template-rows: auto; gap: 24px; height: auto; }
.home-page .testimonial-track::after { grid-row: 1; width: max(0px, calc(100cqw - var(--testimonial-width) - 24px)); }
.home-page .testimonial-card {
  --source-width: 420;
  --persona-background: #dfc5b6;
  --persona-skin: #edc9a8;
  --persona-hair: #4a4741;
  --persona-shirt: #6b7769;
  width: var(--testimonial-width);
  height: auto;
  min-width: 0;
  align-self: start;
  padding: 28px;
  color: #27322e;
  background: #efddd2;
  border: 1px solid #27322e0a;
  border-radius: 8px;
  break-inside: avoid;
}
.home-page .testimonial-card:nth-child(even) { align-self: start; }
.home-page .testimonial-card--sage { background: #dce5d8; --persona-background: #c1d3bc; --persona-shirt: #657f87; --persona-hair: #5e4d44; }
.home-page .testimonial-card--blue { background: #d9e6ea; --persona-background: #bdcfd5; --persona-shirt: #8c745b; --persona-skin: #ceaa8a; }
.home-page .testimonial-card--cream { background: #eee8cf; --persona-background: #ddd2aa; --persona-shirt: #777386; }
.home-page .testimonial-card--lilac { background: #e4dfec; --persona-background: #cdc4df; --persona-shirt: #647f73; --persona-hair: #464353; }
.home-page .testimonial-card--sand { background: #e8dfd3; --persona-background: #d5c6b3; --persona-shirt: #627b89; --persona-skin: #d5b08e; }
.home-page .testimonial-card--mint { background: #d8e7e1; --persona-background: #bcd4ca; --persona-shirt: #a17665; }
.home-page .testimonial-card--rose { background: #eadbde; --persona-background: #d8c0c6; --persona-shirt: #767d9a; --persona-hair: #574840; }
.home-page .testimonial-card figure { margin: 0; }
.home-page .testimonial-card figcaption { display: grid; grid-template-columns: 72px minmax(0, 1fr); align-items: center; gap: 18px; margin: 0 0 24px; min-height: 80px; }
.home-page .testimonial-avatar { width: 72px; height: 72px; border-radius: 50%; overflow: hidden; }
.home-page .testimonial-card :is(blockquote, .testimonial-copy) { margin: 0; padding: 0; border: 0; }
.home-page .testimonial-card :is(blockquote, .testimonial-copy) p { font-family: var(--serif); font-size: 18px; font-weight: 400; line-height: 1.6; text-wrap: pretty; }
.home-page .testimonial-card :is(blockquote, .testimonial-copy) p + p { margin-top: 20px; }
.home-page .testimonial-details { margin-top: 16px; }
.home-page .testimonial-details > summary { display: flex; align-items: center; min-height: 44px; padding-block: 8px; color: #3c5146; font-size: 13px; text-decoration: underline; text-underline-offset: 4px; }
.home-page .testimonial-details > summary:focus-visible { outline-color: #3c5146; outline-offset: 2px; }
.home-page .testimonial-less, .home-page .testimonial-details[open] .testimonial-more { display: none; }
.home-page .testimonial-details[open] .testimonial-less { display: inline; }
.home-page .testimonial-card:has(.testimonial-details[open]) .testimonial-excerpt { display: none; }
.home-page .testimonial-details[open] { margin-top: 0; }
.home-page .testimonial-details[open] > summary { margin-bottom: 12px; }
.home-page .testimonial-card cite { display: block; color: #505d56; font-size: 13px; font-style: normal; line-height: 1.6; }
.home-page .testimonial-card cite span { display: block; }
.home-page .testimonial-role { color: #27322e; font-family: var(--serif); font-size: 22px; font-weight: 600; line-height: 1.2; margin-bottom: 6px; }
.home-page .footer-invitation h2 { font-family: var(--sans); font-weight: 500; font-size: clamp(46px, 6.5vw, 90px); letter-spacing: -3.4px; }
.home-page .footer-email > a { font-size: 16px; }
.home-page .footer-bottom { font-size: 11px; }
.home-page .footer-contact { width: auto; height: auto; min-height: 52px; border-radius: 30px; padding: 12px 25px; font-size: 13px; }
.home-page .project-dialog { --paper: #121414; --ink: #f1f0eb; --body: #bec3c0; --muted: #9da5a1; --line: #ffffff17; --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", sans-serif; width: min(760px, calc(100% - 32px)); font-family: var(--sans); }
.home-page .project-dialog::backdrop { background: #080b0bcc; }
.home-page .dialog-content { padding: 32px 48px; }
.home-page .dialog-topline .eyebrow { font-size: 10px; }
.home-page .dialog-topline .icon-button { margin-right: 0; }
.home-page .dialog-status { font-size: 10px; background: transparent; padding: 0; color: var(--muted); }
.home-page .project-dialog h2 { font-family: var(--sans); font-size: 40px; line-height: 1.15; letter-spacing: -.035em; margin-top: 20px; }
.home-page .dialog-summary { font-size: 18px; line-height: 1.75; margin-top: 24px; }
.home-page .dialog-metrics { grid-template-columns: repeat(var(--metric-count, 3), minmax(0, 1fr)); margin-top: 32px; padding-block: 28px; gap: 24px; }
.home-page .dialog-metrics strong { font-family: var(--sans); }
.home-page .dialog-metrics span { font-size: 12px; }
.home-page .dialog-facts { font-size: 16px; line-height: 1.75; margin-block: 28px; }
.home-page .dialog-placeholder { background: transparent; border-top: 1px solid var(--line); padding: 28px 0 0; margin-top: 32px; }
.home-page .dialog-placeholder strong { font-size: 14px; }
.home-page .dialog-placeholder p { font-size: 14px; line-height: 1.75; }
.home-page .dialog-navigation { margin-top: 32px; padding-top: 20px; }
.home-page .dialog-navigation p, .home-page .project-step { font-size: 12px; }
@media (max-width: 1050px) {
  .home-page #intro { gap: 30px; }
  .home-page #intro h1 { font-size: 66px; letter-spacing: -3.5px; }
  .home-page .intro-story { padding-left: 0; }
  .work-device-stage .device { --device-width: 175px; }
  .about-page .about-grid { gap: 60px; }
}
@media (max-width: 760px) {
  .device { --device-width: 232px; }
  .device--tablet { --device-width: 100%; }
  .device-frame { border-radius: 32px; }
  .device-cluster { gap: 17px; }
  .device-cluster .device { --device-width: 41vw; max-width: 220px; }
  .device-cluster .device:nth-child(2) { margin-top: 45px; }
  .device-cluster .device:nth-child(3) { display: none; }
  .home-page #intro { grid-template-columns: 1fr; padding-block: 88px; gap: 40px; }
  .home-page #intro h1 { font-size: clamp(54px, 11vw, 78px); letter-spacing: -3px; }
  .home-page .hero-description { font-size: 18px; margin-top: 24px; }
  .home-page .intro-thought { font-size: 28px; }
  .home-page .section { padding-block: 88px; }
  .home-page .section h2, .about-page .about-copy h1 { font-size: 42px; letter-spacing: -1.8px; }
  .home-page .section-intro { font-size: 17px; margin-top: 24px; }
  .home-page .section-heading { gap: 0; }
  .home-page .work-grid { grid-template-columns: 1fr; gap: 56px; }
  .home-page .work-grid > .project-card { grid-column: 1; }
  .work-device-stage .device { --device-width: 143px; }
  .work-device-stage .device:nth-child(3) { display: none; }
  .project-disclosure { margin-top: 48px; }
  .project-disclosure > summary { gap: 16px; font-size: 17px; }
  .project-disclosure-meta { gap: 8px; font-size: 11px; }
  .project-more-grid { padding-block: 24px 48px; }
  .shelf-heading { margin-top: 45px; font-size: 17px; }
  .home-page .project-caption h3 { font-size: 24px; }
  .home-page .project-caption > p:not(.project-category) { font-size: 16px; }
  .home-page .project-category { font-size: 10px; }
  .home-page .quest-card h3 { font-size: 13px; }
  .home-page .quest-card > p { font-size: 10px; }
  .about-page .about-section { padding-block: 32px 88px; }
  .about-page .about-grid { gap: 40px; }
  .about-page .about-copy .about-opening { font-size: 18px; }
  .about-page .about-copy > p { font-size: 17px; }
  .about-page .career-details { margin-top: 64px; }
  .about-page .career-list > li { grid-template-columns: 1fr; gap: 20px; padding-block: 28px; }
  .home-page .testimonial-rail { --testimonial-width: min(420px, calc(100vw - 56px)); }
  .home-page .testimonial-track { gap: 16px; }
  .home-page .testimonial-card { padding: 22px; }
  .home-page .testimonial-card figcaption { grid-template-columns: 60px minmax(0, 1fr); gap: 14px; margin-bottom: 20px; }
  .home-page .testimonial-avatar { width: 60px; height: 60px; }
  .home-page .testimonial-role { font-size: 20px; }
  .home-page .testimonial-card :is(blockquote, .testimonial-copy) p { font-size: 17px; }
  .home-page .footer-invitation h2 { font-size: 45px; letter-spacing: -2px; }
  .home-page .footer-contact { padding: 8px 14px; min-height: 46px; font-size: 11px; }
  .home-page .footer-bottom { font-size: 10px; }
  .home-page .dialog-content { padding: 24px; }
  .home-page .project-dialog h2 { font-size: 32px; }
  .home-page .dialog-summary { font-size: 17px; }
  .home-page .dialog-metrics { grid-template-columns: 1fr; gap: 24px; }
  .home-page .dialog-metrics > div { display: grid; grid-template-columns: 110px 1fr; gap: 16px; align-items: center; }
  .home-page .dialog-metrics span { margin-top: 0; }
}
@media (max-width: 390px) {
  .home-page .section h2, .about-page .about-copy h1 { font-size: 37px; }
  .work-device-stage .device { --device-width: 129px; }
}
@media (max-width: 600px) {
  .about-page .career-projects { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; max-width: 460px; }
  .home-page .chapter-strip .company { flex-basis: calc((100% - 24px) / 2); }
  .home-page .project-company { gap: 12px; }
  .home-page .project-company .company-logo { width: 56px; height: 16px; }
}
@media (forced-colors: active), print {
  :is(.home-page, .about-page) .company-logo { background: #0c1018; forced-color-adjust: none; print-color-adjust: exact; }
}
@media (prefers-reduced-motion: reduce) {
  .device-float { animation: none; }
  .side-cover-metabolic .motion { animation: none; transform: none; }
}
@media (forced-colors: active) {
  .about-page .career-art--logo { forced-color-adjust: none; }
  .about-page .career-art--diagram { background: Canvas; color: CanvasText; border: 1px solid CanvasText; }
  .home-page .ongoing-tag { color: CanvasText; background: Canvas; border-color: CanvasText; }
  .home-page .ongoing-tag .status-dot { background: CanvasText; box-shadow: none; }
  .side-cover-metabolic .motion { animation: none; transform: none; }
  .home-page .testimonial-card { border-color: CanvasText; }
  .home-page .testimonial-avatar { forced-color-adjust: none; }
}
@media print {
  .about-page .career-project-rail.is-enhanced { display: block; }
  .about-page .career-projects.career-projects--rail { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; scroll-snap-type: none; }
  .about-page .career-projects--rail > .career-project { break-inside: avoid; }
  .about-page .career-rail-control { display: none !important; }
  .about-page .career-art--diagram { background: transparent; color: #222; }
  .project-disclosure > summary { display: none; }
  .project-disclosure::details-content { content-visibility: visible; height: auto; }
  .side-cover-metabolic .motion { animation: none; transform: none; }
  .home-page #kind-words { --body: #333; --muted: #555; --line: #ccc; }
  .home-page #kind-words h2 em { color: inherit; }
  .home-page #kind-words .section-index { color: var(--muted); }
  .home-page .testimonial-avatar { display: none; }
  .home-page .testimonial-track { display: block; }
  .home-page .testimonial-card { width: 100%; background: transparent; border-color: var(--line); }
  .home-page .testimonial-card figcaption { display: block; min-height: 0; }
  .home-page .testimonial-excerpt, .home-page .testimonial-details > summary { display: none; }
  .home-page .testimonial-details { margin: 0; }
  .home-page .testimonial-details::details-content { content-visibility: visible; height: auto; }
}