/* Shared ambient motion and approved page title treatments. */
.motion-surface{
  overflow:hidden}
.motion-atmosphere,.motion-svg,.motion-fog,.motion-dust,.motion-beam{
  position:absolute;
  pointer-events:none}
.motion-atmosphere{
  inset:0;
  z-index:1;
  overflow:hidden}
.motion-svg{
  inset:0;
  width:100%;
  height:100%;
  overflow:visible}
.motion-dust{
  width:3px;
  height:3px;
  border-radius:50%;
  background:#eac88e;
  box-shadow:0 0 7px #ffedc8}
.motion-lamp{
  fill:#ffdca0;
  filter:blur(2px);
  mix-blend-mode:screen}
.motion-beam{
  inset:-30% -10%;
  background:linear-gradient(115deg,transparent 40%,#ffebbd38 46%,#fff5d630 49%,transparent 57%);
  mix-blend-mode:soft-light;
  transform:rotate(-8deg)}
.motion-fog{
  left:-20%;
  width:130%;
  height:30%;
  bottom:-5%;
  border-radius:50%;
  background:radial-gradient(ellipse,#f0ede2b0,transparent 68%);
  filter:blur(13px)}
.motion-fog:nth-child(2){
  bottom:17%;
  left:20%;
  width:90%;
  height:24%;
  opacity:.6}
.motion-fog:nth-child(3){
  bottom:2%;
  left:-30%;
  width:80%;
  height:40%;
  opacity:.6}
.world-page .motion-dust{
  background:#fff2ce;
  box-shadow:0 0 8px #fff8dd}
.world-page .world-hero{
  min-height:max(660px,90svh)}
.world-page .world-hero>img{
  object-position:center}
.world-page .world-hero-shade{
  z-index:2}
.world-scene{
  position:relative}
.world-scene .motion-scene-window{
  position:relative;
  overflow:hidden}
.world-scene .motion-scene-window img{
  width:100%;
  display:block}
.world-scene .motion-atmosphere{
  z-index:1}
.world-scene .motion-atmosphere .motion-fog{
  height:45%;
  filter:blur(10px)}
.motion-ripple{
  position:absolute;
  inset:62% 0 0;
  background:repeating-linear-gradient(177deg,transparent 0 12px,#fff0c03b 13px,transparent 15px 24px);
  mask-image:linear-gradient(transparent,#0009,transparent);
  opacity:.4}
.motion-process{
  display:flex;
  align-items:center;
  gap:16px;
  padding:28px 0 12px;
  color:#9b4933;
  font:700 11px 'DM Sans',sans-serif;
  letter-spacing:.06em}
.motion-process i{
  display:block;
  flex:1;
  height:1px;
  background:currentColor;
  transform-origin:left}
.maker-value-list article{
  position:relative}
.motion-value-line{
  position:absolute;
  bottom:0;
  left:0;
  width:100%;
  height:2px;
  background:#9b4933;
  transform-origin:left}
.motion-name-piece{
  display:inline-block}
.skills-hero{
  position:relative;
  isolation:isolate;
  overflow:hidden}
.skills-hero-visual{
  z-index:-1;
  overflow:hidden}
.skills-hero .skills-kicker{
  position:relative;
  z-index:3}
.motion-circuit{
  stroke:#d6ab6e;
  stroke-width:1;
  fill:none;
  opacity:.65}
.motion-signal{
  fill:#fff2ae;
  filter:drop-shadow(0 0 7px #ffdc76)}
.motion-skill-demo{
  display:block;
  width:100%;
  height:64px;
  margin-top:auto;
  padding-top:14px;
  color:currentColor;
  overflow:visible}
.motion-skill-demo .structure{
  fill:none;
  stroke:currentColor;
  stroke-width:1;
  opacity:.3}
.motion-skill-demo .active{
  fill:none;
  stroke:currentColor;
  stroke-width:1.5}
.motion-skill-demo .block{
  fill:currentColor;
  fill-opacity:.1;
  stroke:currentColor;
  stroke-width:1}
.motion-skill-demo .node{
  fill:currentColor}
.motion-skill-demo .outline{
  fill:none;
  stroke:currentColor;
  stroke-width:1.5;
  stroke-linecap:round;
  stroke-linejoin:round}
.motion-project-hand{
  stroke:#694838;
  stroke-linecap:round;
  stroke-width:3}
.motion-project-second{
  stroke:#c17e4a;
  stroke-width:1.5}
.motion-project-ring{
  fill:none;
  stroke:#ffe2ac;
  stroke-width:1.5;
  stroke-dasharray:1 12;
  opacity:.7}
.projects-page .project-preview{
  overflow:hidden}
.projects-page .project-preview img{
  transition:transform .65s cubic-bezier(.16,1,.3,1)}
.projects-page .project:hover .project-preview img,.projects-page .project:focus-visible .project-preview img{
  transform:scale(1.055)}
.projects-page .project-arrow{
  transition:transform .35s ease}
.projects-page .project:hover .project-arrow,.projects-page .project:focus-visible .project-arrow{
  transform:translate(5px,-5px)}
@media(max-width:760px){
  .world-page .world-hero{
  min-height:78svh}
.motion-dust:nth-child(2n){
  display:none}
.motion-beam{
  opacity:.5}
.motion-process{
  gap:10px;
  font-size:9px}
.motion-skill-demo{
  height:58px}
.world-page .world-hero-top span:last-child{
  display:none}
}
@media(prefers-reduced-motion:reduce){
  .motion-atmosphere{
  display:none}
.motion-skill-demo *,.motion-policy-line{
  animation:none!important}
.projects-page .project:hover .project-preview img,.projects-page .project:focus-visible .project-preview img{
  transform:none}
.projects-page .project-arrow{
  transition:none}
}


/* Keep the policy title readable at phone widths. */
@media (max-width: 760px) {
  
  .privacy-page .trust-hero h1 {
  
    font-size: clamp(28px, 8vw, 44px);
  
    white-space: normal;
  
    line-height: 1.25;
  
    letter-spacing: -.055em;
  
  }

}


/* Contact and Privacy use a fully static presentation. */
:is(.contact-page, .privacy-page) *,
:is(.contact-page, .privacy-page) *::before,
:is(.contact-page, .privacy-page) *::after {
  
  animation: none !important;
  
  transition: none !important;
  
}

:is(.contact-page, .privacy-page) .reveal {
  
  opacity: 1 !important;
  
  transform: none !important;
  
}

.contact-page .form-field::after {
   content: none;
   }


/* A two-line statement follows the Home / Skills title treatment. */
.projects-page .immersive-hero__title {
  
  max-width: none;
  
  font-size: clamp(56px, 10.5vw, 168px);
  
  line-height: 1.1;
  
  letter-spacing: -.06em;
  
}

.projects-title-line {
   display: inline-block;
   }

.projects-title-line--accent {
  
  padding: .02em .12em .065em .04em;
  
  color: var(--paper);
  
  background: var(--rust);
  
  -webkit-text-stroke: 0;
  
}

@media (max-width: 760px) {
  
  .projects-page .immersive-hero__title {
   font-size: clamp(48px, 11.5vw, 86px);
   }

}


/* Balance the long uppercase About title with the other page headings. */
.about-page .immersive-hero__title {
  
  font-size: clamp(61px, 9.92vw, 172px);
  
}

@media (max-width: 760px) {
  
  .about-page .immersive-hero__title {
   font-size: 12.64vw;
   }

}


.page-motion-toggle {
   position:absolute;
   z-index:8;
   right:20px;
   bottom:20px;
   width:36px;
   height:36px;
   border:1px solid #eee9dc88;
   border-radius:50%;
   color:#eee9dc;
   background:#101513b3;
   cursor:pointer;
   font-size:13px;
   }

.page-motion-toggle[hidden] {
   display:none;
   }

.page-motion-paused *, .page-motion-paused *::before, .page-motion-paused *::after {
   animation-play-state:paused!important;
   transition:none!important;
   }

.page-motion-reduced .motion-atmosphere {
   display:none;
   }